bpm-core 0.0.114 → 0.0.116

package/fesm2022/bpm-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, HostListener, ViewChild, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, HostListener, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import { Subject, BehaviorSubject, ReplaySubject, catchError, throwError, switchMap, from, fromEvent, debounceTime } from 'rxjs';
@@ -32,7 +32,8 @@ import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModu
 import { NgxMaskDirective } from 'ngx-mask';
 import * as i2$2 from 'ngx-intl-tel-input-gg';
 import { CountryISO, SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input-gg';
-import { MatSelect, MatOption as MatOption$1, MatLabel, MatError as MatError$1, MatFormField as MatFormField$1 } from '@angular/material/select';
+import * as i2$4 from '@angular/material/select';
+import { MatSelect, MatOption as MatOption$1, MatLabel, MatError as MatError$1, MatFormField as MatFormField$1, MatSelectModule } from '@angular/material/select';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i6$1 from '@angular/material/button-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -40,7 +41,7 @@ import * as i2$3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
 import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i2$4 from '@angular/router';
+import * as i2$5 from '@angular/router';
 import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatButton } from '@angular/material/button';
 import * as i4$1 from '@angular/material/menu';
@@ -52,9 +53,9 @@ import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
 import { MatSort } from '@angular/material/sort';
-import * as i2$5 from '@ngx-translate/core';
+import * as i2$6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2$6 from '@angular/material/expansion';
+import * as i2$7 from '@angular/material/expansion';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
 import * as i3$1 from 'ng-dynamic-component';
@@ -1841,6 +1842,7 @@ class ControlValueAccessorDirective {
         this.isDisabled = isDisabled;
     }
     setValue(value) {
+        this.value = value;
         this.onChangeFn(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1968,7 +1970,7 @@ class FormLabelComponent {
         this.i18n = i18n;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormLabelComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormLabelComponent, isStandalone: true, selector: "app-form-label", inputs: { tooltip: "tooltip", label: "label", optional: "optional" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n  <div class=\"d-flex\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    @if(tooltip) {\r\n      <span class=\"form-label mb-0 mx-1\">\r\n        <ds-icon\r\n          icon=\"info fs-18\"\r\n          class=\"cursor-pointer\"\r\n          [satPopoverAnchor]=\"popover\"\r\n          (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n        ></ds-icon>\r\n      </span>\r\n    }\r\n  </div>\r\n  <span *ngIf=\"optional\" class=\"optional-input\">\r\n    {{ 'optional' | translate }}\r\n  </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormLabelComponent, isStandalone: true, selector: "app-form-label", inputs: { tooltip: "tooltip", label: "label", optional: "optional" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n  <div class=\"d-flex\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    @if(tooltip) {\r\n      <span class=\"form-label mb-0 mx-1\">\r\n        <ds-icon\r\n          icon=\"info fs-18\"\r\n          class=\"cursor-pointer\"\r\n          [satPopoverAnchor]=\"popover\"\r\n          (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n        ></ds-icon>\r\n      </span>\r\n    }\r\n  </div>\r\n  <span *ngIf=\"optional\" class=\"optional-input\">\r\n    {{ 'optional' | translate }}\r\n  </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-12 signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormLabelComponent, decorators: [{
             type: Component,
@@ -1976,7 +1978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         NgIf,
                         SatPopoverModule,
                         TranslatePipe
-                    ], standalone: true, template: "<div class=\"d-flex justify-content-between\">\r\n  <div class=\"d-flex\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    @if(tooltip) {\r\n      <span class=\"form-label mb-0 mx-1\">\r\n        <ds-icon\r\n          icon=\"info fs-18\"\r\n          class=\"cursor-pointer\"\r\n          [satPopoverAnchor]=\"popover\"\r\n          (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n        ></ds-icon>\r\n      </span>\r\n    }\r\n  </div>\r\n  <span *ngIf=\"optional\" class=\"optional-input\">\r\n    {{ 'optional' | translate }}\r\n  </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>" }]
+                    ], standalone: true, template: "<div class=\"d-flex justify-content-between\">\r\n  <div class=\"d-flex\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    @if(tooltip) {\r\n      <span class=\"form-label mb-0 mx-1\">\r\n        <ds-icon\r\n          icon=\"info fs-18\"\r\n          class=\"cursor-pointer\"\r\n          [satPopoverAnchor]=\"popover\"\r\n          (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n        ></ds-icon>\r\n      </span>\r\n    }\r\n  </div>\r\n  <span *ngIf=\"optional\" class=\"optional-input\">\r\n    {{ 'optional' | translate }}\r\n  </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-12 signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>" }]
         }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { tooltip: [{
                 type: Input
             }], label: [{
@@ -2308,6 +2310,9 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
     valueChange(event) {
         const checked = event.checked;
         this.control.setValue(checked.toString());
+        if (!this.control.touched) {
+            this.control.markAsTouched();
+        }
     }
     openTermsPopup() {
         const dialogRef = this.dialog.open(TermsConditionsComponent, {
@@ -2325,7 +2330,7 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => CheckBoxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n  [ngClass]=\"{'mx-3': isReadOnly}\"\r\n  class=\"my-3\"\r\n  [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\r\n  id=\"{{ name }}{{ randomID }}\"\r\n  [name]=\"name\"\r\n  (change)=\"valueChange($event)\"\r\n  [checked]=\"control.value === 'true' ? true : false\">\r\n\r\n  <div class=\"d-flex pt-1\">\r\n    @if(label){\r\n      <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    @if(containTerms) {\r\n      <span\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n        (click)=\"openTermsPopup(); false\">\r\n        {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n      </span>\r\n    }\r\n  </div>\r\n\r\n  @if(link) {\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\"\r\n        href=\"{{ hrefLink }}\"\r\n        target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n  }\r\n</mat-checkbox>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.mat-mdc-checkbox.mat-accent .mdc-form-field>label{margin:0}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}.mat-mdc-checkbox label{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n  [ngClass]=\"{'mx-3': isReadOnly}\"\r\n  class=\"mt-3 mb-1\"\r\n  [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\r\n  id=\"{{ name }}{{ randomID }}\"\r\n  [name]=\"name\"\r\n  (change)=\"valueChange($event)\"\r\n  [checked]=\"control.value === 'true' ? true : false\">\r\n\r\n  <div class=\"d-flex pt-1\">\r\n    @if(label){\r\n      <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    @if(containTerms) {\r\n      <span\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n        (click)=\"openTermsPopup(); false\">\r\n        {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n      </span>\r\n    }\r\n  </div>\r\n\r\n  @if(link) {\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\"\r\n        href=\"{{ hrefLink }}\"\r\n        target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n  }\r\n</mat-checkbox>\r\n<div>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n</div>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.mat-mdc-checkbox.mat-accent .mdc-form-field>label{margin:0}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}.mat-mdc-checkbox label{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -2339,7 +2344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => CheckBoxComponent),
                             multi: true,
                         },
-                    ], template: "<mat-checkbox\r\n  [ngClass]=\"{'mx-3': isReadOnly}\"\r\n  class=\"my-3\"\r\n  [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\r\n  id=\"{{ name }}{{ randomID }}\"\r\n  [name]=\"name\"\r\n  (change)=\"valueChange($event)\"\r\n  [checked]=\"control.value === 'true' ? true : false\">\r\n\r\n  <div class=\"d-flex pt-1\">\r\n    @if(label){\r\n      <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    @if(containTerms) {\r\n      <span\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n        (click)=\"openTermsPopup(); false\">\r\n        {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n      </span>\r\n    }\r\n  </div>\r\n\r\n  @if(link) {\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\"\r\n        href=\"{{ hrefLink }}\"\r\n        target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n  }\r\n</mat-checkbox>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.mat-mdc-checkbox.mat-accent .mdc-form-field>label{margin:0}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}.mat-mdc-checkbox label{cursor:pointer}\n"] }]
+                    ], template: "<mat-checkbox\r\n  [ngClass]=\"{'mx-3': isReadOnly}\"\r\n  class=\"mt-3 mb-1\"\r\n  [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\r\n  id=\"{{ name }}{{ randomID }}\"\r\n  [name]=\"name\"\r\n  (change)=\"valueChange($event)\"\r\n  [checked]=\"control.value === 'true' ? true : false\">\r\n\r\n  <div class=\"d-flex pt-1\">\r\n    @if(label){\r\n      <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    @if(containTerms) {\r\n      <span\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n        (click)=\"openTermsPopup(); false\">\r\n        {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n      </span>\r\n    }\r\n  </div>\r\n\r\n  @if(link) {\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a\r\n        class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\"\r\n        href=\"{{ hrefLink }}\"\r\n        target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n  }\r\n</mat-checkbox>\r\n<div>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n</div>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.mat-mdc-checkbox.mat-accent .mdc-form-field>label{margin:0}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}.mat-mdc-checkbox label{cursor:pointer}\n"] }]
         }], propDecorators: { containTerms: [{
                 type: Input
             }], termsLabel: [{
@@ -4787,6 +4792,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Multi-select dropdown component for selecting multiple options.
+ *
+ * Supports both Reactive Forms and Template-driven forms.
+ *
+ * Inputs:
+ * - `options`: Accepts an array of objects used as the selection list.
+ * - `displayedLabel`: Property name from the option object to display in the UI (default: `'description'`).
+ * - `key`: Property name from the option object used as the value (default: `'value'`).
+ * - `label`: Defines the label text shown above the multi-select field.
+ * - `placeholder`: Sets the placeholder text when no value is selected.
+ * - `isReadOnly`: Disables interaction and renders the component in a read-only display mode.
+ * - `mandatory`: Hides the "optional" label visually. Does not add validation.
+ * - `required`: Hides the "optional" label and also adds Angular's required validator.
+ * - `tooltip`: Displays a tooltip beside the label.
+ * - `loading`: Shows a loading spinner inside the dropdown when set to true.
+ * - `customErrorMessages`: Custom messages for validation errors.
+ *
+ * Emits:
+ * - The selected value is emitted as an array of objects:
+ *   ```ts
+ *   [{ key: option[key], value: option[displayedLabel] }, ...]
+ *   ```
+ *
+ * Example usage:
+ * ```html
+ * <app-multiselect
+ *   class="section-item"
+ *   formControlName="multi"
+ *   [options]="[]"
+ *   label="Multi select"
+ *   placeholder="Select from here"
+ *   [isReadOnly]="false"
+ *   [mandatory]="true"
+ * >
+ * </app-multiselect>
+ * ```
+ */
+class MultiselectComponent extends ControlValueAccessorDirective {
+    options = [];
+    displayedLabel = 'description';
+    key = 'value';
+    cdRef = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.isReadOnly) {
+            this.actionStateService.resetAction$
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(res => {
+                if (this.control.enabled) {
+                    this.control.reset();
+                }
+            });
+            if (this.control?.valueChanges) {
+                this.control.valueChanges
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this.cdRef.markForCheck());
+            }
+        }
+    }
+    selectionChange(event) {
+        const selectedOptions = event.source.options.filter(op => op.selected).map(op => ({ key: op.value, value: op.viewValue }));
+        this.setValue(selectedOptions);
+        if (!this.control.touched)
+            this.control.markAsTouched();
+        this.cdRef.markForCheck();
+    }
+    mapKeyValuePairsToKeys(value) {
+        if (!value)
+            return [];
+        return value.map(item => item.key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MultiselectComponent, isStandalone: true, selector: "app-multiselect", inputs: { options: "options", displayedLabel: "displayedLabel", key: "key" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiselectComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"multipleSelect\"\r\n  ></app-info-item>\r\n} @else {\r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <mat-select \r\n      (selectionChange)=\"selectionChange($event)\" \r\n      [value]=\"mapKeyValuePairsToKeys(value)\" \r\n      multiple \r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n    >\r\n      <mat-select-trigger>\r\n        {{value?.[0]?.value || ''}}\r\n        @if (value?.length > 1) {\r\n          <span class=\"additional-selection\">\r\n            (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n          </span>\r\n        }\r\n      </mat-select-trigger>\r\n      @for (item of options; track item) {\r\n        <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (loading) {\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-multiselect', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        FormLabelComponent,
+                        InfoItemComponent,
+                        ValidationErrorsComponent,
+                        TranslatePipe
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiselectComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"multipleSelect\"\r\n  ></app-info-item>\r\n} @else {\r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <mat-select \r\n      (selectionChange)=\"selectionChange($event)\" \r\n      [value]=\"mapKeyValuePairsToKeys(value)\" \r\n      multiple \r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n    >\r\n      <mat-select-trigger>\r\n        {{value?.[0]?.value || ''}}\r\n        @if (value?.length > 1) {\r\n          <span class=\"additional-selection\">\r\n            (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n          </span>\r\n        }\r\n      </mat-select-trigger>\r\n      @for (item of options; track item) {\r\n        <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (loading) {\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], displayedLabel: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }] } });
+
 function mapTo(path, source, allowUndefined = false, allowArrayWithSingleValue = false) {
     let toBeReturned;
     if (source) {
@@ -4856,7 +4968,7 @@ class SkipLocationDirective {
     onClick() {
         this.router.navigate([this.appSkipLocation], { skipLocationChange: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$5.Router }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkipLocationDirective, isStandalone: true, selector: "[appSkipLocation]", inputs: { appSkipLocation: "appSkipLocation" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkipLocationDirective, decorators: [{
@@ -4865,7 +4977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     standalone: true,
                     selector: '[appSkipLocation]'
                 }]
-        }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { appSkipLocation: [{
+        }], ctorParameters: () => [{ type: i2$5.Router }], propDecorators: { appSkipLocation: [{
                 type: Input
             }], onClick: [{
                 type: HostListener,
@@ -5021,13 +5133,13 @@ class TableComponent {
             this.pageScroll.emit(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", 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 #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\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 [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && 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 *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\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                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\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 *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\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 *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @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 *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\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 *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\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 *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\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 *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\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 *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\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 *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\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 (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\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 class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\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 *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></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 fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\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                                        {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\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 #descConditionalMenu=\"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\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\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                                            {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\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 *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\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 *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\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\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\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\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\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 *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\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\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\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\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </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 *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\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                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></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 class=\"fc-coral fs-15\" icon=\"trash\"></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 class=\"fc-coral fs-15\" icon=\"trash\"></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 class=\"fc-coral fs-15\" icon=\"chart-o\"></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 *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\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 class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></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 class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></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 class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\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 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=\"\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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\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 class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </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                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\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 (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></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 [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </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", "aria-expanded", "aria-controls", "aria-owns", "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"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$6.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\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 [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && 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 *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\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                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\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 *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\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 *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @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 *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\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 *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\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 *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\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 *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\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 *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\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 *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\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 (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\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 class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\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 *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></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 fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\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                                        {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\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 #descConditionalMenu=\"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\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\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                                            {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\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 *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\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 *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\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\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\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\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\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 *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\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\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\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\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </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 *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\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                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></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 class=\"fc-coral fs-15\" icon=\"trash\"></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 class=\"fc-coral fs-15\" icon=\"trash\"></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 class=\"fc-coral fs-15\" icon=\"chart-o\"></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 *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\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 class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></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 class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></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 class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\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 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=\"\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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\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 class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </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                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\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 (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></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 [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </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$6.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", "aria-expanded", "aria-controls", "aria-owns", "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"] }, { 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: "19.2.1", 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 #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\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 [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && 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 *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\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                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\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 *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\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 *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @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 *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\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 *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\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 *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\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 *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\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 *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\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 *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\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 (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\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 class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\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 *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></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 fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\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                                        {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\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 #descConditionalMenu=\"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\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\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                                            {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\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 *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\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 *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\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\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\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\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\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 *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\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\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\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\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </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 *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\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                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></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 class=\"fc-coral fs-15\" icon=\"trash\"></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 class=\"fc-coral fs-15\" icon=\"trash\"></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 class=\"fc-coral fs-15\" icon=\"chart-o\"></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 *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\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 class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></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 class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></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 class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\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 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=\"\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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\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 class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\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 class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </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                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\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 (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></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 [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </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: [{
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$6.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
                 type: ViewChild,
                 args: ['table', { read: ElementRef }]
             }], columns: [{
@@ -6744,7 +6856,7 @@ class FormSectionComponent {
         return statusStrategy.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -6790,7 +6902,7 @@ class MainRequestDetailsComponent {
         return this.section?.body?.details?.['expandStage'] === 'true';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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$6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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$7.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
             type: Component,
@@ -7009,7 +7121,7 @@ class HeaderComponent {
         this.sidenavService.sideNavOpened.next(!this.isSidenavOpened);
     }
     location = location;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$5.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.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: "19.2.1", ngImport: i0, type: HeaderComponent, decorators: [{
@@ -7021,7 +7133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         MatMenuModule,
                         MatToolbarModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$4.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$5.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -7163,13 +7275,13 @@ class SideNavComponent {
         }
         this.router.navigate([url]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$5.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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$2.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: "19.2.1", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-side-nav', standalone: true, imports: [RouterLinkActive, RouterLink, MatTooltipModule, MatMenu, MatMenuTrigger], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$4.Router }], propDecorators: { isOpened: [{
+        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$5.Router }], propDecorators: { isOpened: [{
                 type: Input
             }], MenuTrigger: [{
                 type: ViewChild,
@@ -7229,7 +7341,7 @@ class LayoutComponent {
     closeSideNav() {
         this.sidenav.close().then(r => { });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$5.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutComponent, decorators: [{
@@ -7238,7 +7350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$4.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
+                }] }, { type: i2$5.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ["sidenav", { static: true }]
             }], form: [{
@@ -7457,6 +7569,12 @@ class RequestDetailsSectionComponent {
             "__typename": "AllAssetsDto"
         }
     ];
+    multiData = [
+        { description: 'One', value: '1' },
+        { description: 'Two', value: '2' },
+        { description: 'Three', value: '3' },
+        { description: 'Four', value: '4' },
+    ];
     totalElements = 6;
     constructor(i18n, fb, actionStateService) {
         this.i18n = i18n;
@@ -7464,13 +7582,15 @@ class RequestDetailsSectionComponent {
         this.actionStateService = actionStateService;
     }
     ngOnInit() {
+        // Simulate loading categories
+        this.loadCategories();
         this.createForm();
         let data = this.section.body.details;
-        // for (const key in data) {
-        //   if (key !== 'decision') {
-        //     this.formGroup.patchValue({[key]: data[key]});
-        //   }
-        // }
+        for (const key in data) {
+            if (key !== 'decision') {
+                this.formGroup.patchValue({ [key]: data[key] });
+            }
+        }
         // this.initializeTableConfig()
         /*    this.formGroup.get('checkbox').valueChanges.subscribe(res=> {
               if (res){
@@ -7548,13 +7668,16 @@ class RequestDetailsSectionComponent {
             newForm[option.value] = [''];
         });
         this.formGroup = this.fb.group({
-            // input: new FormControl(null),
+            multi: new FormControl({
+                value: [{ key: '1', value: 'One' }, { key: '2', value: 'Two' }],
+                disabled: true
+            }, Validators.required),
             // currencyInput: new FormControl(null, Validators.required),
             // emailInput: new FormControl({value: null, disabled: true}, Validators.required),
             // numberInput: new FormControl(null, Validators.required),
-            customSearchable: new FormControl(null, Validators.required),
+            // customSearchable: new FormControl(null, Validators.required),
             // checkbox: new FormControl(null, [Validators.requiredTrue, Validators.required]),
-            // textArea: new FormControl('defaultText', [Validators.required, Validators.maxLength(5)]),
+            // textArea: new FormControl(null, [Validators.required, Validators.maxLength(5)]),
             // datePicker: new FormControl(null, Validators.required),
             // datePickerRange: new FormControl(null, Validators.required),
             // radio: new FormControl(null, Validators.required),
@@ -7563,7 +7686,7 @@ class RequestDetailsSectionComponent {
             // searchEmployee: new FormControl(null, Validators.required),
             // // ...newForm,
             // attachment: new FormControl(null, Validators.required),
-            // attachmentSection: new FormControl([], Validators.required),
+            attachmentSection: new FormControl([], Validators.required),
         });
         /*    if(this.lov?.['decision']?.options?.length){
         
@@ -7597,12 +7720,11 @@ class RequestDetailsSectionComponent {
         //   console.log(this.section.body.detils);
         //   console.log(this.lov?.['approverActions']?.options)
         this.formGroup.valueChanges.subscribe(value => {
-            console.log(value.textArea);
-            // this.lov?.['decision']?.options?.forEach(option => {
-            //   let isActionValid = this.checkValidity(option.value);
-            //   this.actionStateService.setActionValid(option.value, isActionValid);
-            //   this.section.body.details = {...this.section.body.details, ...this.formGroup.value};
-            // })
+            this.lov?.['decision']?.options?.forEach(option => {
+                let isActionValid = this.checkValidity(option.value);
+                this.actionStateService.setActionValid(option.value, isActionValid);
+                this.section.body.details = { ...this.section.body.details, ...this.formGroup.value };
+            });
         });
     }
     //   this.formGroup.valueChanges.subscribe(value => {
@@ -7642,7 +7764,6 @@ class RequestDetailsSectionComponent {
     //   this.formGroup.setValue(this.section.body.details);
     //   console.log('customCallSubmit', this.formGroup.value)
     // }
-    textArea = 'testtt';
     editAsset(asset) {
         console.log(asset);
     }
@@ -7658,7 +7779,6 @@ class RequestDetailsSectionComponent {
     deleteAsset(asset) {
         console.log(asset);
     }
-    log(d) { console.log(d); }
     formValue(form) {
         console.log(form.value);
     }
@@ -7682,14 +7802,79 @@ class RequestDetailsSectionComponent {
         console.log('customCallSubmit', action);
     }
     resetForm() {
-        this.actionStateService.resetAction$.next();
+        // this.actionStateService.resetAction$.next();
+        this.formGroup.reset();
     }
+    multi = [{ key: '3', value: 'Three' }];
     pageChanged(event) {
         this.pageNumber = event.pageIndex;
         this.pageSize = event.pageSize;
     }
+    // Form Controls
+    countryControl = new FormControl();
+    skillsControl = new FormControl([]);
+    stateControl = new FormControl();
+    categoryControl = new FormControl();
+    priorityControl = new FormControl();
+    selectedCountry = '';
+    isLoadingCategories = false;
+    // Option Data Structures
+    countryOptions = {
+        options: [
+            { value: 'us', description: 'United States' },
+            { value: 'ca', description: 'Canada' },
+            { value: 'uk', description: 'United Kingdom' }
+        ]
+    };
+    skillsOptions = {
+        options: [
+            { value: 'angular', description: 'Angular' },
+            { value: 'react', description: 'React' },
+            { value: 'vue', description: 'Vue.js' },
+            { value: 'node', description: 'Node.js' }
+        ]
+    };
+    stateOptions = {
+        options: [
+            { value: 'ca', description: 'California', parentValue: 'us' },
+            { value: 'ny', description: 'New York', parentValue: 'us' },
+            { value: 'on', description: 'Ontario', parentValue: 'ca' },
+            { value: 'bc', description: 'British Columbia', parentValue: 'ca' }
+        ]
+    };
+    priorityOptions = {
+        options: [
+            { value: 'low', description: 'Low Priority' },
+            { value: 'medium', description: 'Medium Priority' },
+            { value: 'high', description: 'High Priority' }
+        ]
+    };
+    categoryOptions = {
+        options: []
+    };
+    onCountrySelected(event) {
+        this.selectedCountry = event.value;
+        this.stateControl.reset(); // Reset state when country changes
+    }
+    onSkillsSelected(values) {
+        console.log('Selected skills:', values);
+    }
+    loadCategories() {
+        this.isLoadingCategories = true;
+        // Simulate API call
+        setTimeout(() => {
+            this.categoryOptions = {
+                options: [
+                    { value: 'tech', description: 'Technology' },
+                    { value: 'business', description: 'Business' },
+                    { value: 'design', description: 'Design' }
+                ]
+            };
+            this.isLoadingCategories = false;
+        }, 2000);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-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]=\"[{value: '1', description: 'CxO Unit 1'}, {value: '2', description: 'CxO Unit 2'}]\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-custom-searchable>\r\n<!-- <app-textarea \r\n  class=\"section-item full\" [isReadOnly]=\"isReadOnly\" \r\n  [(ngModel)]=\"textArea\" (ngModelChange)=\"log($event)\"\r\n   [ngModelOptions]=\"{standalone: true}\" [required]=\"true\"\r\n  label=\"Text-area\"></app-textarea> -->\r\n      <!-- <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable> -->\r\n\r\n    <!-- <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>-->\r\n    <!--\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n   <!-- <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n\r\n          <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n<!--      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n  <app-multiselect\r\n    class=\"section-item\"\r\n    formControlName=\"multi\"\r\n    [options]=\"multiData\"\r\n    label=\"Multi select\"\r\n    placeholder=\"Select from here\"\r\n    [isReadOnly]=\"false\"\r\n    [mandatory]=\"true\"\r\n  >\r\n  </app-multiselect>\r\n</form>\r\n\r\n\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}", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MultiselectComponent, selector: "app-multiselect", inputs: ["options", "displayedLabel", "key"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -7714,8 +7899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         AttachmentSectionComponent,
                         TableComponent,
                         TranslatePipe,
+                        MultiselectComponent,
+                        SelectComponent,
                         FormsModule
-                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-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]=\"[{value: '1', description: 'CxO Unit 1'}, {value: '2', description: 'CxO Unit 2'}]\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-custom-searchable>\r\n<!-- <app-textarea \r\n  class=\"section-item full\" [isReadOnly]=\"isReadOnly\" \r\n  [(ngModel)]=\"textArea\" (ngModelChange)=\"log($event)\"\r\n   [ngModelOptions]=\"{standalone: true}\" [required]=\"true\"\r\n  label=\"Text-area\"></app-textarea> -->\r\n      <!-- <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable> -->\r\n\r\n    <!-- <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>-->\r\n    <!--\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n   <!-- <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n\r\n          <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n<!--      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
+                    ], template: "<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n  <app-multiselect\r\n    class=\"section-item\"\r\n    formControlName=\"multi\"\r\n    [options]=\"multiData\"\r\n    label=\"Multi select\"\r\n    placeholder=\"Select from here\"\r\n    [isReadOnly]=\"false\"\r\n    [mandatory]=\"true\"\r\n  >\r\n  </app-multiselect>\r\n</form>\r\n\r\n\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}", 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: [{
@@ -7941,7 +8128,7 @@ class CoreAppComponent {
             document.documentElement.setAttribute('dir', direction);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$5.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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]=\"'pageErrorLoading' | translate\"></ds-message>\r\n      }\r\n    }\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
@@ -7963,7 +8150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", 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$5.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -8146,6 +8333,14 @@ function logFormStatus(formGroup) {
  * A collection of custom validators for various data types.
  */
 class DataValidators {
+    /**
+     * Validates that the control's value is the string 'true'
+     */
+    static checkboxRequired(control) {
+        if (control.value === 'true')
+            return null;
+        return { required: true };
+    }
     /**
      * Validates that the control's value is a valid employee object.
      */
@@ -8369,5 +8564,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
+export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MultiselectComponent, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map