bpm-core 0.0.62 → 0.0.64

package/fesm2022/bpm-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, inject, DestroyRef, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, forwardRef, EventEmitter, Input, Output, Directive, HostListener, ViewChild, NO_ERRORS_SCHEMA, PLATFORM_ID, ElementRef, InjectionToken } from '@angular/core';
+import { Injectable, Inject, inject, DestroyRef, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, forwardRef, EventEmitter, Input, Output, Directive, HostListener, ViewChild, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import { Subject, ReplaySubject, BehaviorSubject, catchError, throwError, switchMap, from, fromEvent, debounceTime } from 'rxjs';
@@ -8,7 +8,7 @@ import { HttpHeaders } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/common';
-import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgComponentOutlet, DOCUMENT, NgFor, isPlatformBrowser } from '@angular/common';
+import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgFor, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i4$1 from '@angular/material/core';
 import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import * as i4 from '@angular/forms';
@@ -39,7 +39,7 @@ import * as i2$2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
 import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i2$4 from '@angular/router';
+import * as i2$3 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';
@@ -50,18 +50,18 @@ import * as i3$3 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 { MatSort } from '@angular/material/sort';
+import * as i2$4 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2$5 from '@angular/material/expansion';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
-import * as i2$5 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
 import * as i3$2 from 'ng-dynamic-component';
 import { ComponentOutletIoDirective, DynamicModule, DynamicComponentInjectorToken } from 'ng-dynamic-component';
 import * as i3$4 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i5$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatSort } from '@angular/material/sort';
 
 // Constant for basic validations
 const DONT_SHOW = null;
@@ -3743,7 +3743,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     styleWidth = '6';
     hints;
     allowedExtensions = '';
-    callApi;
+    callApi = true;
     display = '';
     validExtension = true;
     attachType = '';
@@ -4078,12 +4078,10 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         }
     }
     removeAttachedFile() {
-        // 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);
@@ -4092,14 +4090,6 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         this.coreService.loadFile(field.attachmentId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((responseObject) => {
             const fileInformation = responseObject.body;
             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);*/
         }, error => {
             this.toasterService.error(error.error?.['message']);
         });
@@ -4125,7 +4115,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => DocsUploaderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n      [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\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{ name: control.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n    (click)=\"fileAttached.click()\"\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        >\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{ name: control.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, decorators: [{
             type: Component,
@@ -4143,7 +4133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => DocsUploaderComponent),
                             multi: true,
                         },
-                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n      [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\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{ name: control.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
+                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n    (click)=\"fileAttached.click()\"\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        >\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{ name: control.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
         }], propDecorators: { useCrop: [{
                 type: Input
             }], formKey: [{
@@ -4468,15 +4458,6 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
         return new Promise((resolve, reject) => {
             this.coreService.loadFile(field.attachmentId).pipe(takeUntilDestroyed(this.destroyRef)).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 => {
@@ -4491,7 +4472,7 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
                 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  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @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\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\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 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]=\"'downloadAll' | translate\"\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>{{ 'FileName' | translate }}</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>{{ 'FileDescription' | translate }}</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              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</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>{{ 'comment' | translate }}</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']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\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\">{{ element?.['attachmentcomment'] }}</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-coral\"></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    </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 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\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: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.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}.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}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;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}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.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 .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-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::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}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\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", "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"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @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()\">\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\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\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 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]=\"'downloadAll' | translate\"\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>{{ 'FileName' | translate }}</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>{{ 'FileDescription' | translate }}</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              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</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>{{ 'comment' | translate }}</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']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\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\">{{ element?.['attachmentcomment'] }}</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-coral\"></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    </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 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\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: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.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}.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}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;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}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.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 .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-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::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}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\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", "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"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
             type: Component,
@@ -4522,7 +4503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatRowDef,
                         FormLabelComponent,
                         TranslatePipe
-                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @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\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\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 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]=\"'downloadAll' | translate\"\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>{{ 'FileName' | translate }}</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>{{ 'FileDescription' | translate }}</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              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</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>{{ 'comment' | translate }}</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']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\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\">{{ element?.['attachmentcomment'] }}</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-coral\"></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    </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 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\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: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.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}.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}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;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}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.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 .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-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::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}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
+                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @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()\">\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\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\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 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]=\"'downloadAll' | translate\"\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>{{ 'FileName' | translate }}</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>{{ 'FileDescription' | translate }}</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              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</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>{{ 'comment' | translate }}</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']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\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\">{{ element?.['attachmentcomment'] }}</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-coral\"></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    </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 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\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: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.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}.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}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;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}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.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 .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-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::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}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], attachmentsMax: [{
@@ -4576,107 +4557,409 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
-class ApprovalsComponent {
-    sidenavService;
-    i18n;
-    coreService;
-    constructor(sidenavService, i18n, coreService) {
-        this.sidenavService = sidenavService;
-        this.i18n = i18n;
-        this.coreService = coreService;
+function mapTo(path, source, allowUndefined = false, allowArrayWithSingleValue = false) {
+    let toBeReturned;
+    if (source) {
+        const attributes = path.split('.');
+        toBeReturned = source[attributes[0]];
+        for (let i = 1; i < attributes.length && toBeReturned != null; i++)
+            toBeReturned = toBeReturned[attributes[i]];
     }
-    closeSidenav() {
-        this.sidenavService.publish('close', null);
+    // Check if the value is a valid date
+    if (toBeReturned instanceof Date) {
+        return toBeReturned;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ApprovalsComponent, isStandalone: true, selector: "app-approvals", ngImport: i0, template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('approvalCycle') }}</h3>\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <div class=\"sidenav-body p-4\">\r\n    @if (coreService.approvals) {\r\n      <ds-approvals approvalsData=\"{{coreService.approvals}}\"></ds-approvals>\r\n    } @else {\r\n      <ds-message label=\"{{i18n.translate('NoData2')}}\"></ds-message>\r\n    }\r\n  </div>\r\n</section>\r\n", styles: [""] });
+    // Return null for undefined or missing date values
+    if (toBeReturned === undefined || toBeReturned === null) {
+        return allowUndefined ? toBeReturned : null;
+    }
+    // Return '-' for other missing values
+    let toReturn = toBeReturned || toBeReturned === 0 ? toBeReturned : '-';
+    // // to make sure that if the returned data is undefined, we will override it by -
+    // let toReturn = toBeReturned || toBeReturned === 0 ? toBeReturned : allowUndefined ? toBeReturned : '-';
+    if (Array.isArray(toReturn) && toReturn.length == 1 && !allowArrayWithSingleValue) {
+        toReturn = toReturn[0];
+    }
+    return toReturn;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-approvals', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [], template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('approvalCycle') }}</h3>\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <div class=\"sidenav-body p-4\">\r\n    @if (coreService.approvals) {\r\n      <ds-approvals approvalsData=\"{{coreService.approvals}}\"></ds-approvals>\r\n    } @else {\r\n      <ds-message label=\"{{i18n.translate('NoData2')}}\"></ds-message>\r\n    }\r\n  </div>\r\n</section>\r\n" }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }, { type: CoreService }] });
 
-const dangerStatusValues = [
-    FORM_STATUS_REJECTED,
-    FORM_STATUS_CANCELLED,
-    'deny',
-    'reject',
-    'unsatisfied',
-    'cancel'
-];
-const warningStatusValues = [
-    FORM_STATUS_PENDING,
-    'pending'
+var Colors;
+(function (Colors) {
+    Colors["RED"] = "#CA102F";
+    Colors["GREEN"] = "#02C389";
+})(Colors || (Colors = {}));
+
+var Events;
+(function (Events) {
+    Events["SCROLL"] = "scroll";
+    Events["ENTER"] = "enter";
+})(Events || (Events = {}));
+
+var Actions;
+(function (Actions) {
+    Actions["VIEW"] = "view";
+    Actions["COPY"] = "copy";
+    Actions["EDIT"] = "edit";
+    Actions["DELETE"] = "delete";
+    Actions["DELETEPENDING"] = "deletePendingContract";
+    Actions["CHART"] = "chart";
+    Actions["APPROVE"] = "approve";
+    Actions["REJECT"] = "reject";
+    Actions["DETAILS"] = "Details";
+    Actions["START"] = "Start";
+    Actions["PREPARE"] = "Prepare";
+    Actions["CUSTOMACTION"] = "customAction";
+    Actions["CUSTOMACTIONMANAGE"] = "customActionManage";
+    Actions["CUSTOMACTIONEXTEND"] = "customActionExtend";
+    Actions["CUSTOMACTIONDETAILS"] = "customActionDetails";
+    Actions["STATUS"] = "status";
+    Actions["ALLOCATE"] = "allocate";
+})(Actions || (Actions = {}));
+
+class SkipLocationDirective {
+    router;
+    appSkipLocation;
+    constructor(router) {
+        this.router = router;
+    }
+    onClick() {
+        this.router.navigate([this.appSkipLocation], { skipLocationChange: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkipLocationDirective, isStandalone: true, selector: "[appSkipLocation]", inputs: { appSkipLocation: "appSkipLocation" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[appSkipLocation]'
+                }]
+        }], ctorParameters: () => [{ type: i2$3.Router }], propDecorators: { appSkipLocation: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+const matModules = [
+    MatTable,
+    MatColumnDef, MatHeaderCellDef,
+    MatCheckbox, NgSwitch, MatCellDef, NgSwitchCase,
+    NgClass, DatePipe, InputComponent, ReactiveFormsModule, MatTooltip,
+    MatMenu, MatSlideToggle, MatMenuTrigger, MatMenuItem, MatSort, MatHeaderRowDef, MatHeaderRow, MatRow, MatRowDef,
+    MatHeaderCell, MatCell, CustomSearchableComponent
 ];
-class ApprovalsWorkflowComponent {
-    i18n;
-    sidenavService;
-    coreService;
-    toasterService;
-    section;
+class TableComponent {
+    dialog;
+    translateService;
+    fb;
+    matTableRef;
+    control = new FormControl(null);
+    serviceDetailForm;
+    columns;
+    isError = false;
+    isLoading = false;
+    customMessage;
+    columnsConfig;
+    loadData;
+    actions = [];
+    className = '';
+    totalElements = 0;
+    showPagination = false;
+    pageIndex = 0;
+    pageSize = 15;
+    sortDisabled = false;
+    useScroll = false;
+    serviceRowSelect = new EventEmitter();
+    selectPage = new EventEmitter();
+    rowClicked = new EventEmitter();
+    autoCompleteValueSelected = new EventEmitter();
+    selectValueSelected = new EventEmitter();
+    sortChanged = new EventEmitter();
+    inputCellChanged = new EventEmitter();
+    pageScroll = new EventEmitter();
+    toggleChanged = new EventEmitter();
+    eventClicked = new EventEmitter();
+    dataSource = new MatTableDataSource();
+    tableSort = new MatSort();
+    localControl = new FormControl();
+    lang = '';
+    spans = [];
+    ctrl = new FormControl();
+    Actions = Actions;
+    unSubscribe = new Subject;
+    hasPaginator = false;
+    currentPage = 0;
+    pageChange = new EventEmitter();
     form;
-    approvals = [];
-    loading = false;
-    destroyRef = inject(DestroyRef);
-    constructor(i18n, sidenavService, coreService, toasterService) {
-        this.i18n = i18n;
-        this.sidenavService = sidenavService;
-        this.coreService = coreService;
-        this.toasterService = toasterService;
-    }
-    getApprovals() {
-        if (this.isLoading()) {
-            return;
-        }
-        this.initializeApprovals();
-        this.coreService.perspectiveApproves(this.section.body.details).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(response => this.handleResponse(response), err => this.handleError(err));
+    constructor(dialog, translateService, fb) {
+        this.dialog = dialog;
+        this.translateService = translateService;
+        this.fb = fb;
     }
-    isLoading() {
-        return this.loading;
+    set keyWord(value) {
+        this.applyFilter(value);
     }
-    initializeApprovals() {
-        this.approvals = [];
-        this.loading = true;
+    ;
+    _rows;
+    get rows() {
+        return this._rows;
     }
-    handleResponse(response) {
-        this.loading = false;
-        if (response?.approvals) {
-            this.approvals = response.approvals.map(approval => this.createApprovalObject(approval));
-            this.showProspectiveApprovals();
-        }
+    set rows(value) {
+        this._rows = value;
+        this.dataSource = new MatTableDataSource(this.rows);
     }
-    createApprovalObject(approval) {
-        const stageDetails = this.getStageDetails(approval);
-        const status = stageDetails ? this.getClassBasedOnStatus(stageDetails.header.status) : '';
-        return {
-            id: 1,
-            name: approval.value,
-            title: approval.key,
-            image: `/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=${approval.key}`,
-            status,
-            statusLabel: status
-        };
+    ngOnInit() {
+        console.log(this.rows);
     }
-    getStageDetails(approval) {
-        return this.form.sections.find(stage => stage.id === `${(approval?.role)?.toLowerCase()}Approval`);
+    pageChanged(event) {
+        this.pageSize = event.pageSize;
+        this.currentPage = event.pageIndex;
+        this.pageChange.emit({ pageSize: this.pageSize, pageIndex: this.currentPage });
     }
-    handleError(err) {
-        this.loading = false;
-        err?.error?.meta?.messages?.forEach(msg => {
-            this.toasterService.error(msg.message);
-        });
+    ngAfterViewInit() {
+        // this.tableSort.disableClear = true;
+        // this.tableSort.disabled = this.sortDisabled;
+        this.dataSource.sort = this.tableSort;
+        //this.dataSource.paginator = this.paginator;
+        this.handleScroll();
     }
-    transformStatus(status) {
-        return status?.toLowerCase() || '';
+    applyFilter(keyWord) {
+        this.dataSource.filter = keyWord;
     }
-    getClassBasedOnStatus(status) {
-        const lowerStatus = this.transformStatus(status);
-        if (!status ||
-            warningStatusValues.includes(lowerStatus)) {
-            return 'success';
+    truncateName(text) {
+        if (text) {
+            let characters = text.match(/\b(\w)/g);
+            if (characters) {
+                return characters.join('');
+            }
+            else {
+                return '';
+            }
         }
-        if (dangerStatusValues.find(value => lowerStatus.includes(value))) {
-            return 'danger';
+        else {
+            return '';
+        }
+    }
+    sortChange(sortState) {
+        const data = this.dataSource.data.slice();
+        if (!sortState.active || sortState.direction === '') {
+            this.dataSource.data = data;
+            return;
+        }
+        this.sortChanged.emit(sortState);
+    }
+    mapText(path, source) {
+        return mapTo(path, source);
+    }
+    getSlaColor(min, max) {
+        const slaColor = min >= max ? Colors.RED : Colors.GREEN;
+        return slaColor;
+    }
+    clickRow(row) {
+        this.rowClicked.emit(row);
+    }
+    emitElement(row) {
+        this.eventClicked.emit(row);
+    }
+    toggleValueChange(e, element) {
+        this.toggleChanged.emit({ e, element });
+    }
+    ngOnDestroy() {
+        this.unSubscribe.next;
+        this.unSubscribe.complete();
+    }
+    parseInt(value) {
+        return parseInt(value);
+    }
+    handleScroll() {
+        fromEvent(this.matTableRef.nativeElement, Events.SCROLL)
+            .pipe(debounceTime(200))
+            .subscribe((e) => this.onTableScroll(e));
+    }
+    onTableScroll(e) {
+        const tableViewHeight = e.target.offsetHeight; // viewport: ~500px
+        const tableScrollHeight = e.target.scrollHeight; // length of all table
+        const scrollLocation = e.target.scrollTop; // how far user scrolled
+        const scrollDownLimit = tableScrollHeight - tableViewHeight;
+        const isScrollingVertically = e.target.scrollHeight > e.target.offsetHeight;
+        if (isScrollingVertically && (scrollLocation + 2) > scrollDownLimit) {
+            this.pageScroll.emit(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$4.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-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){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { 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: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: 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: "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: 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: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table', standalone: true, imports: [NgFor, TranslateModule, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-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){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$4.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
+                type: ViewChild,
+                args: ['table', { read: ElementRef }]
+            }], columns: [{
+                type: Input
+            }], isError: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], customMessage: [{
+                type: Input
+            }], columnsConfig: [{
+                type: Input
+            }], loadData: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], totalElements: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], sortDisabled: [{
+                type: Input
+            }], useScroll: [{
+                type: Input
+            }], serviceRowSelect: [{
+                type: Output
+            }], selectPage: [{
+                type: Output
+            }], rowClicked: [{
+                type: Output
+            }], autoCompleteValueSelected: [{
+                type: Output
+            }], selectValueSelected: [{
+                type: Output
+            }], sortChanged: [{
+                type: Output
+            }], inputCellChanged: [{
+                type: Output
+            }], pageScroll: [{
+                type: Output
+            }], toggleChanged: [{
+                type: Output
+            }], eventClicked: [{
+                type: Output
+            }], tableSort: [{
+                type: ViewChild,
+                args: ['tableSort']
+            }], hasPaginator: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], keyWord: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
+
+class ApprovalsComponent {
+    sidenavService;
+    i18n;
+    coreService;
+    constructor(sidenavService, i18n, coreService) {
+        this.sidenavService = sidenavService;
+        this.i18n = i18n;
+        this.coreService = coreService;
+    }
+    closeSidenav() {
+        this.sidenavService.publish('close', null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ApprovalsComponent, isStandalone: true, selector: "app-approvals", ngImport: i0, template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('approvalCycle') }}</h3>\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <div class=\"sidenav-body p-4\">\r\n    @if (coreService.approvals) {\r\n      <ds-approvals approvalsData=\"{{coreService.approvals}}\"></ds-approvals>\r\n    } @else {\r\n      <ds-message label=\"{{i18n.translate('NoData2')}}\"></ds-message>\r\n    }\r\n  </div>\r\n</section>\r\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-approvals', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [], template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('approvalCycle') }}</h3>\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <div class=\"sidenav-body p-4\">\r\n    @if (coreService.approvals) {\r\n      <ds-approvals approvalsData=\"{{coreService.approvals}}\"></ds-approvals>\r\n    } @else {\r\n      <ds-message label=\"{{i18n.translate('NoData2')}}\"></ds-message>\r\n    }\r\n  </div>\r\n</section>\r\n" }]
+        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }, { type: CoreService }] });
+
+const dangerStatusValues = [
+    FORM_STATUS_REJECTED,
+    FORM_STATUS_CANCELLED,
+    'deny',
+    'reject',
+    'unsatisfied',
+    'cancel'
+];
+const warningStatusValues = [
+    FORM_STATUS_PENDING,
+    'pending'
+];
+class ApprovalsWorkflowComponent {
+    i18n;
+    sidenavService;
+    coreService;
+    toasterService;
+    section;
+    form;
+    approvals = [];
+    loading = false;
+    destroyRef = inject(DestroyRef);
+    constructor(i18n, sidenavService, coreService, toasterService) {
+        this.i18n = i18n;
+        this.sidenavService = sidenavService;
+        this.coreService = coreService;
+        this.toasterService = toasterService;
+    }
+    getApprovals() {
+        if (this.isLoading()) {
+            return;
+        }
+        this.initializeApprovals();
+        this.coreService.perspectiveApproves(this.section.body.details).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(response => this.handleResponse(response), err => this.handleError(err));
+    }
+    isLoading() {
+        return this.loading;
+    }
+    initializeApprovals() {
+        this.approvals = [];
+        this.loading = true;
+    }
+    handleResponse(response) {
+        this.loading = false;
+        if (response?.approvals) {
+            this.approvals = response.approvals.map(approval => this.createApprovalObject(approval));
+            this.showProspectiveApprovals();
+        }
+    }
+    createApprovalObject(approval) {
+        const stageDetails = this.getStageDetails(approval);
+        const status = stageDetails ? this.getClassBasedOnStatus(stageDetails.header.status) : '';
+        return {
+            id: 1,
+            name: approval.value,
+            title: approval.key,
+            image: `/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=${approval.key}`,
+            status,
+            statusLabel: status
+        };
+    }
+    getStageDetails(approval) {
+        return this.form.sections.find(stage => stage.id === `${(approval?.role)?.toLowerCase()}Approval`);
+    }
+    handleError(err) {
+        this.loading = false;
+        err?.error?.meta?.messages?.forEach(msg => {
+            this.toasterService.error(msg.message);
+        });
+    }
+    transformStatus(status) {
+        return status?.toLowerCase() || '';
+    }
+    getClassBasedOnStatus(status) {
+        const lowerStatus = this.transformStatus(status);
+        if (!status ||
+            warningStatusValues.includes(lowerStatus)) {
+            return 'success';
+        }
+        if (dangerStatusValues.find(value => lowerStatus.includes(value))) {
+            return 'danger';
         }
         if (warningStatusValues.find(value => lowerStatus.includes(value))) {
             return 'warning';
@@ -5699,7 +5982,7 @@ class PreviousRequestsComponent {
         this.ngUnsubscribe.complete();
     }
     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: i2.ToastrService }, { token: CoreI18nService }, { token: i4.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 (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\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      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\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      }\r\n      @if (!previousRequests?.length) {\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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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 ɵ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 (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\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      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\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      }\r\n      @if (!previousRequests?.length && !loading) {\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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "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,
@@ -5715,7 +5998,7 @@ 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 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 (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\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      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\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      }\r\n      @if (!previousRequests?.length) {\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"] }]
+                    ], 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 (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\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      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\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      }\r\n      @if (!previousRequests?.length && !loading) {\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: i2.ToastrService }, { type: CoreI18nService }, { type: i4.FormBuilder }] });
 
 const StatusMap$1 = {
@@ -6211,7 +6494,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$2.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$2.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -6257,7 +6540,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\r\n    [expanded]=\"isExpanded || form?.sections?.length === 1\"\r\n    class=\"mb-3\"\r\n    hideToggle\r\n    #requestPanel=\"matExpansionPanel\"\r\n  >\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">\r\n        {{ i18n.translate(\"requestDetailsTitle\") }}\r\n      </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 rounded-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\r\n    [expanded]=\"isExpanded || form?.sections?.length === 1\"\r\n    class=\"mb-3\"\r\n    hideToggle\r\n    #requestPanel=\"matExpansionPanel\"\r\n  >\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">\r\n        {{ i18n.translate(\"requestDetailsTitle\") }}\r\n      </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 rounded-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$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
             type: Component,
@@ -6471,35 +6754,12 @@ class HeaderComponent {
             this.isSidenavOpened = val;
         });
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            console.log('xx', this.coreService.loggedInUserData);
-        }, 1000);
-    }
     toggleSideNav() {
         document.documentElement.classList.toggle('main-sidenav-opened');
         this.sidenavService.sideNavOpened.next(!this.isSidenavOpened);
     }
-    openDemandRequest() {
-        // this.sidenavService.publish('open', DemandRequestComponent, 'end', 'over');
-    }
-    openTicket() {
-        // this.sidenavService.publish('open', OpenTicketComponent, 'end', 'over');
-    }
-    openEService() {
-        // this.sidenavService.publish('open', VhrComponent, 'end', 'over');
-    }
-    // goToAdmin() {
-    //   this.router.navigate(['/admin']);
-    // }
-    openApp(url) {
-        window.open(url, '_blank')?.focus();
-    }
-    ngOnDestroy() {
-        // 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$3.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
@@ -6511,7 +6771,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$3.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -6653,13 +6913,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$3.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$3.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$3.Router }], propDecorators: { isOpened: [{
                 type: Input
             }], MenuTrigger: [{
                 type: ViewChild,
@@ -6719,7 +6979,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$3.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", hubContainerMini: "hubContainerMini", 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]=\"hubContainerMini ? '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: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.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: [{
@@ -6728,7 +6988,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$3.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ["sidenav", { static: true }]
             }], form: [{
@@ -6743,308 +7003,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
-function mapTo(path, source, allowUndefined = false, allowArrayWithSingleValue = false) {
-    let toBeReturned;
-    if (source) {
-        const attributes = path.split('.');
-        toBeReturned = source[attributes[0]];
-        for (let i = 1; i < attributes.length && toBeReturned != null; i++)
-            toBeReturned = toBeReturned[attributes[i]];
-    }
-    // Check if the value is a valid date
-    if (toBeReturned instanceof Date) {
-        return toBeReturned;
-    }
-    // Return null for undefined or missing date values
-    if (toBeReturned === undefined || toBeReturned === null) {
-        return allowUndefined ? toBeReturned : null;
-    }
-    // Return '-' for other missing values
-    let toReturn = toBeReturned || toBeReturned === 0 ? toBeReturned : '-';
-    // // to make sure that if the returned data is undefined, we will override it by -
-    // let toReturn = toBeReturned || toBeReturned === 0 ? toBeReturned : allowUndefined ? toBeReturned : '-';
-    if (Array.isArray(toReturn) && toReturn.length == 1 && !allowArrayWithSingleValue) {
-        toReturn = toReturn[0];
-    }
-    return toReturn;
-}
-
-var Colors;
-(function (Colors) {
-    Colors["RED"] = "#CA102F";
-    Colors["GREEN"] = "#02C389";
-})(Colors || (Colors = {}));
-
-var Events;
-(function (Events) {
-    Events["SCROLL"] = "scroll";
-    Events["ENTER"] = "enter";
-})(Events || (Events = {}));
-
-var Actions;
-(function (Actions) {
-    Actions["VIEW"] = "view";
-    Actions["COPY"] = "copy";
-    Actions["EDIT"] = "edit";
-    Actions["DELETE"] = "delete";
-    Actions["DELETEPENDING"] = "deletePendingContract";
-    Actions["CHART"] = "chart";
-    Actions["APPROVE"] = "approve";
-    Actions["REJECT"] = "reject";
-    Actions["DETAILS"] = "Details";
-    Actions["START"] = "Start";
-    Actions["PREPARE"] = "Prepare";
-    Actions["CUSTOMACTION"] = "customAction";
-    Actions["CUSTOMACTIONMANAGE"] = "customActionManage";
-    Actions["CUSTOMACTIONEXTEND"] = "customActionExtend";
-    Actions["CUSTOMACTIONDETAILS"] = "customActionDetails";
-    Actions["STATUS"] = "status";
-    Actions["ALLOCATE"] = "allocate";
-})(Actions || (Actions = {}));
-
-class SkipLocationDirective {
-    router;
-    appSkipLocation;
-    constructor(router) {
-        this.router = router;
-    }
-    onClick() {
-        this.router.navigate([this.appSkipLocation], { skipLocationChange: true });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkipLocationDirective, isStandalone: true, selector: "[appSkipLocation]", inputs: { appSkipLocation: "appSkipLocation" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[appSkipLocation]'
-                }]
-        }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { appSkipLocation: [{
-                type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-const matModules = [
-    MatTable,
-    MatColumnDef, MatHeaderCellDef,
-    MatCheckbox, NgSwitch, MatCellDef, NgSwitchCase,
-    NgClass, DatePipe, InputComponent, ReactiveFormsModule, MatTooltip,
-    MatMenu, MatSlideToggle, MatMenuTrigger, MatMenuItem, MatSort, MatHeaderRowDef, MatHeaderRow, MatRow, MatRowDef,
-    MatHeaderCell, MatCell, CustomSearchableComponent
-];
-class TableComponent {
-    dialog;
-    translateService;
-    fb;
-    matTableRef;
-    control = new FormControl(null);
-    serviceDetailForm;
-    columns;
-    isError = false;
-    isLoading = false;
-    customMessage;
-    columnsConfig;
-    loadData;
-    actions = [];
-    className = '';
-    totalElements = 0;
-    showPagination = false;
-    pageIndex = 0;
-    pageSize = 15;
-    sortDisabled = false;
-    useScroll = false;
-    serviceRowSelect = new EventEmitter();
-    selectPage = new EventEmitter();
-    rowClicked = new EventEmitter();
-    autoCompleteValueSelected = new EventEmitter();
-    selectValueSelected = new EventEmitter();
-    sortChanged = new EventEmitter();
-    inputCellChanged = new EventEmitter();
-    pageScroll = new EventEmitter();
-    toggleChanged = new EventEmitter();
-    eventClicked = new EventEmitter();
-    dataSource = new MatTableDataSource();
-    tableSort = new MatSort();
-    localControl = new FormControl();
-    lang = '';
-    spans = [];
-    ctrl = new FormControl();
-    Actions = Actions;
-    unSubscribe = new Subject;
-    hasPaginator = false;
-    currentPage = 0;
-    pageChange = new EventEmitter();
-    form;
-    constructor(dialog, translateService, fb) {
-        this.dialog = dialog;
-        this.translateService = translateService;
-        this.fb = fb;
-    }
-    set keyWord(value) {
-        this.applyFilter(value);
-    }
-    ;
-    _rows;
-    get rows() {
-        return this._rows;
-    }
-    set rows(value) {
-        this._rows = value;
-        this.dataSource = new MatTableDataSource(this.rows);
-    }
-    ngOnInit() {
-        console.log(this.rows);
-    }
-    pageChanged(event) {
-        this.pageSize = event.pageSize;
-        this.currentPage = event.pageIndex;
-        this.pageChange.emit({ pageSize: this.pageSize, pageIndex: this.currentPage });
-    }
-    ngAfterViewInit() {
-        // this.tableSort.disableClear = true;
-        // this.tableSort.disabled = this.sortDisabled;
-        this.dataSource.sort = this.tableSort;
-        //this.dataSource.paginator = this.paginator;
-        this.handleScroll();
-    }
-    applyFilter(keyWord) {
-        this.dataSource.filter = keyWord;
-    }
-    truncateName(text) {
-        if (text) {
-            let characters = text.match(/\b(\w)/g);
-            if (characters) {
-                return characters.join('');
-            }
-            else {
-                return '';
-            }
-        }
-        else {
-            return '';
-        }
-    }
-    sortChange(sortState) {
-        const data = this.dataSource.data.slice();
-        if (!sortState.active || sortState.direction === '') {
-            this.dataSource.data = data;
-            return;
-        }
-        this.sortChanged.emit(sortState);
-    }
-    mapText(path, source) {
-        return mapTo(path, source);
-    }
-    getSlaColor(min, max) {
-        const slaColor = min >= max ? Colors.RED : Colors.GREEN;
-        return slaColor;
-    }
-    clickRow(row) {
-        this.rowClicked.emit(row);
-    }
-    emitElement(row) {
-        this.eventClicked.emit(row);
-    }
-    toggleValueChange(e, element) {
-        this.toggleChanged.emit({ e, element });
-    }
-    ngOnDestroy() {
-        this.unSubscribe.next;
-        this.unSubscribe.complete();
-    }
-    parseInt(value) {
-        return parseInt(value);
-    }
-    handleScroll() {
-        fromEvent(this.matTableRef.nativeElement, Events.SCROLL)
-            .pipe(debounceTime(200))
-            .subscribe((e) => this.onTableScroll(e));
-    }
-    onTableScroll(e) {
-        const tableViewHeight = e.target.offsetHeight; // viewport: ~500px
-        const tableScrollHeight = e.target.scrollHeight; // length of all table
-        const scrollLocation = e.target.scrollTop; // how far user scrolled
-        const scrollDownLimit = tableScrollHeight - tableViewHeight;
-        const isScrollingVertically = e.target.scrollHeight > e.target.offsetHeight;
-        if (isScrollingVertically && (scrollLocation + 2) > scrollDownLimit) {
-            this.pageScroll.emit(true);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$5.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-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){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$5.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { 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: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: 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: "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: 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: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-table', standalone: true, imports: [NgFor, TranslateModule, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-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){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$5.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
-                type: ViewChild,
-                args: ['table', { read: ElementRef }]
-            }], columns: [{
-                type: Input
-            }], isError: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], customMessage: [{
-                type: Input
-            }], columnsConfig: [{
-                type: Input
-            }], loadData: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], totalElements: [{
-                type: Input
-            }], showPagination: [{
-                type: Input
-            }], pageIndex: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], sortDisabled: [{
-                type: Input
-            }], useScroll: [{
-                type: Input
-            }], serviceRowSelect: [{
-                type: Output
-            }], selectPage: [{
-                type: Output
-            }], rowClicked: [{
-                type: Output
-            }], autoCompleteValueSelected: [{
-                type: Output
-            }], selectValueSelected: [{
-                type: Output
-            }], sortChanged: [{
-                type: Output
-            }], inputCellChanged: [{
-                type: Output
-            }], pageScroll: [{
-                type: Output
-            }], toggleChanged: [{
-                type: Output
-            }], eventClicked: [{
-                type: Output
-            }], tableSort: [{
-                type: ViewChild,
-                args: ['tableSort']
-            }], hasPaginator: [{
-                type: Input
-            }], currentPage: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }], keyWord: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
-
 // import { TranslatePipe } from '../../pipes/translate.pipe';
 class RequestDetailsSectionComponent {
     i18n;
@@ -7347,6 +7305,11 @@ class RequestDetailsSectionComponent {
             attachment: new FormControl(null, Validators.required),
             attachmentSection: new FormControl([], Validators.required),
         });
+        this.lov?.['decision']?.options?.forEach(option => {
+            let isActionValid = this.checkValidity(option.value);
+            this.actionStateService.setActionValid(option.value, isActionValid);
+            console.log(isActionValid);
+        });
         //   this.formGroup = this.fb.group({
         //     input: new FormControl(null),
         //     currencyInput: new FormControl(null),
@@ -7368,6 +7331,13 @@ class RequestDetailsSectionComponent {
         this.formGroup.setValue(this.section.body.details);
         //   console.log(this.section.body.detils);
         //   console.log(this.lov?.['approverActions']?.options)
+        this.formGroup.valueChanges.subscribe(value => {
+            this.lov?.['decision']?.options?.forEach(option => {
+                let isActionValid = this.checkValidity(option.value);
+                this.actionStateService.setActionValid(option.value, isActionValid);
+                console.log(isActionValid);
+            });
+        });
     }
     //   this.formGroup.valueChanges.subscribe(value => {
     //     this.lov?.['decision']?.options?.forEach(option => {
@@ -7434,6 +7404,8 @@ class RequestDetailsSectionComponent {
                 return this.formGroup.valid;
             case 'SENDBACK':
                 return this.formGroup.valid;
+            case 'SAVE_CHANGES':
+                return true;
             default:
                 return false;
         }
@@ -7449,7 +7421,7 @@ class RequestDetailsSectionComponent {
         this.pageSize = event.pageSize;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n  <app-search-employee class=\"section-item full\" [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" label=\"Search-employee\"></app-search-employee>\r\n  <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n  <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n  <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n  <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n  <app-custom-searchable class=\"section-item mb-0 full\" [isReadOnly]=\"isReadOnly\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n  <app-checkbox class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"checkbox\" termsLabel=\"Terms and conditions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n  <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n  <app-datepicker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n  <app-date-range-picker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [matSuffix]=\"true\"></app-date-range-picker>\r\n  <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n  <app-toggle-button class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n  <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n  <app-file-uploader class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [multiple]=\"false\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n  <app-attachment-section class=\"section-item full\" [descriptionRequired]=\"true\" label=\"Attachment section\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n\r\n<!-- <app-table\r\n[columnsConfig]=\"columnsConfig\"\r\n[columns]=\"columns\"\r\n[isError]=\"isError\"\r\n[isLoading]=\"isLoading\"\r\n[rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n[pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n[totalElements]=\"totalElements\"\r\n(pageChange)=\"pageChanged($event)\"\r\nclass=\"new-primary-table full\">\r\n</app-table> -->\r\n\r\n\r\n\r\n</form>\r\n\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n<div class=\"mt-4\">\r\n  <lib-action-buttons\r\n    [lovOptions]=\"lov?.['decision']?.options\"\r\n    [lovType]=\"lov?.['decision']?.type\"\r\n    [section]=\"section\"\r\n    [form]=\"form\"\r\n    [sections]=\"form.sections\"\r\n    [showApprovalCycle]=\"true\"\r\n    [customCall]=\"false\"\r\n    [fieldsForm]=\"formGroup\"\r\n    (customCallEmit)=\"customCallSubmit($event)\"\r\n    (resetFormEmit)=\"resetForm()\"\r\n  />\r\n</div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["emitedValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "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,
@@ -7474,7 +7446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         AttachmentSectionComponent,
                         TableComponent,
                         TranslatePipe
-                    ], template: "<div>\r\n<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n  <app-search-employee class=\"section-item full\" [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" label=\"Search-employee\"></app-search-employee>\r\n  <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n  <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n  <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n  <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n  <app-custom-searchable class=\"section-item mb-0 full\" [isReadOnly]=\"isReadOnly\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n  <app-checkbox class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"checkbox\" termsLabel=\"Terms and conditions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n  <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n  <app-datepicker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n  <app-date-range-picker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [matSuffix]=\"true\"></app-date-range-picker>\r\n  <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n  <app-toggle-button class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n  <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n  <app-file-uploader class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [multiple]=\"false\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n  <app-attachment-section class=\"section-item full\" [descriptionRequired]=\"true\" label=\"Attachment section\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n\r\n<!-- <app-table\r\n[columnsConfig]=\"columnsConfig\"\r\n[columns]=\"columns\"\r\n[isError]=\"isError\"\r\n[isLoading]=\"isLoading\"\r\n[rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n[pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n[totalElements]=\"totalElements\"\r\n(pageChange)=\"pageChanged($event)\"\r\nclass=\"new-primary-table full\">\r\n</app-table> -->\r\n\r\n\r\n\r\n</form>\r\n\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n<div class=\"mt-4\">\r\n  <lib-action-buttons\r\n    [lovOptions]=\"lov?.['decision']?.options\"\r\n    [lovType]=\"lov?.['decision']?.type\"\r\n    [section]=\"section\"\r\n    [form]=\"form\"\r\n    [sections]=\"form.sections\"\r\n    [showApprovalCycle]=\"true\"\r\n    [customCall]=\"false\"\r\n    [fieldsForm]=\"formGroup\"\r\n    (customCallEmit)=\"customCallSubmit($event)\"\r\n    (resetFormEmit)=\"resetForm()\"\r\n  />\r\n</div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
+                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{
@@ -7707,7 +7679,7 @@ class CoreAppComponent {
             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$4.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$3.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CoreAppComponent, isStandalone: true, selector: "lib-app", providers: [
             { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
         ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
@@ -7728,7 +7700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$4.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }, { type: undefined, decorators: [{
+                }] }, { type: i2$3.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -8061,5 +8033,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormValidation, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, 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, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, 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