bpm-core 0.0.74 → 0.0.76

package/fesm2022/bpm-core.mjs

@@ -9,16 +9,16 @@ import { map } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/common';
 import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgFor, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
-import * as i4$1 from '@angular/material/core';
+import * as i2 from '@angular/material/core';
 import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, Validators, NgControl, FormControlName, FormGroupDirective, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i3 from '@angular/platform-browser';
 import { MatCheckbox } from '@angular/material/checkbox';
-import * as i2 from 'ngx-toastr';
+import * as i2$1 from 'ngx-toastr';
 import * as i1$3 from '@angular/material/datepicker';
 import { MatDatepickerToggle, MatDatepickerInput, MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
-import * as i2$1 from '@angular/material/form-field';
+import * as i6 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
 import * as i7 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
@@ -33,7 +33,7 @@ import * as i3$1 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 { MatProgressSpinner } from '@angular/material/progress-spinner';
-import * as i6 from '@angular/material/button-toggle';
+import * as i6$1 from '@angular/material/button-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
@@ -42,7 +42,7 @@ import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import * as i2$3 from '@angular/router';
 import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatButton } from '@angular/material/button';
-import * as i4$2 from '@angular/material/menu';
+import * as i4$1 from '@angular/material/menu';
 import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import { NoopScrollStrategy, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as FileSaver from 'file-saver';
@@ -1677,13 +1677,13 @@ class BaseComponent {
             this.emitedValue.emit(this.field);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, deps: [{ token: CoreI18nService }, { token: i1.HttpClient }, { token: i4.FormBuilder }, { token: i4$1.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MycurrencyPipe }, { token: MAT_DATE_FORMATS }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, deps: [{ token: CoreI18nService }, { token: i1.HttpClient }, { token: i4.FormBuilder }, { token: i2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MycurrencyPipe }, { token: MAT_DATE_FORMATS }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: BaseComponent, isStandalone: true, selector: "app-base-component", inputs: { hideOption: "hideOption", type: "type", loading: "loading", field: "field", labelTextReadMode: "labelTextReadMode", labelTextWriteMode: "labelTextWriteMode", isReadOnly: "isReadOnly", name: "name", required: "required", mask: "mask", allowedExtensions: "allowedExtensions", link: "link", multiple: "multiple", insideTable: "insideTable", showIfEmpty: "showIfEmpty", showErrorMessage: "showErrorMessage", showHint: "showHint", hint: "hint", errorMessage: "errorMessage", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", maxValue: "maxValue", minValue: "minValue", disabled: "disabled", lov: "lov", hasLabel: "hasLabel", section: "section", controller: "controller" }, outputs: { emitedValue: "emitedValue" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: '', isInline: true, styles: [""], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-component', template: '', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i4.FormBuilder }, { type: i4$1.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i4.FormBuilder }, { type: i2.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: MycurrencyPipe }, { type: CustomDateFormat, decorators: [{
@@ -1869,7 +1869,7 @@ class ControlValueAccessorDirective {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { tooltip: "tooltip", isReadOnly: "isReadOnly", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", mask: "mask", label: "label", matSuffix: "matSuffix", hasTooltip: "hasTooltip", name: "name", randomID: "randomID", multiple: "multiple", maxDate: "maxDate", minDate: "minDate", customMaxDate: "customMaxDate", customMinDate: "customMinDate" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
@@ -1877,7 +1877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{
                     selector: '[appControlValueAccessor]',
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { tooltip: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2$1.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { tooltip: [{
                 type: Input
             }], isReadOnly: [{
                 type: Input
@@ -2215,7 +2215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 const MatDatePickerImports = [
     MatDatepickerToggle,
     MatDatepickerInput,
-    MatDatepickerModule
+    MatDatepickerModule,
+    MatNativeDateModule
 ];
 const MatFormImports = [
     MatFormFieldModule,
@@ -2392,7 +2393,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => CustomSearchableComponent),
                 multi: true,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(isReadOnly && control?.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n} @if(!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"!control.hasValidator(Validators['required'])\"\r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': disabled || loading,\r\n      'custom-validation': !control.hasValidator(Validators['required'])\r\n     }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        #autocompleteInput\r\n        type=\"text\"\r\n        (keydown)=\"onKeyDown($event, autocompleteInput)\"\r\n        [attr.disabled]=\"disabled\"\r\n        [placeholder]=\"label\"\r\n        aria-label=\"Number\"\r\n        matInput\r\n        (input)=\"onValueChange($event)\"\r\n        [formControl]=\"searchControl\"\r\n        [name]=\"name\"\r\n        [matAutocomplete]=\"auto\"\r\n        [value]=\"value?.key\"\r\n        (focusout)=\"onFocusOut()\"\r\n      />\r\n    </label>\r\n\r\n    @if(loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    } @if(!loading && searchControl?.value) {\r\n    <span\r\n      class=\"sfi sfi-close d-inline-block fc-coral cursor-pointer fs-12\"\r\n      (click)=\"clearInput()\"\r\n      matSuffix\r\n    ></span>\r\n    }\r\n\r\n    <mat-autocomplete\r\n      autoActiveFirstOption\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"displayFn\"\r\n      (optionSelected)=\"getAutoComplete($event.option.value)\">\r\n \r\n \r\n    \r\n\r\n      @if(!noData) {\r\n      <ng-container>\r\n        @for(option of filteredOptions; track option) {\r\n        <mat-option [value]=\"option\">\r\n          <div class=\"d-flex align-items-center\">\r\n            @if(option['avatar_url']) {\r\n            <figure class=\"img-card small circled-img p-0 m-0\">\r\n              <img [src]=\"option['avatar_url']\" alt=\"\" />\r\n            </figure>\r\n            } @if(option['avatar_url']) {\r\n            <span class=\"mx-2\"></span>\r\n            }\r\n\r\n            {{ option[displayedLabel] }}\r\n          </div>\r\n        </mat-option>\r\n        }\r\n      </ng-container>\r\n      } @if(noData) {\r\n      <ng-container>\r\n        <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n      </ng-container>\r\n      }\r\n    </mat-autocomplete>\r\n\r\n    <!-- <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{ 'validSelectError' | translate }}{{ label }}</mat-error> -->\r\n\r\n    @if(showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(isReadOnly && control?.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n} @if(!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"!control.hasValidator(Validators['required'])\"\r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': disabled || loading,\r\n      'custom-validation': !control.hasValidator(Validators['required'])\r\n     }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        #autocompleteInput\r\n        type=\"text\"\r\n        (keydown)=\"onKeyDown($event, autocompleteInput)\"\r\n        [attr.disabled]=\"disabled\"\r\n        [placeholder]=\"label\"\r\n        aria-label=\"Number\"\r\n        matInput\r\n        (input)=\"onValueChange($event)\"\r\n        [formControl]=\"searchControl\"\r\n        [name]=\"name\"\r\n        [matAutocomplete]=\"auto\"\r\n        [value]=\"value?.key\"\r\n        (focusout)=\"onFocusOut()\"\r\n      />\r\n    </label>\r\n\r\n    @if(loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    } @if(!loading && searchControl?.value) {\r\n    <span\r\n      class=\"sfi sfi-close d-inline-block fc-coral cursor-pointer fs-12\"\r\n      (click)=\"clearInput()\"\r\n      matSuffix\r\n    ></span>\r\n    }\r\n\r\n    <mat-autocomplete\r\n      autoActiveFirstOption\r\n      #auto=\"matAutocomplete\"\r\n      [displayWith]=\"displayFn\"\r\n      (optionSelected)=\"getAutoComplete($event.option.value)\">\r\n \r\n \r\n    \r\n\r\n      @if(!noData) {\r\n      <ng-container>\r\n        @for(option of filteredOptions; track option) {\r\n        <mat-option [value]=\"option\">\r\n          <div class=\"d-flex align-items-center\">\r\n            @if(option['avatar_url']) {\r\n            <figure class=\"img-card small circled-img p-0 m-0\">\r\n              <img [src]=\"option['avatar_url']\" alt=\"\" />\r\n            </figure>\r\n            } @if(option['avatar_url']) {\r\n            <span class=\"mx-2\"></span>\r\n            }\r\n\r\n            {{ option[displayedLabel] }}\r\n          </div>\r\n        </mat-option>\r\n        }\r\n      </ng-container>\r\n      } @if(noData) {\r\n      <ng-container>\r\n        <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n      </ng-container>\r\n      }\r\n    </mat-autocomplete>\r\n\r\n    <!-- <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{ 'validSelectError' | translate }}{{ label }}</mat-error> -->\r\n\r\n    @if(showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CustomSearchableComponent, decorators: [{
             type: Component,
@@ -2544,7 +2545,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n\r\n    <div class=\"datePicker justify-content-between mb-1\">\r\n      <mat-form-field\r\n        [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n        [floatLabel]=\"floatLabel\"\r\n      >\r\n        <label class=\"mat-form-content\">\r\n          <input\r\n            matInput\r\n            (dateInput)=\"dateChange($event)\"\r\n            [placeholder]=\"label ? ('select' | translate) + ' ' + label : ''\"\r\n            (click)=\"focusPicker(dp)\"\r\n            [min]=\"minDateValue\"\r\n            [max]=\"maxDateValue\"\r\n            readonly\r\n            [matDatepicker]=\"dp\"\r\n            [formControl]=\"control\"\r\n          />\r\n        </label>\r\n\r\n        @if(control?.value) {\r\n          <ds-icon\r\n            matSuffix\r\n            icon=\"close\"\r\n            class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n            (click)=\"clearDateValue($event)\"\r\n          ></ds-icon>\r\n        }\r\n\r\n        <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n          <ds-icon\r\n            icon=\"calendar-o\"\r\n            class=\"fc-black fs-18\"\r\n            matDatepickerToggleIcon\r\n          ></ds-icon>\r\n        </mat-datepicker-toggle>\r\n\r\n        <mat-datepicker #dp></mat-datepicker>\r\n        <!-- <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n      </mat-form-field>\r\n    </div>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control) {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      type=\"date\"\r\n      [insideTable]=\"insideTable\"\r\n      [dateType]=\"calendarType\"\r\n      [label]=\"label\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n\r\n    <div class=\"datePicker justify-content-between mb-1\">\r\n      <mat-form-field\r\n        [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n        [floatLabel]=\"floatLabel\"\r\n      >\r\n        <label class=\"mat-form-content\">\r\n          <input\r\n            matInput\r\n            (dateInput)=\"dateChange($event)\"\r\n            [placeholder]=\"label ? ('select' | translate) + ' ' + label : ''\"\r\n            (click)=\"focusPicker(dp)\"\r\n            [min]=\"minDateValue\"\r\n            [max]=\"maxDateValue\"\r\n            readonly\r\n            [matDatepicker]=\"dp\"\r\n            [formControl]=\"control\"\r\n          />\r\n        </label>\r\n\r\n        @if(control?.value) {\r\n          <ds-icon\r\n            matSuffix\r\n            icon=\"close\"\r\n            class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n            (click)=\"clearDateValue($event)\"\r\n          ></ds-icon>\r\n        }\r\n\r\n        <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n          <ds-icon\r\n            icon=\"calendar-o\"\r\n            class=\"fc-black fs-18\"\r\n            matDatepickerToggleIcon\r\n          ></ds-icon>\r\n        </mat-datepicker-toggle>\r\n\r\n        <mat-datepicker #dp></mat-datepicker>\r\n        <!-- <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n      </mat-form-field>\r\n    </div>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value) {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      type=\"date\"\r\n      [insideTable]=\"insideTable\"\r\n      [dateType]=\"calendarType\"\r\n      [label]=\"label\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i2.MatNativeDateModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2559,12 +2560,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useClass: CustomDateFormat,
                         },
                     ], imports: [
-                        MatNativeDateModule,
                         MatDatepicker,
                         ...MatDatePickerImports,
                         ...MatFormImports,
                         ...Shareds
-                    ], template: "@if(!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n\r\n    <div class=\"datePicker justify-content-between mb-1\">\r\n      <mat-form-field\r\n        [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n        [floatLabel]=\"floatLabel\"\r\n      >\r\n        <label class=\"mat-form-content\">\r\n          <input\r\n            matInput\r\n            (dateInput)=\"dateChange($event)\"\r\n            [placeholder]=\"label ? ('select' | translate) + ' ' + label : ''\"\r\n            (click)=\"focusPicker(dp)\"\r\n            [min]=\"minDateValue\"\r\n            [max]=\"maxDateValue\"\r\n            readonly\r\n            [matDatepicker]=\"dp\"\r\n            [formControl]=\"control\"\r\n          />\r\n        </label>\r\n\r\n        @if(control?.value) {\r\n          <ds-icon\r\n            matSuffix\r\n            icon=\"close\"\r\n            class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n            (click)=\"clearDateValue($event)\"\r\n          ></ds-icon>\r\n        }\r\n\r\n        <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n          <ds-icon\r\n            icon=\"calendar-o\"\r\n            class=\"fc-black fs-18\"\r\n            matDatepickerToggleIcon\r\n          ></ds-icon>\r\n        </mat-datepicker-toggle>\r\n\r\n        <mat-datepicker #dp></mat-datepicker>\r\n        <!-- <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n      </mat-form-field>\r\n    </div>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control) {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      type=\"date\"\r\n      [insideTable]=\"insideTable\"\r\n      [dateType]=\"calendarType\"\r\n      [label]=\"label\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"] }]
+                    ], template: "@if(!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n\r\n    <div class=\"datePicker justify-content-between mb-1\">\r\n      <mat-form-field\r\n        [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n        [floatLabel]=\"floatLabel\"\r\n      >\r\n        <label class=\"mat-form-content\">\r\n          <input\r\n            matInput\r\n            (dateInput)=\"dateChange($event)\"\r\n            [placeholder]=\"label ? ('select' | translate) + ' ' + label : ''\"\r\n            (click)=\"focusPicker(dp)\"\r\n            [min]=\"minDateValue\"\r\n            [max]=\"maxDateValue\"\r\n            readonly\r\n            [matDatepicker]=\"dp\"\r\n            [formControl]=\"control\"\r\n          />\r\n        </label>\r\n\r\n        @if(control?.value) {\r\n          <ds-icon\r\n            matSuffix\r\n            icon=\"close\"\r\n            class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n            (click)=\"clearDateValue($event)\"\r\n          ></ds-icon>\r\n        }\r\n\r\n        <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n          <ds-icon\r\n            icon=\"calendar-o\"\r\n            class=\"fc-black fs-18\"\r\n            matDatepickerToggleIcon\r\n          ></ds-icon>\r\n        </mat-datepicker-toggle>\r\n\r\n        <mat-datepicker #dp></mat-datepicker>\r\n        <!-- <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n      </mat-form-field>\r\n    </div>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value) {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      type=\"date\"\r\n      [insideTable]=\"insideTable\"\r\n      [dateType]=\"calendarType\"\r\n      [label]=\"label\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], calendarType: [{
@@ -2719,7 +2719,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control?.value?.startDate,\r\n      endDate: control?.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else if(isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control?.value?.startDate,\r\n      endDate: control?.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2.MatNativeDateModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -2737,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         ...MatDatePickerImports,
                         ...MatFormImports,
                         ...Shareds
-                    ], template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control?.value?.startDate,\r\n      endDate: control?.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else if(isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control?.value?.startDate,\r\n      endDate: control?.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], yearOnly: [{
@@ -2777,7 +2777,7 @@ class InputComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n}", styles: [""], dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -2792,7 +2792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n}" }]
+                    ], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n}" }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -2902,7 +2902,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputNumberComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        numberOnly\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        numberOnly\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -2916,7 +2916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => InputNumberComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        numberOnly\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
+                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        numberOnly\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -2961,7 +2961,7 @@ class InputEmailComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputEmailComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        (change)=\"displayErrors($event)\"\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        (change)=\"displayErrors($event)\"\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
@@ -2974,7 +2974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => InputEmailComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        (change)=\"displayErrors($event)\"\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
+                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        (change)=\"displayErrors($event)\"\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3007,7 +3007,7 @@ class InputMaskComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputMaskComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
@@ -3024,7 +3024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         InfoItemComponent,
                         ReactiveFormsModule,
                         NgClass,
-                    ], template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3137,7 +3137,7 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
                 multi: true,
             },
             MycurrencyPipe
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        appMycurrency\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        appMycurrency\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
@@ -3154,7 +3154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             multi: true,
                         },
                         MycurrencyPipe
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        appMycurrency\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"] }]
+                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        appMycurrency\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3218,7 +3218,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputTelephoneComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n      <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n        <label class=\"mat-form-content\">\r\n          <!-- [placeholder]=\"label\" -->\r\n        <!--  <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n            [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n            (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n            (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n            oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n            [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n          <!-- <input matInput [hidden]=\"true\"/> -->\r\n            <ngx-intl-tel-input\r\n            (input)=\"setControlValue(telephoneControl.value)\"\r\n            [formControl]=\"telephoneControl\"\r\n            [cssClass]=\"'custom'\"\r\n            [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n            [enableAutoCountrySelect]=\"false\"\r\n            [enablePlaceholder]=\"true\"\r\n            [searchCountryFlag]=\"true\"\r\n            [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n            [selectFirstCountry]=\"false\"\r\n            [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n            [maxLength]=\"17\"\r\n            [phoneValidation]=\"true\"\r\n            [inputId]=\"\"\r\n            name=\"phone\"\r\n          ></ngx-intl-tel-input>\r\n          </label>\r\n      </div>\r\n      <!-- </mat-form-field> -->\r\n      <!-- <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors> -->\r\n       @if(telephoneControl.touched){\r\n        @for(error of telephoneControl.errors | keyvalue; track error ) {\r\n          <mat-error class=\"mb-2\">\r\n              {{ errorMessages[error.key] }}\r\n            </mat-error>\r\n  }\r\n       }\r\n \r\n  </ng-container>\r\n}\r\n@if(isReadOnly){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\"  [type]=\"'telephone'\" [label]=\"label\"\r\n      [value]=\"control.value\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i3$1.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i3$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n      <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n        <label class=\"mat-form-content\">\r\n          <!-- [placeholder]=\"label\" -->\r\n        <!--  <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n            [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n            (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n            (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n            oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n            [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n          <!-- <input matInput [hidden]=\"true\"/> -->\r\n            <ngx-intl-tel-input\r\n            (input)=\"setControlValue(telephoneControl.value)\"\r\n            [formControl]=\"telephoneControl\"\r\n            [cssClass]=\"'custom'\"\r\n            [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n            [enableAutoCountrySelect]=\"false\"\r\n            [enablePlaceholder]=\"true\"\r\n            [searchCountryFlag]=\"true\"\r\n            [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n            [selectFirstCountry]=\"false\"\r\n            [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n            [maxLength]=\"17\"\r\n            [phoneValidation]=\"true\"\r\n            [inputId]=\"\"\r\n            name=\"phone\"\r\n          ></ngx-intl-tel-input>\r\n          </label>\r\n      </div>\r\n      <!-- </mat-form-field> -->\r\n      <!-- <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors> -->\r\n       @if(telephoneControl.touched){\r\n        @for(error of telephoneControl.errors | keyvalue; track error ) {\r\n          <mat-error class=\"mb-2\">\r\n              {{ errorMessages[error.key] }}\r\n            </mat-error>\r\n  }\r\n       }\r\n \r\n  </ng-container>\r\n}\r\n@if(isReadOnly && control.value){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\"  [type]=\"'telephone'\" [label]=\"label\"\r\n      [value]=\"control.value\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i3$1.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i3$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputTelephoneComponent, decorators: [{
             type: Component,
@@ -3233,7 +3233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => InputTelephoneComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n      <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n        <label class=\"mat-form-content\">\r\n          <!-- [placeholder]=\"label\" -->\r\n        <!--  <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n            [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n            (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n            (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n            oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n            [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n          <!-- <input matInput [hidden]=\"true\"/> -->\r\n            <ngx-intl-tel-input\r\n            (input)=\"setControlValue(telephoneControl.value)\"\r\n            [formControl]=\"telephoneControl\"\r\n            [cssClass]=\"'custom'\"\r\n            [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n            [enableAutoCountrySelect]=\"false\"\r\n            [enablePlaceholder]=\"true\"\r\n            [searchCountryFlag]=\"true\"\r\n            [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n            [selectFirstCountry]=\"false\"\r\n            [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n            [maxLength]=\"17\"\r\n            [phoneValidation]=\"true\"\r\n            [inputId]=\"\"\r\n            name=\"phone\"\r\n          ></ngx-intl-tel-input>\r\n          </label>\r\n      </div>\r\n      <!-- </mat-form-field> -->\r\n      <!-- <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors> -->\r\n       @if(telephoneControl.touched){\r\n        @for(error of telephoneControl.errors | keyvalue; track error ) {\r\n          <mat-error class=\"mb-2\">\r\n              {{ errorMessages[error.key] }}\r\n            </mat-error>\r\n  }\r\n       }\r\n \r\n  </ng-container>\r\n}\r\n@if(isReadOnly){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\"  [type]=\"'telephone'\" [label]=\"label\"\r\n      [value]=\"control.value\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"] }]
+                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n      <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n        <label class=\"mat-form-content\">\r\n          <!-- [placeholder]=\"label\" -->\r\n        <!--  <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n            [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n            (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n            (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n            oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n            [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n          <!-- <input matInput [hidden]=\"true\"/> -->\r\n            <ngx-intl-tel-input\r\n            (input)=\"setControlValue(telephoneControl.value)\"\r\n            [formControl]=\"telephoneControl\"\r\n            [cssClass]=\"'custom'\"\r\n            [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n            [enableAutoCountrySelect]=\"false\"\r\n            [enablePlaceholder]=\"true\"\r\n            [searchCountryFlag]=\"true\"\r\n            [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n            [selectFirstCountry]=\"false\"\r\n            [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n            [maxLength]=\"17\"\r\n            [phoneValidation]=\"true\"\r\n            [inputId]=\"\"\r\n            name=\"phone\"\r\n          ></ngx-intl-tel-input>\r\n          </label>\r\n      </div>\r\n      <!-- </mat-form-field> -->\r\n      <!-- <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors> -->\r\n       @if(telephoneControl.touched){\r\n        @for(error of telephoneControl.errors | keyvalue; track error ) {\r\n          <mat-error class=\"mb-2\">\r\n              {{ errorMessages[error.key] }}\r\n            </mat-error>\r\n  }\r\n       }\r\n \r\n  </ng-container>\r\n}\r\n@if(isReadOnly && control.value){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\"  [type]=\"'telephone'\" [label]=\"label\"\r\n      [value]=\"control.value\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3365,7 +3365,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SearchEmployeeComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"!control.hasValidator(Validators['required'])\" \r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [image]=\"getImage(option?.email)\"\r\n                onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n     \r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n    \r\n   \r\n      <!-- <app-validation-errors [errors]=\"customErrorMessage || employeeSearchControl.errors\" [isEmployeeSearchControl]=\"multiple? true: false\"></app-validation-errors> -->\r\n       @if(control.invalid && employeeSearchControl.touched){\r\n        <mat-error class=\"mb-2\">\r\n          this filed is required\r\n        </mat-error>\r\n       }\r\n   \r\n\r\n  \r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [image]=\"getImage(emails?.['personEmail'])\"\r\n              onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"!control.hasValidator(Validators['required'])\" \r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [image]=\"getImage(option?.email)\"\r\n                onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n     \r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n    \r\n   \r\n      <!-- <app-validation-errors [errors]=\"customErrorMessage || employeeSearchControl.errors\" [isEmployeeSearchControl]=\"multiple? true: false\"></app-validation-errors> -->\r\n       @if(control.invalid && employeeSearchControl.touched){\r\n        <mat-error class=\"mb-2\">\r\n          this filed is required\r\n        </mat-error>\r\n       }\r\n   \r\n\r\n  \r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [image]=\"getImage(emails?.['personEmail'])\"\r\n              onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
             type: Component,
@@ -3383,7 +3383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => SearchEmployeeComponent),
                             multi: true,
                         },
-                    ], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"!control.hasValidator(Validators['required'])\" \r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [image]=\"getImage(option?.email)\"\r\n                onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n     \r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n    \r\n   \r\n      <!-- <app-validation-errors [errors]=\"customErrorMessage || employeeSearchControl.errors\" [isEmployeeSearchControl]=\"multiple? true: false\"></app-validation-errors> -->\r\n       @if(control.invalid && employeeSearchControl.touched){\r\n        <mat-error class=\"mb-2\">\r\n          this filed is required\r\n        </mat-error>\r\n       }\r\n   \r\n\r\n  \r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [image]=\"getImage(emails?.['personEmail'])\"\r\n              onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"] }]
+                    ], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"!control.hasValidator(Validators['required'])\" \r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [image]=\"getImage(option?.email)\"\r\n                onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n     \r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n    \r\n   \r\n      <!-- <app-validation-errors [errors]=\"customErrorMessage || employeeSearchControl.errors\" [isEmployeeSearchControl]=\"multiple? true: false\"></app-validation-errors> -->\r\n       @if(control.invalid && employeeSearchControl.touched){\r\n        <mat-error class=\"mb-2\">\r\n          this filed is required\r\n        </mat-error>\r\n       }\r\n   \r\n\r\n  \r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [image]=\"getImage(emails?.['personEmail'])\"\r\n              onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"] }]
         }], propDecorators: { valueName: [{
                 type: Input
             }], className: [{
@@ -3612,7 +3612,7 @@ class TextareaComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea [placeholder]=\"placeholder\"   min=\"minlength\" arOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n        @if (type === 'enOnly'){\r\n          <textarea  [placeholder]=\"placeholder\"  min=\"minlength\" enOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n       @if (type !== 'enOnly' &&  type !== 'arOnly' ){\r\n        <textarea [placeholder]=\"placeholder\" \r\n        [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n        [formControl]=\"control\" matInput></textarea>\r\n       }\r\n       \r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    \r\n    </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  \r\n  </ng-container>\r\n}\r\n@if (isReadOnly && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea [placeholder]=\"placeholder\"   min=\"minlength\" arOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n        @if (type === 'enOnly'){\r\n          <textarea  [placeholder]=\"placeholder\"  min=\"minlength\" enOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n       @if (type !== 'enOnly' &&  type !== 'arOnly' ){\r\n        <textarea [placeholder]=\"placeholder\" \r\n        [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n        [formControl]=\"control\" matInput></textarea>\r\n       }\r\n       \r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    \r\n    </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  \r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -3626,7 +3626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea [placeholder]=\"placeholder\"   min=\"minlength\" arOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n        @if (type === 'enOnly'){\r\n          <textarea  [placeholder]=\"placeholder\"  min=\"minlength\" enOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n       @if (type !== 'enOnly' &&  type !== 'arOnly' ){\r\n        <textarea [placeholder]=\"placeholder\" \r\n        [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n        [formControl]=\"control\" matInput></textarea>\r\n       }\r\n       \r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    \r\n    </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  \r\n  </ng-container>\r\n}\r\n@if (isReadOnly && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n" }]
+                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea [placeholder]=\"placeholder\"   min=\"minlength\" arOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n        @if (type === 'enOnly'){\r\n          <textarea  [placeholder]=\"placeholder\"  min=\"minlength\" enOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n       @if (type !== 'enOnly' &&  type !== 'arOnly' ){\r\n        <textarea [placeholder]=\"placeholder\" \r\n        [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n        [formControl]=\"control\" matInput></textarea>\r\n       }\r\n       \r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    \r\n    </mat-form-field>\r\n  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  \r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], preventSpecailChar: [{
@@ -3976,6 +3976,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         }
     }
     ngOnInit() {
+        super.ngOnInit();
         this.actionStateService.resetAction$
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(res => {
@@ -4446,7 +4447,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AttachmentSectionDataComponent, isStandalone: true, selector: "app-add-attachment-section", inputs: { hasColumnBreak: "hasColumnBreak", section: "section" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -4474,7 +4475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             multi: true,
                         },
                     ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n    <ds-button icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"px-md-4 mt-3\">\r\n      <form [formGroup]=\"formGroup\">\r\n        <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n          [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n          [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\" \r\n          [allowedExtensions]=\"dialogData?.data\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n          [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n          [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"description\">\r\n        </app-textarea>\r\n\r\n        <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n          [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" \r\n          [label]=\"'comments' | translate\" [required]=\"false\" [minLength]='1' [maxLength]='500' \r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"comments\">\r\n        </app-textarea>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n    <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n      <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n        <span>{{ 'add' | translate }}</span>\r\n      </ng-container>\r\n      <ng-template #editTemplate>\r\n        <span>{{ 'edit' | translate }}</span>\r\n      </ng-template>\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: ActionStateService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2$1.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: ActionStateService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }], propDecorators: { hasColumnBreak: [{
@@ -4718,7 +4719,7 @@ class RadioComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => RadioComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n}@else {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [type]=\"'toggleBtn'\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [".mat-mdc-radio-group{grid-gap:2rem}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n}@else if(isReadOnly && control.value) {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [type]=\"'toggleBtn'\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [".mat-mdc-radio-group{grid-gap:2rem}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -4734,7 +4735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => RadioComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n}@else {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [type]=\"'toggleBtn'\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [".mat-mdc-radio-group{grid-gap:2rem}\n"] }]
+                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n}@else if(isReadOnly && control.value) {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [type]=\"'toggleBtn'\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [".mat-mdc-radio-group{grid-gap:2rem}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }] } });
@@ -4959,6 +4960,9 @@ class TableComponent {
             .pipe(debounceTime(200))
             .subscribe((e) => this.onTableScroll(e));
     }
+    viewForm(url) {
+        window.open('/group/i-gate/wm-bpm/forms?formId=' + url);
+    }
     onTableScroll(e) {
         const tableViewHeight = e.target.offsetHeight; // viewport: ~500px
         const tableScrollHeight = e.target.scrollHeight; // length of all table
@@ -4970,11 +4974,11 @@ class TableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$4.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n              <span *ngSwitchCase=\"'formId'\"\r\n                  (click)=\"viewForm(element[column])\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-coral 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\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table', standalone: true, imports: [NgFor, TranslateModule, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
+            args: [{ selector: 'app-table', standalone: true, imports: [NgFor, TranslateModule, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n  @if(!isLoading){\r\n  <ng-container>\r\n    @if(dataSource.filteredData?.length! > 0){\r\n    <table\r\n      #tableSort=\"matSort\"\r\n      (matSortChange)=\"sortChange($event)\"\r\n      [dataSource]=\"dataSource\"\r\n      class=\"primary-table {{ className }}\"\r\n      mat-table\r\n      matSort\r\n    >\r\n      @for(column of columns; track $index; let i =$index){\r\n      <ng-container>\r\n        <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n        @if(columnsConfig && columnsConfig[i]){\r\n        <ng-container>\r\n          <ng-container\r\n            [matColumnDef]=\"column\"\r\n            [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n          >\r\n            @if(!columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n                mat-sort-header\r\n              >\r\n                @if(columnsConfig[i].type !== 'checkbox' || (\r\n                this.columnsConfig[i]?.type! == 'actions' &&\r\n                this.columnsConfig[i]?.actions?.length === 0) ){\r\n                <ng-container>\r\n                  @if(!( this.columnsConfig[i].type == 'actions' &&\r\n                  this.columnsConfig[i].actions.length === 0)){\r\n                  <div class=\"d-flex align-items-center\">\r\n                    <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                      {{ columnsConfig[i].label | translate }}\r\n                    </div>\r\n                    @if(columnsConfig[i].slaMax){\r\n                    <ds-sla\r\n                      [canvasScale]=\"'40'\"\r\n                      [innerLineWidth]=\"'3'\"\r\n                      [maxValue]=\"columnsConfig[i].slaMax\"\r\n                      [outerLineColor]=\"'limegreen'\"\r\n                      [outerLineWidth]=\"'3'\"\r\n                      [value]=\"columnsConfig[i].slaValue\"\r\n                      class=\"table-header-sla my-1\"\r\n                    ></ds-sla>\r\n                    }\r\n                  </div>\r\n                  }\r\n                </ng-container>\r\n                } @if(columnsConfig[i].type == 'checkbox' ){\r\n                <mat-checkbox class=\"checkbox\"> </mat-checkbox>\r\n                }\r\n              </th>\r\n            </ng-container>\r\n            } @if(columnsConfig[i].notSortable){\r\n            <ng-container>\r\n              <th\r\n                *matHeaderCellDef\r\n                [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n                mat-header-cell\r\n              >\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"mx-1\">\r\n                    {{ columnsConfig[i].label | translate }}\r\n                  </div>\r\n                  @if(columnsConfig[i].slaMax){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'50'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"columnsConfig[i].slaMax\"\r\n                    [outerLineColor]=\"'limegreen'\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"columnsConfig[i].slaValue\"\r\n                    class=\"table-header-sla my-1\"\r\n                  ></ds-sla>\r\n                  }\r\n                </div>\r\n              </th>\r\n            </ng-container>\r\n            }\r\n\r\n            <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n              <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                <!--            <a target=\"_blank\"-->\r\n                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                <!--              {{ element[column] }}-->\r\n                <!--            </a>-->\r\n              <span *ngSwitchCase=\"'formId'\"\r\n                  (click)=\"viewForm(element[column])\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-coral 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\r\n                  *ngSwitchCase=\"'linkWithIcon'\"\r\n                  [appSkipLocation]=\"columnsConfig[i].link\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'underLineWithIcon'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"fc-black text-decoration-underline fw-medium\"\r\n                >\r\n                  <ds-icon\r\n                    class=\"fs-20 fc-black\"\r\n                    icon=\" {{ columnsConfig[i].icon }}\"\r\n                  ></ds-icon>\r\n                  <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n                    element[column]\r\n                  }}</span>\r\n                </span>\r\n                <mat-checkbox\r\n                  *ngSwitchCase=\"'checkbox'\"\r\n                  checked=\"{{ columnsConfig[i].checked }}\"\r\n                  class=\"checkbox\"\r\n                  disabled=\"{{ columnsConfig[i].disabled }}\"\r\n                >\r\n                </mat-checkbox>\r\n                <span\r\n                  *ngSwitchCase=\"'ServiceDetails'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"cursor-pointer\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                  {{ element[column] | date : \"MMM d, y\" }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Search'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'Search for item '\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding \"\r\n                    prefix=\"sfi-search fs-16\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'Number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <app-input\r\n                    [formControl]=\"ctrl\"\r\n                    [placeholder]=\"'number'\"\r\n                    [showLabel]=\"false\"\r\n                    class=\"\"\r\n                    className=\"no-padding\"\r\n                    type=\"text\"\r\n                  >\r\n                  </app-input>\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'dateFromTo'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                  <span class=\"mx-2\">\r\n                    {{ element?.date.from }}\r\n                    @if(element?.date.to){\r\n                    <ng-container> : {{ element?.date.to }} </ng-container>\r\n                    }\r\n                  </span>\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'dateTime'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                  {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'singleTimeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  {{ element[column] | date : \"h:mm a\" }}\r\n                </span>\r\n                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                <span\r\n                  *ngSwitchCase=\"'timeOnly'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n                  dir=\"ltr\"\r\n                >\r\n                  <!--  -->\r\n                  {{\r\n                    mapText(columnsConfig[i].firstVal, element[column])\r\n                      | date : \"h:mm a\"\r\n                  }}\r\n                  @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n                  <ng-container>\r\n                    -\r\n                    {{\r\n                      mapText(columnsConfig[i].secondVal, element[column])\r\n                        | date : \"h:mm a\"\r\n                    }}\r\n                  </ng-container>\r\n                  }\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'multipleRows'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n                >\r\n                  <!--  -->\r\n                  @if(!element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    {{ element[column].fixedFineValue }}\r\n                    {{ \"global.SAR\" | translate }}\r\n                  </div>\r\n                  } @if(element[column].monthlyFineEscalation){\r\n                  <div>\r\n                    <br />\r\n                    {{ element[column].firstTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].secondTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                    {{ element[column].thirdTimeFine }}\r\n                    {{ \"global.SAR\" | translate }} <br /><br />\r\n                  </div>\r\n                  }\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'sla'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-inline-flex align-items-center\"\r\n                >\r\n                  <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                  <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                  <!--              </app-sla>-->\r\n\r\n                  <ds-sla\r\n                    [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                    [canvasScale]=\"'55'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"element?.SLA?.max\"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element?.SLA?.value\"\r\n                  ></ds-sla>\r\n                </div>\r\n                <div *ngSwitchCase=\"'slaProgress'\">\r\n                  <!--              <mat-sp-->\r\n\r\n                  @if(element[column]?.percentage >= 0){\r\n                  <ds-sla\r\n                    [canvasScale]=\"'55'\"\r\n                    [customValue]=\"element[column]?.percentage + '%'\"\r\n                    [innerLineWidth]=\"'3'\"\r\n                    [maxValue]=\"'100'\"\r\n                    [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                    [outerLineWidth]=\"'3'\"\r\n                    [value]=\"element[column]?.percentage\"\r\n                  ></ds-sla>\r\n                  } @else {\r\n                  <ng-template>Not started</ng-template>\r\n                  }\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Priority'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'serviceStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ element[column] }}\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n                    class=\"dot-status\"\r\n                  ></span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'image'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"img-card table-img\"\r\n                >\r\n                  <img\r\n                    [src]=\"element?.image\"\r\n                    alt=\"\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                  />\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'employee'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n                >\r\n                  <ds-avatar\r\n                    [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n                    size=\"x-small\"\r\n                  >\r\n                  </ds-avatar>\r\n                  <span>{{ (element[column]?.['name']) }}</span>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'progress_group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex gap-1\"\r\n                >\r\n                  <ng-container *ngFor=\"let item of element[column]\">\r\n                    <div\r\n                      class=\"progress-container default-progress medium radius-0\"\r\n                      matTooltip=\"Team assignment {{ item.value }}%\"\r\n                      matTooltipPosition=\"below\"\r\n                    >\r\n                      <div\r\n                        [style.width.%]=\"item.value\"\r\n                        class=\"progress-bar bg-color-{{ item.color }}\"\r\n                      ></div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'input'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-input\r\n                    (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                    [(ngModel)]=\"element[column]\"\r\n                    [min]=\"0\"\r\n                    [placeholder]=\"element[column]\"\r\n                    class=\"w-100\"\r\n                    className=\" no-padding w-100\"\r\n                    type=\"number\"\r\n                    value=\"{{ element[column] }}\"\r\n                  >\r\n                  </app-input>\r\n                </div>\r\n                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                <div\r\n                  *ngSwitchCase=\"'select'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"\"\r\n                >\r\n                  <app-custom-searchable\r\n                    (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                    [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                    [key]=\"columnsConfig[i]?.key\"\r\n                    [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                    [options]=\"columnsConfig[i]?.options\"\r\n                    [postKey]=\"columnsConfig[i]?.postKey\"\r\n                    [showLabel]=\"false\"\r\n                    className=\"no-padding w-100\"\r\n                  >\r\n                  </app-custom-searchable>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'status'\"\r\n                  [ngClass]=\"'New' + columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  @if(element[column]){\r\n                  <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                    {{ element[column]?.title | translate }}\r\n                  </ds-status>\r\n                  } @if(element[column]?.reason){\r\n                  <span\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"reasonMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                  >\r\n                    Show reason\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column]?.reason }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </div>\r\n                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 1\"\r\n                    [disabled]=\"false\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'customToggle'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <mat-slide-toggle\r\n                    (change)=\"toggleValueChange($event, element)\"\r\n                    [checked]=\"element[column] == 7\"\r\n                    [disabled]=\"element[column] != 1\"\r\n                  ></mat-slide-toggle>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'meetingStatus'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  @if(element[column].label == 'Finished'){\r\n                  <span class=\" {{ element[column].label }} status  \">\r\n                    {{ element[column].label }}\r\n                  </span>\r\n                  } @if(element[column].label != 'Finished'){\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].hours }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">HRS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].min }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">MINS</span>\r\n                    </div>\r\n                    <div\r\n                      class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n                    >\r\n                      <span class=\"fs-11 fw-medium mb-1\">\r\n                        {{ element[column].sec }}</span\r\n                      >\r\n                      <span class=\"fs-10 fw-light\">SECS</span>\r\n                    </div>\r\n                  </div>\r\n                  }\r\n                </div>\r\n                <span\r\n                  *ngSwitchCase=\"'number'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] ? element[column] : 0 }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'currency'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  {{\r\n                    element[column]\r\n                      ? parseInt(element[column]).toFixed(2) +\r\n                        (columnsConfig[i].currency | translate)\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'active'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}\"\r\n                >\r\n                  <ds-icon\r\n                    [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n                    icon=\"check-circle-f fs-30\"\r\n                  ></ds-icon>\r\n                </span>\r\n                <div\r\n                  *ngSwitchCase=\"'sync'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 18 19\"\r\n                    width=\"18\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                    <path\r\n                      d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n                  {{ element[column] }}\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"descMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'translatedClickable'\"\r\n                  [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  {{ columnsConfig[i].clickableText | translate }}\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                  <span class=\"fs-14\">\r\n                    {{\r\n                      columnsConfig[i].arKey\r\n                        ? translateService.currentLang == \"ar\"\r\n                          ? mapText(columnsConfig[i].arKey, element[column])\r\n                          : mapText(columnsConfig[i].enKey, element[column])\r\n                        : element[column]\r\n                        ? element[column]\r\n                        : \"-\"\r\n                    }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  #statusMenuTrigger=\"matMenuTrigger\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'conditionalClickable'\"\r\n                  [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                >\r\n                  @if(element[column] && element[column] != 'null'){\r\n                  <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                  }\r\n                  <!-- {{ 'global.view' | translate}} -->\r\n                </span>\r\n\r\n                <mat-menu\r\n                  #descConditionalMenu=\"matMenu\"\r\n                  class=\"p-4 text-center\"\r\n                >\r\n                  <span class=\"fs-14\">\r\n                    {{ element[column] }}\r\n                  </span>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  *ngSwitchCase=\"'dropdown'\"\r\n                  [matMenuTriggerFor]=\"dropdownMenu\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"{{ columnsConfig[i].type }}   cursor-pointer\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                  <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                  {{item.id}}\r\n                                </span> -->\r\n\r\n                  <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                </span>\r\n\r\n                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                  <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                    <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                      <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                      {{\r\n                        columnsConfig[i].arKey\r\n                          ? translateService.currentLang == \"ar\"\r\n                            ? mapText(columnsConfig[i].arKey, element[column])\r\n                            : mapText(columnsConfig[i].enKey, element[column])\r\n                          : element[column]\r\n                          ? element[column]\r\n                          : \"-\"\r\n                      }}\r\n                    </span>\r\n                  </ng-container>\r\n                </mat-menu>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'formatNumber'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'group'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap d-flex align-items-center\"\r\n                ></div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'company'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center\"\r\n                >\r\n                  <span class=\"img-card circled-img\">\r\n                    <img\r\n                      [src]=\"element?.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </span>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"full-name\">{{ element[column] }}</span>\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'translated'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column] }}\r\n                </span>\r\n                <span\r\n                  *ngSwitchCase=\"'title'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'maxWidth'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  {{ element[column]?.title }}\r\n                </span>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'progress'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                >\r\n                  <div class=\"Progress\">\r\n                    <div class=\"progress-container default-progress\">\r\n                      <div\r\n                        [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                        class=\"progress-bar\"\r\n                      ></div>\r\n                    </div>\r\n                    <div class=\"Progress__footer\">\r\n                      <div></div>\r\n                      <div>\r\n                        <span class=\"fs-12\">\r\n                          <span>{{ element[column].consumed }}</span>\r\n                          <span>/</span>\r\n                          <span class=\"fc-silver\">{{\r\n                            element[column].total\r\n                          }}</span>\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </span>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'subsidiary'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <img\r\n                    [alt]=\"element[column]?.title\"\r\n                    src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n                  />\r\n                  <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Service'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <svg\r\n                    fill=\"none\"\r\n                    height=\"35\"\r\n                    viewBox=\"0 0 34 35\"\r\n                    width=\"34\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <rect\r\n                      fill=\"#FF375E\"\r\n                      fill-opacity=\"0.1\"\r\n                      height=\"33.5\"\r\n                      rx=\"4\"\r\n                      width=\"33.5\"\r\n                      y=\"0.75\"\r\n                    />\r\n                    <path\r\n                      d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                      fill=\"#FF375E\"\r\n                    />\r\n                  </svg>\r\n\r\n                  <span class=\"fs-12 fw-normal fc-black\">{{\r\n                    element?.Service.name\r\n                  }}</span>\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'Color'\"\r\n                  class=\"d-flex align-items-center gap-2\"\r\n                >\r\n                  <span\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                  ></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'colorBg'\"\r\n                  [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                  class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                >\r\n                  <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                  {{ element[column].title }}\r\n                </div>\r\n                <div\r\n                  *ngSwitchCase=\"'assigned'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex align-items-center\"\r\n                >\r\n                  <div class=\"img-card x-small circled-img\">\r\n                    <img\r\n                      [src]=\"element?.AssignedTo.image\"\r\n                      alt=\"\"\r\n                      onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    />\r\n                  </div>\r\n                  <span class=\"mx-1\"></span>\r\n                  <span class=\"fs-12 fc-black\">{{\r\n                    element?.AssignedTo.name\r\n                  }}</span>\r\n                  <!--\r\n                                <span class=\"sfi sfi-close fc-coral\"></span>\r\n                               -->\r\n                </div>\r\n\r\n                <span\r\n                  *ngSwitchCase=\"'coloredText'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  >{{\r\n                                    element[column]?.['title']\r\n                  }}</span\r\n                >\r\n                <div\r\n                  *ngSwitchCase=\"'survey'\"\r\n                  [style.color]=\"element[column]?.['color']\"\r\n                  class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n                >\r\n                  <span\r\n                    class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n                  ></span>\r\n                  {{ element[column]?.['title'] }}\r\n                </div>\r\n\r\n                <div\r\n                  *ngSwitchCase=\"'Satisfaction'\"\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"delegate d-flex gap-2 align-items-center\"\r\n                >\r\n                  <!--\r\n                                      <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                -->\r\n\r\n                  <span class=\"fs-12 fc-black\"\r\n                    >{{ element[column].percentage }}%</span\r\n                  >\r\n                  <ds-status\r\n                    class=\"auto-status\"\r\n                    size=\"small\"\r\n                    status=\"{{ element[column].status }}\"\r\n                  >\r\n                    <span class=\"fs-10\">\r\n                      {{ element[column].percentageTrend }}%\r\n                    </span>\r\n                    @if(element[column].trendStatus == 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\">\r\n                    </ds-icon>\r\n                    } @if(element[column].trendStatus != 'up'){\r\n                    <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n                    </ds-icon>\r\n                    }\r\n                  </ds-status>\r\n                </div>\r\n\r\n                <ng-container *ngSwitchCase=\"'actions'\">\r\n                  <div class=\"d-flex justify-content-start gap-2\">\r\n                    <ng-container\r\n                      *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n                    >\r\n                      <ng-container\r\n                        *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                      >\r\n                        <ds-button\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n                          shape=\"outline\"\r\n                          size=\"small\"\r\n                        >\r\n                          <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                            {{ action?.actionName | translate }}\r\n                          </span>\r\n                        </ds-button>\r\n\r\n                        <ds-button\r\n                          (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                          *ngIf=\"action === Actions.ALLOCATE\"\r\n                          icon\r\n                          size=\"small\"\r\n                        >\r\n                          <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                        </ds-button>\r\n                        <ng-container\r\n                          *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                        >\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                  <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                    *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                    <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                  </ds-button>\r\n                                  }@else { -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                          </ds-button>\r\n                          <!-- } -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                            icon\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"trash\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CHART\"\r\n                            color=\"transparent\"\r\n                            size=\"small\"\r\n                          >\r\n                            <ds-icon\r\n                              class=\"fc-coral fs-15\"\r\n                              icon=\"chart-o\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          @if (element.hasOwnProperty('canTakeAction')) {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          } @else {\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.APPROVE\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.approve\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            shape=\"outline\"\r\n                            color=\"dark-gray\"\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            size=\"small\"\r\n                            *ngIf=\"action?.action === Actions.REJECT\"\r\n                            shape=\"outline\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ \"global.reject\" | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          }\r\n\r\n                          <ds-button\r\n                            *ngIf=\"action?.action === Actions.DETAILS\"\r\n                            shape=\"text\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 underline\"> View Details </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.PREPARE\"\r\n                            color=\"light-gray\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12 fc-black\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-12 fc-black\"\r\n                              icon=\"settings\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                            size=\"small\"\r\n                          >\r\n                            <span class=\"fs-12\">\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                            <ds-icon\r\n                              class=\"fs-16\"\r\n                              icon=\"media-play\"\r\n                              slot=\"prefix\"\r\n                            ></ds-icon>\r\n                          </ds-button>\r\n\r\n                          <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                  *ngIf=\"action?.action === 'customAction'\"\r\n                                    (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                    ></ds-button> -->\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-button\r\n                            (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                            *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                            [class]=\"action?.actionColor\"\r\n                            [color]=\"action?.actionColor\"\r\n                            shape=\"{{ action?.actionShape }}\"\r\n                            size=\"small\"\r\n                          >\r\n                            <span\r\n                              class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n                            >\r\n                              {{ action?.actionName | translate }}\r\n                            </span>\r\n                          </ds-button>\r\n                          <ds-status\r\n                            *ngIf=\"action?.action === Actions.STATUS\"\r\n                            [status]=\"action?.Status.status\"\r\n                            class=\"fs-12 statusAction w-100\"\r\n                          >\r\n                            <span class=\"fc-black\">\r\n                              {{ action?.Status.title | translate }}\r\n                            </span>\r\n                          </ds-status>\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                      <ds-button\r\n                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                        [matMenuTriggerFor]=\"statusMenu\"\r\n                        class=\"dots\"\r\n                        shape=\"text\"\r\n                        size=\"small\"\r\n                      >\r\n                        <ds-icon\r\n                          class=\"fs-20 fc-dark-gray\"\r\n                          icon=\"dots\"\r\n                        ></ds-icon>\r\n                      </ds-button>\r\n\r\n                      <mat-menu #statusMenu=\"matMenu\">\r\n                        <button\r\n                          (click)=\"action?.onClick(element)\"\r\n                          *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n                          mat-menu-item\r\n                        >\r\n                          <span class=\"fs-12 fc-black\"\r\n                            >{{ action?.actionName | translate }}\r\n                          </span>\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'specs'\">\r\n                  @if(element?.[column]){\r\n                  <span\r\n                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    [matMenuTriggerFor]=\"specsMenu\"\r\n                    [ngClass]=\"columnsConfig[i].type\"\r\n                    class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                  >\r\n                    {{ columnsConfig[i].clickableText | translate }}\r\n                  </span>\r\n                  }\r\n\r\n                  <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                    <span class=\"fs-14\">\r\n                      {{ element[column] }}\r\n                    </span>\r\n                  </mat-menu>\r\n                </ng-container>\r\n\r\n                <!--<div\r\n                                    *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"d-flex gap-1\">\r\n                                {{ element[column] | json }}\r\n                                <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                    <div\r\n                                            class=\"progress-container default-progress medium radius-0 \"\r\n                                            matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                        <div\r\n                                                [style.width.%]=\"item.value\"\r\n                                                class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                            </div>-->\r\n\r\n                <span\r\n                  *ngSwitchDefault\r\n                  [ngClass]=\"columnsConfig[i].type\"\r\n                  class=\"text-nowrap\"\r\n                  matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                  matTooltipPosition=\"below\"\r\n                >\r\n                  {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == \"ar\"\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : \"-\"\r\n                  }}\r\n                </span>\r\n              </ng-container>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n        }\r\n      </ng-container>\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n      <tr\r\n        (click)=\"clickRow(row)\"\r\n        *matRowDef=\"let row; columns: columns\"\r\n        [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n        mat-row\r\n        role=\"button\"\r\n      ></tr>\r\n    </table>\r\n    }\r\n  </ng-container>\r\n  } @if(isLoading){\r\n  <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n  } @if(!isLoading && dataSource.filteredData?.length == 0){\r\n  <ds-message\r\n    [label]=\"'global.noItemsToDisplay' | translate\"\r\n    type=\"emptyList\"\r\n  ></ds-message>\r\n  }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n  #paginator\r\n  (page)=\"pageChanged($event)\"\r\n  [length]=\"totalElements\"\r\n  [pageIndex]=\"currentPage\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n  [pageSize]=\"pageSize\"\r\n  aria-label=\"Select page\"\r\n  showFirstLastButtons\r\n>\r\n</mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$4.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
                 type: ViewChild,
                 args: ['table', { read: ElementRef }]
@@ -5152,7 +5156,7 @@ class ApprovalsWorkflowComponent {
         this.coreService.approvals = JSON.stringify(this.approvals);
         this.sidenavService.publish('open', ApprovalsComponent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ApprovalsWorkflowComponent, isStandalone: true, selector: "lib-approvals-workflow", inputs: { section: "section", form: "form" }, ngImport: i0, template: "<ds-button\r\n  color=\"white\" shape=\"text\" square size=\"small\"\r\n  (click)=\"getApprovals()\">\r\n  <slot name=\"prefix\">\r\n    @if (loading) {\r\n      <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n    } @else {\r\n      <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n    }\r\n  </slot>\r\n</ds-button>\r\n", styles: ["::ng-deep .sat-popover-container.sat-popover-before .default-popover:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, decorators: [{
@@ -5160,7 +5164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{ selector: 'lib-approvals-workflow', standalone: true, imports: [
                         SatPopoverModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ds-button\r\n  color=\"white\" shape=\"text\" square size=\"small\"\r\n  (click)=\"getApprovals()\">\r\n  <slot name=\"prefix\">\r\n    @if (loading) {\r\n      <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n    } @else {\r\n      <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n    }\r\n  </slot>\r\n</ds-button>\r\n", styles: ["::ng-deep .sat-popover-container.sat-popover-before .default-popover:before{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2.ToastrService }], propDecorators: { section: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$1.ToastrService }], propDecorators: { section: [{
                 type: Input
             }], form: [{
                 type: Input
@@ -5218,7 +5222,7 @@ class ActionButtonsComponent {
     submitForm(action, section) {
         const lastSection = this.sections[this.sections.length - 1];
         if (lastSection.body.details.decision) {
-            lastSection.body.details.decision = { key: action };
+            lastSection.body.details.decision['key'] = action;
         }
         this.isSubmitting[action] = true;
         this.submittingForm = true;
@@ -5258,7 +5262,7 @@ class ActionButtonsComponent {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }, { token: CoreService }, { token: i1$1.MatDialog }, { token: i2.ToastrService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }, { token: CoreService }, { token: i1$1.MatDialog }, { token: i2$1.ToastrService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ActionButtonsComponent, isStandalone: true, selector: "lib-action-buttons", inputs: { lovOptions: "lovOptions", lovType: "lovType", fieldsForm: "fieldsForm", form: "form", section: "section", sections: "sections", showApprovalCycle: "showApprovalCycle", customCall: "customCall" }, outputs: { resetFormEmit: "resetFormEmit", customCallEmit: "customCallEmit" }, ngImport: i0, template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            loading=\"{{isSubmitting[item.value]}}\"\r\n            [ngClass]=\"{'disabled': !actionStates[item.value] || submittingForm}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !actionStates['SUBMIT'] || submittingForm}\"\r\n        loading=\"{{isSubmitting['SUBMIT']}}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ApprovalsWorkflowComponent, selector: "lib-approvals-workflow", inputs: ["section", "form"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, decorators: [{
@@ -5270,7 +5274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgForOf,
                         ApprovalsWorkflowComponent
                     ], template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            loading=\"{{isSubmitting[item.value]}}\"\r\n            [ngClass]=\"{'disabled': !actionStates[item.value] || submittingForm}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !actionStates['SUBMIT'] || submittingForm}\"\r\n        loading=\"{{isSubmitting['SUBMIT']}}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }, { type: CoreService }, { type: i1$1.MatDialog }, { type: i2.ToastrService }, { type: i0.ChangeDetectorRef }], propDecorators: { lovOptions: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }, { type: CoreService }, { type: i1$1.MatDialog }, { type: i2$1.ToastrService }, { type: i0.ChangeDetectorRef }], propDecorators: { lovOptions: [{
                 type: Input
             }], lovType: [{
                 type: Input
@@ -6163,8 +6167,8 @@ class PreviousRequestsComponent {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i1$1.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i2.ToastrService }, { token: CoreI18nService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      }\r\n      @if (!previousRequests?.length && !loading) {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n  <ng-template #emptyMessage>\r\n    <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n  </ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i1$1.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i2$1.ToastrService }, { token: CoreI18nService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      }\r\n      @if (!previousRequests?.length && !loading) {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n  <ng-template #emptyMessage>\r\n    <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n  </ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, decorators: [{
             type: Component,
@@ -6181,7 +6185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         CustomSearchableComponent,
                         CdkConnectedOverlay
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      }\r\n      @if (!previousRequests?.length && !loading) {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n  <ng-template #emptyMessage>\r\n    <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n  </ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SidenavService }, { type: CoreService }, { type: i2.ToastrService }, { type: CoreI18nService }, { type: i4.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SidenavService }, { type: CoreService }, { type: i2$1.ToastrService }, { type: CoreI18nService }, { type: i4.FormBuilder }] });
 
 const StatusMap$1 = {
     [FORM_STATUS_REJECTED]: { class: 'danger', icon: 'close' },
@@ -6395,7 +6399,7 @@ class ServiceHeaderComponent {
     showPreviousRequests() {
         this.sidenavService.publish('open', PreviousRequestsComponent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }, { token: i2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", isReadOnly: "isReadOnly", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceFaq: "serviceFaq" }, providers: [FeedBackService,
             { provide: MAT_DIALOG_DATA, useValue: {} },
         ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!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){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{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;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
@@ -6413,7 +6417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [FeedBackService,
                         { provide: MAT_DIALOG_DATA, useValue: {} },
                     ], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!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){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{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;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }, { type: i2.ToastrService }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }, { type: i2$1.ToastrService }], propDecorators: { form: [{
                 type: Input
             }], showHistory: [{
                 type: Input
@@ -6942,7 +6946,7 @@ class HeaderComponent {
     }
     location = location;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$3.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$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: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -7439,7 +7443,7 @@ class RequestDetailsSectionComponent {
             },
             {
                 label: 'Quantity',
-                type: 'text'
+                type: 'formId'
             },
             {
                 label: 'Capacity',