bpm-core 0.0.129 → 0.0.130

package/fesm2022/bpm-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, HostListener, ViewChild, Optional, Self, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, ViewChild, HostListener, Optional, Self, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import { Subject, BehaviorSubject, ReplaySubject, catchError, throwError, switchMap, from, fromEvent, debounceTime } from 'rxjs';
@@ -8,7 +8,7 @@ import { HttpHeaders } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/common';
-import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgFor, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgFor, NgComponentOutlet, DOCUMENT, JsonPipe, isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/material/core';
 import { MAT_DATE_FORMATS, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
 import * as i4 from '@angular/forms';
@@ -16,9 +16,9 @@ import { NG_VALUE_ACCESSOR, FormControl, NgForm, ControlContainer, Validators, N
 import * as i3 from '@angular/platform-browser';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i2$1 from 'ngx-toastr';
-import * as i1$4 from '@angular/material/datepicker';
+import * as i1$3 from '@angular/material/datepicker';
 import { MatDatepickerToggle, MatDatepickerInput, MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
-import * as i1$3 from '@angular/material/form-field';
+import * as i7 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
 import * as i8 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
@@ -27,7 +27,7 @@ import { SatPopoverModule } from '@ncstate/sat-popover';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { format } from 'date-fns';
-import * as i1$5 from '@angular/material/autocomplete';
+import * as i1$4 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { NgxMaskDirective } from 'ngx-mask';
 import * as i2$2 from 'ngx-intl-tel-input-gg';
@@ -39,7 +39,7 @@ import * as i6 from '@angular/material/button-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
-import * as i1$6 from '@angular/material/paginator';
+import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginatorIntl, MatPaginator } from '@angular/material/paginator';
 import * as i2$6 from '@angular/router';
 import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
@@ -55,9 +55,7 @@ import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
 import * as i2$5 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import { MatSort } from '@angular/material/sort';
-import * as i2$7 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i2$8 from '@angular/material/expansion';
+import * as i2$7 from '@angular/material/expansion';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
 import * as i3$1 from 'ng-dynamic-component';
@@ -2179,107 +2177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @angular-eslint/directive-selector */
-/* eslint-disable @typescript-eslint/no-empty-function */
-class EnOnlyDirective {
-    specialKeys = ['Backspace', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Control'];
-    constructor() {
-    }
-    regex = /^[~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9- ]+$/;
-    onKeyDown(event) {
-        const text = event.key;
-        const english = /^[a-zA-Z ]*$/;
-        if (this.regex.test(text) || text == " " || text == 'Backspace' || (event.ctrlKey && (text == 'c' || text == 'ؤ' || text == 'v' || text == 'ر' || text == 'x' || text == 'ء' || text == 'a' || text == 'ش' || text == 'z' || text == 'ئ'))) {
-            return;
-        }
-        else {
-            event.preventDefault();
-        }
-    }
-    onPaste(event) {
-        const data = event.clipboardData.getData('text/plain');
-        if (!(this.regex.test(data))) {
-            event.preventDefault();
-        }
-    }
-    onDrop(event) {
-        const data = event.dataTransfer.getData("text/plain");
-        if (!(this.regex.test(data))) {
-            event.preventDefault();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EnOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: EnOnlyDirective, isStandalone: true, selector: "[enOnly]", host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EnOnlyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[enOnly]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable @angular-eslint/directive-selector */
-class ArOnlyDirective {
-    specialKeys = ['Backspace', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Control'];
-    constructor() {
-    }
-    regex = /^[~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?0-9-]+$/;
-    onKeyDown(event) {
-        const text = event.key;
-        if (event.ctrlKey && (text == 'c' || text == 'v' || text == 'x' || text == 'a' || text == 'z')) {
-            return;
-        }
-        const arabicAlphabetDigits = /[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]|[\u0200]|[\u00A0]/g;
-        if (arabicAlphabetDigits.test(text) || text == " " || text == 'Backspace' || this.regex.test(text)) {
-            return;
-        }
-        else {
-            event.preventDefault();
-        }
-    }
-    onPaste(event) {
-        const data = event.clipboardData.getData('text/plain');
-        if (!(/[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]|[\u0200]|[\u00A0]/g.test(data))) {
-            event.preventDefault();
-        }
-    }
-    onDrop(event) {
-        const data = event.dataTransfer.getData("text/plain");
-        if (!(/[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]|[\u0200]|[\u00A0]/g.test(data))) {
-            event.preventDefault();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ArOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ArOnlyDirective, isStandalone: true, selector: "[arOnly]", host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ArOnlyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[arOnly]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
 const MatDatePickerImports = [
     MatDatepickerToggle,
     MatDatepickerInput,
@@ -2299,10 +2196,6 @@ const Shareds = [
     NgClass,
     TranslatePipe
 ];
-const TextLanguageDirectives = [
-    EnOnlyDirective,
-    ArOnlyDirective
-];
 
 class CheckBoxComponent extends ControlValueAccessorDirective {
     containTerms;
@@ -2387,7 +2280,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
     isLengthGreaterThan4 = new EventEmitter();
     disabled = false;
     displayedLabel = 'description';
-    key = 'description';
+    key = 'value';
     floatLabel = 'auto';
     className = 'bordered-input';
     destroyRef = inject(DestroyRef);
@@ -2460,7 +2353,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]=\"required || mandatory ? false : true\"\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]=\"placeholder || (label ? ('select' | translate) + ' ' + 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  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n</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: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.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,[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: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], 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]=\"required || mandatory ? false : true\"\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]=\"placeholder || (label ? ('select' | translate) + ' ' + 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  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}::ng-deep [dir=rtl] .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding-right:var(--input-padding)!important}::ng-deep [dir=rtl] .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:var(--input-padding)!important}\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: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.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,[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: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CustomSearchableComponent, decorators: [{
             type: Component,
@@ -2477,7 +2370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => CustomSearchableComponent),
                             multi: true,
                         },
-                    ], 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]=\"required || mandatory ? false : true\"\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]=\"placeholder || (label ? ('select' | translate) + ' ' + 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  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\n"] }]
+                    ], 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]=\"required || mandatory ? false : true\"\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]=\"placeholder || (label ? ('select' | translate) + ' ' + 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  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}::ng-deep [dir=rtl] .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding-right:var(--input-padding)!important}::ng-deep [dir=rtl] .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:var(--input-padding)!important}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], selectedValue: [{
@@ -2611,7 +2504,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]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n\r\n    <div class=\"datePicker justify-content-between\">\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]=\"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-form-field>\r\n    </div>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i1$4.MatDatepickerModule }, { kind: "directive", type: i1$4.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i2.MatNativeDateModule }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n\r\n    <div class=\"datePicker justify-content-between\">\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]=\"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-form-field>\r\n    </div>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\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: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: "19.2.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2785,7 +2678,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]=\"required || mandatory ? false : true\" [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@if (control.touched) {\r\n  <mat-error \r\n    app-validation-errors \r\n    [errors]=\"control.errors\" \r\n    [customErrorMessages]=\"customErrorMessages\">\r\n  </mat-error>\r\n}\r\n\r\n\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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$4.MatDatepickerModule }, { kind: "directive", type: i1$4.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2.MatNativeDateModule }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.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,[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]=\"required || mandatory ? false : true\" [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@if (control.touched) {\r\n  <mat-error \r\n    app-validation-errors \r\n    [errors]=\"control.errors\" \r\n    [customErrorMessages]=\"customErrorMessages\">\r\n  </mat-error>\r\n}\r\n\r\n\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: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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,[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: "19.2.1", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -2822,11 +2715,12 @@ class InputMapFilterDirective {
     ngControl;
     mapFn;
     filterFn;
+    maxLength;
     constructor(ngControl) {
         this.ngControl = ngControl;
     }
     handleKeydown(event) {
-        if (!this.mapFn && !this.filterFn)
+        if (!this.shouldProceed())
             return true;
         const key = event.key;
         const input = event.target;
@@ -2873,7 +2767,7 @@ class InputMapFilterDirective {
         return false;
     }
     handlePaste(event) {
-        if (!this.mapFn && !this.filterFn)
+        if (!this.shouldProceed())
             return;
         const pasted = event.clipboardData?.getData('text') || '';
         const input = event.target;
@@ -2887,7 +2781,7 @@ class InputMapFilterDirective {
         }
     }
     handleDrop(event) {
-        if (!this.mapFn && !this.filterFn)
+        if (!this.shouldProceed())
             return;
         const droppedText = event.dataTransfer?.getData('text') || '';
         const input = event.target;
@@ -2900,18 +2794,33 @@ class InputMapFilterDirective {
             event.preventDefault();
         }
     }
+    shouldProceed() {
+        if (this.mapFn || this.filterFn)
+            return true;
+        if (this.hasMaxLength)
+            return true;
+        return false;
+    }
+    hasMaxLength() {
+        return typeof +this.maxLength === 'number' && !isNaN(+this.maxLength);
+    }
     updateValue(input, char, currentValue, nextValue, caretPos, event) {
+        if (this.hasMaxLength && nextValue.length > +this.maxLength)
+            return;
         if (char ? (!this.filterFn || this.filterFn(char, currentValue, nextValue, event)) : true) {
             const value = this.mapFn ? this.mapFn(char, currentValue, nextValue) : nextValue;
             input.value = value;
             if (this.ngControl?.control) {
                 this.ngControl.control.setValue(value);
             }
+            else {
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            }
             input.setSelectionRange(caretPos, caretPos);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputMapFilterDirective, deps: [{ token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: InputMapFilterDirective, isStandalone: true, selector: "[inputMapFilter]", inputs: { mapFn: "mapFn", filterFn: "filterFn" }, host: { listeners: { "keydown": "handleKeydown($event)", "paste": "handlePaste($event)", "drop": "handleDrop($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: InputMapFilterDirective, isStandalone: true, selector: "[inputMapFilter]", inputs: { mapFn: "mapFn", filterFn: "filterFn", maxLength: "maxLength" }, host: { listeners: { "keydown": "handleKeydown($event)", "paste": "handlePaste($event)", "drop": "handleDrop($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputMapFilterDirective, decorators: [{
             type: Directive,
@@ -2927,6 +2836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], filterFn: [{
                 type: Input
+            }], maxLength: [{
+                type: Input
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -2944,6 +2855,7 @@ class InputComponent extends ControlValueAccessorDirective {
     iconPrefixName;
     iconSuffixName;
     emitedChangedValue1 = new EventEmitter();
+    maxLength;
     /**
      * A mapping function that modifies the input value during typing, pasting, or dropping text.
      * You can use it to modify the full input value **before it appears** (e.g., for auto-capitalization,
@@ -3030,19 +2942,18 @@ class InputComponent extends ControlValueAccessorDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { floatLabel: "floatLabel", className: "className", iconPrefixName: "iconPrefixName", iconSuffixName: "iconSuffixName", emitedChangedValue1: "emitedChangedValue1", mapFn: "mapFn", filterFn: "filterFn" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { floatLabel: "floatLabel", className: "className", iconPrefixName: "iconPrefixName", iconSuffixName: "iconSuffixName", emitedChangedValue1: "emitedChangedValue1", maxLength: "maxLength", mapFn: "mapFn", filterFn: "filterFn" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\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      [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\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      [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\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 || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\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-error \r\n    app-validation-errors \r\n    [errors]=\"control.errors\" \r\n    [customErrorMessages]=\"customErrorMessages\">\r\n  </mat-error>\r\n</mat-form-field>\r\n\r\n} @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}\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,[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" }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: InputMapFilterDirective, selector: "[inputMapFilter]", inputs: ["mapFn", "filterFn"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\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    <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 || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\r\n      [maxLength]=\"maxLength\"\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-error \r\n    app-validation-errors \r\n    [errors]=\"control.errors\" \r\n    [customErrorMessages]=\"customErrorMessages\">\r\n  </mat-error>\r\n</mat-form-field>\r\n\r\n} @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}\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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" }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: InputMapFilterDirective, selector: "[inputMapFilter]", inputs: ["mapFn", "filterFn", "maxLength"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-input', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
                         MatHint,
-                        ...TextLanguageDirectives,
                         ...Shareds,
                         ...MatFormImports,
                         InputMapFilterDirective
@@ -3052,7 +2963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\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      [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\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      [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\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 || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\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-error \r\n    app-validation-errors \r\n    [errors]=\"control.errors\" \r\n    [customErrorMessages]=\"customErrorMessages\">\r\n  </mat-error>\r\n</mat-form-field>\r\n\r\n} @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}\r\n" }]
+                    ], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\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    <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 || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n      inputMapFilter\r\n      [mapFn]=\"mapFn\"\r\n      [filterFn]=\"filterFn\"\r\n      [maxLength]=\"maxLength\"\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-error \r\n    app-validation-errors \r\n    [errors]=\"control.errors\" \r\n    [customErrorMessages]=\"customErrorMessages\">\r\n  </mat-error>\r\n</mat-form-field>\r\n\r\n} @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}\r\n" }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3063,6 +2974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], emitedChangedValue1: [{
                 type: Input
+            }], maxLength: [{
+                type: Input
             }], mapFn: [{
                 type: Input
             }], filterFn: [{
@@ -3100,6 +3013,10 @@ class InputFilters {
         return /^[0-9]+$/.test(char);
     }
     ;
+    static decimalDigitsOnly(char, current, next, event) {
+        return /^\d*\.?\d*$/.test(next);
+    }
+    ;
     /**
      * Creates a new `PatternBuilder` instance for building a custom input filter.
      *
@@ -3189,72 +3106,6 @@ class InputMappers {
     ;
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @angular-eslint/directive-selector */
-class NumberDirective {
-    el;
-    decimals = 0;
-    constructor(el) {
-        this.el = el;
-    }
-    check(value) {
-        if (this.decimals <= 0) {
-            // Updated RegExp to allow for decimal
-            return String(value).match(new RegExp(/^\d*\.?\d*$/));
-        }
-        else {
-            const regExpString = "^\\s*((\\d+(\\.\\d{0," +
-                this.decimals +
-                "})?)|((\\d*(\\.\\d{1," +
-                this.decimals +
-                "}))))\\s*$";
-            return String(value).match(new RegExp(regExpString));
-        }
-    }
-    onKeyPress(event) {
-        const char = event.key;
-        const currentValue = this.el.nativeElement.value;
-        const nextValue = currentValue + char;
-        if (nextValue !== '' && !this.check(nextValue)) {
-            event.preventDefault();
-        }
-    }
-    run(oldValue) {
-        setTimeout(() => {
-            const currentValue = this.el.nativeElement.value;
-            if (currentValue !== '' && !this.check(currentValue)) {
-                this.el.nativeElement.value = oldValue;
-            }
-        });
-    }
-    onKeyDown() {
-        this.run(this.el.nativeElement.value);
-    }
-    onPaste() {
-        this.run(this.el.nativeElement.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: NumberDirective, isStandalone: true, selector: "[numberOnly]", inputs: { decimals: "decimals" }, host: { listeners: { "keypress": "onKeyPress($event)", "keydown": "onKeyDown($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NumberDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[numberOnly]",
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { decimals: [{
-                type: Input
-            }], onKeyPress: [{
-                type: HostListener,
-                args: ['keypress', ['$event']]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ["keydown", ["$event"]]
-            }], onPaste: [{
-                type: HostListener,
-                args: ["paste", ["$event"]]
-            }] } });
-
 /* eslint-disable @angular-eslint/use-lifecycle-interface */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @angular-eslint/component-selector */
@@ -3267,6 +3118,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
     allowedPattern = '';
     destroyRef = inject(DestroyRef);
     emitedChangedValue = new EventEmitter();
+    onlyNumbers = InputFilters.decimalDigitsOnly;
     ngOnInit() {
         super.ngOnInit();
         this.actionStateService.resetAction$
@@ -3284,12 +3136,12 @@ 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]=\"required || mandatory ? false : true\" [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 || (label ? ('enter' | translate) + ' ' + label : '')\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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  }\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,[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" }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\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      <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 || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n        inputMapFilter\r\n        [filterFn]=\"onlyNumbers\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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  }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: InputMapFilterDirective, selector: "[inputMapFilter]", inputs: ["mapFn", "filterFn", "maxLength"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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" }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-input-number', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        NumberDirective,
+                        InputMapFilterDirective,
                         ...Shareds,
                         ...MatFormImports
                     ], providers: [
@@ -3298,7 +3150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => InputNumberComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\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 || (label ? ('enter' | translate) + ' ' + label : '')\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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  }\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]=\"required || mandatory ? false : true\" [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      <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 || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n        inputMapFilter\r\n        [filterFn]=\"onlyNumbers\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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  }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3343,7 +3195,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]=\"required || mandatory ? false : true\" [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 || (label ? ('enter' | translate) + ' ' + label : '')\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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  }\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,[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" }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\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 || (label ? ('enter' | translate) + ' ' + label : '')\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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  }\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,[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" }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
@@ -3537,7 +3389,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]=\"required || mandatory ? false : true\" [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 || (label ? ('enter' | translate) + ' ' + label : '')\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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]=\"'currency'\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\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,[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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  <mat-form-field\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 || (label ? ('enter' | translate) + ' ' + label : '')\"\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-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  </mat-form-field>\r\n  } @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]=\"'currency'\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\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,[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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
@@ -3646,11 +3498,11 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
     floatLabel = 'auto';
     error;
     selected = false;
-    selectedEmp = new EventEmitter();
-    onInputChange = new EventEmitter();
+    /**
+     * Emits the full details of the selected employee.
+     */
+    selectedEmployee = new EventEmitter();
     showEdit = false;
-    editDirectManger = new EventEmitter();
-    deleteDirectManger = new EventEmitter();
     arrayList = [];
     isUniqueUsers = false;
     userAlreadyExist = false;
@@ -3724,6 +3576,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
         return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + id;
     }
     selectOption(object, ev) {
+        this.selectedEmployee.emit(object);
         if (!this.control.touched)
             this.onTouchedFn();
         this.userAlreadyExist = false;
@@ -3759,13 +3612,13 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SearchEmployeeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SearchEmployeeComponent, isStandalone: true, selector: "app-search-employee", inputs: { valueName: "valueName", className: "className", optional: "optional", data: "data", floatLabel: "floatLabel", error: "error", showEdit: "showEdit", arrayList: "arrayList", isUniqueUsers: "isUniqueUsers" }, outputs: { selectedEmp: "selectedEmp", onInputChange: "onInputChange", editDirectManger: "editDirectManger", deleteDirectManger: "deleteDirectManger", emitedDeletedValue: "emitedDeletedValue" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SearchEmployeeComponent, isStandalone: true, selector: "app-search-employee", inputs: { valueName: "valueName", className: "className", optional: "optional", data: "data", floatLabel: "floatLabel", error: "error", showEdit: "showEdit", arrayList: "arrayList", isUniqueUsers: "isUniqueUsers" }, outputs: { selectedEmployee: "selectedEmployee", emitedDeletedValue: "emitedDeletedValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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]=\"required || mandatory ? false : true\"\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        [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\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  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n\r\n  @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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.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$5.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: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.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]=\"required || mandatory ? false : true\"\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        [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\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  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n\r\n  @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: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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", "disabledInteractive"], 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: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
             type: Component,
@@ -3797,16 +3650,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], error: [{
                 type: Input
-            }], selectedEmp: [{
-                type: Output
-            }], onInputChange: [{
+            }], selectedEmployee: [{
                 type: Output
             }], showEdit: [{
                 type: Input
-            }], editDirectManger: [{
-                type: Output
-            }], deleteDirectManger: [{
-                type: Output
             }], arrayList: [{
                 type: Input
             }], isUniqueUsers: [{
@@ -3996,6 +3843,80 @@ class TextareaComponent extends ControlValueAccessorDirective {
     className;
     preventSpecailChar;
     maxLength;
+    /**
+     * A mapping function that modifies the input value during typing, pasting, or dropping text.
+     * You can use it to modify the full input value **before it appears** (e.g., for auto-capitalization,
+     * formatting, or custom replacements).
+     *
+     * This function is called:
+     * - On each **key press**, to determine how the input value should change when a character is typed.
+     * - On **paste**, to transform the pasted content before it’s applied.
+     * - On **drop**, to transform the dropped text before it’s applied.
+     *
+     * **Built-in mappers are available via the `InputMappers` utility class:**
+     *
+     * - `InputMappers.toUpperCase` — Transforms all input to UPPERCASE.
+     * - `InputMappers.toLowerCase` — Transforms all input to lowercase.
+     *
+     * @param char - The character(s) being inserted. This is:
+     *   - A single character (e.g., `'a'`) during typing.
+     *   - The full pasted string during paste events.
+     *   - The full dropped string during drop events.
+     * @param currentValue - The current value of the input **before** the change is applied.
+     * @param nextValue - The simulated value of the input **after** the character, paste, or drop is inserted, but before transformation.
+     *
+     * @returns The final string to use as the new input value.
+     *
+     * @example
+     * // Use a built-in mapper to force UPPERCASE input:
+     * this.mapFn = InputMappers.toUpperCase;
+     *
+     * @example
+     * // Custom mapper: Capitalize the first letter of each word
+     * this.mapFn = (char, current, next) =>
+     *   typeof next === 'string' ? next.replace(/\b\w/g, c => c.toUpperCase()) : next;
+     */
+    mapFn;
+    /**
+     * A filtering function that determines whether a character or string should be allowed into the input.
+     *
+     * This function is called during:
+     * - **Typing**: When a key is pressed to decide if the character should be accepted.
+     * - **Paste**: When text is pasted to decide if the entire pasted string should be accepted.
+     * - **Drop**: When text is dropped into the input to decide if it should be allowed.
+     *
+     * You can use it to reject unwanted characters (e.g. numbers, symbols) or block input entirely based
+     * on the current or predicted value.
+     *
+     * **Built-in filters are available via the `InputFilters` utility class:**
+     *
+     * - `InputFilters.arabicOnly` — Allows Arabic letters and digits, as well as common symbols.
+     * - `InputFilters.englishOnly` — Allows English letters and digits, as well as common symbols.
+     * - `InputFilters.digitsOnly` — Allows digits only (`0–9`), no letters or symbols.
+     * - You can also use `InputFilters.buildPattern()` to define a custom filter.
+     *
+     * @param char - The character(s) being inserted:
+     *   - A single typed character (e.g., `'a'`) during key presses
+     *   - The full pasted or dropped string during paste/drop
+     * @param currentValue - The current value of the input before the character or string is applied.
+     * @param nextValue - The simulated next value if the character or string were applied.
+     * @param event - The originating event triggering the input change. This can be a
+     *   `KeyboardEvent` (for typing), `ClipboardEvent` (for paste), or `DragEvent` (for drop).
+     *
+     * @returns `true` to allow the input, or `false` to block it.
+     *
+     *
+     * @example
+     * // Use a built-in filter to restrict to digits only
+     * this.filterFn = InputFilters.digitsOnly;
+     *
+     * @example
+     * // Custom filter: Allow only letters (no numbers or symbols)
+     * this.filterFn = (char, current, next, event) => {
+     *   return /^[a-zA-Z]+$/.test(char);
+     * };
+     */
+    filterFn;
     destroyRef = inject(DestroyRef);
     ngOnInit() {
         super.ngOnInit();
@@ -4008,33 +3929,37 @@ class TextareaComponent extends ControlValueAccessorDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { className: "className", preventSpecailChar: "preventSpecailChar", maxLength: "maxLength" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { className: "className", preventSpecailChar: "preventSpecailChar", maxLength: "maxLength", mapFn: "mapFn", filterFn: "filterFn" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea \r\n            arOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else if (type === 'enOnly'){\r\n          <textarea \r\n            enOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else {\r\n          <textarea \r\n            #textarea \r\n            [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n       }\r\n\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        <textarea \r\n          #textarea \r\n          [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n          [value]=\"value\"\r\n          (input)=\"setValue(textarea.value)\" \r\n          (blur)=\"onTouchedFn()\" \r\n          matInput\r\n          inputMapFilter\r\n          [mapFn]=\"mapFn\"\r\n          [filterFn]=\"filterFn\"\r\n          [maxLength]=\"maxLength\"\r\n          >\r\n        </textarea>\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: InputMapFilterDirective, selector: "[inputMapFilter]", inputs: ["mapFn", "filterFn", "maxLength"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-textarea', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
                         ...MatFormImports,
                         ...Shareds,
-                        ...TextLanguageDirectives
+                        InputMapFilterDirective
                     ], standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea \r\n            arOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else if (type === 'enOnly'){\r\n          <textarea \r\n            enOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else {\r\n          <textarea \r\n            #textarea \r\n            [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n       }\r\n\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n" }]
+                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        <textarea \r\n          #textarea \r\n          [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\"\r\n          [value]=\"value\"\r\n          (input)=\"setValue(textarea.value)\" \r\n          (blur)=\"onTouchedFn()\" \r\n          matInput\r\n          inputMapFilter\r\n          [mapFn]=\"mapFn\"\r\n          [filterFn]=\"filterFn\"\r\n          [maxLength]=\"maxLength\"\r\n          >\r\n        </textarea>\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], preventSpecailChar: [{
                 type: Input
             }], maxLength: [{
                 type: Input
+            }], mapFn: [{
+                type: Input
+            }], filterFn: [{
+                type: Input
             }] } });
 
 class ToggleButtonComponent extends ControlValueAccessorDirective {
@@ -4204,7 +4129,7 @@ class TableListComponent extends BaseComponent {
     sentBack() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n  <!-- #table  (scroll)=\"onPageChange($event)\" -->\r\n  <ng-container >\r\n    <!-- (matSortChange)=\"sortData($event)\" -->\r\n    <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n      <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n        <ng-container [matColumnDef]=\"column\">\r\n          <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n            {{i18n.translate(columnsConfig[i].label)}} </th>\r\n  \r\n          <td mat-cell  [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\"  *matCellDef=\"let element\">\r\n            <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n              <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n                *ngSwitchCase=\"'rout'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n                <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n                <span class=\"mx-2\">\r\n                  <!-- {{ element?.Date.from }}\r\n                  <ng-container *ngIf=\"element?.Date.to\">\r\n                  : {{ element?.Date.to }}\r\n                </ng-container> -->\r\n                  {{ element[column] | date: 'dd/MM/YYYY' }}\r\n                </span>\r\n              </span>\r\n  \r\n              <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n                <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n                  [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n              </div>\r\n  \r\n              <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n                <img [src]=\"element?.image\" alt=\"\">\r\n              </div>\r\n  \r\n              <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n                {{ element[column].label }}\r\n              </span>\r\n  \r\n  \r\n              <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n                <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n                  {{ item.label }}\r\n                  <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n                  <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n                [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n                {{ element[column] ? element[column] : '-' }}\r\n              </span>\r\n  \r\n              <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'group'\">\r\n                <span>{{element?.Group.groupName}}</span>\r\n                <span class=\"mx-2\"></span>\r\n                <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n              </div>\r\n  \r\n              <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n                <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n                  <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </span>\r\n                <div class=\"d-flex flex-column\">\r\n                  <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n                  <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'assigned'\">\r\n                <div class=\"img-card x-small circled-img\">\r\n                  <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n                </div>\r\n                <span class=\"mx-1\"></span>\r\n                <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n                <span class=\"sfi sfi-close text-color-coral\"></span>\r\n              </div>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'statusAction'\">\r\n                <div class=\"table-action\">\r\n  \r\n                  <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n                    </div>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n                    <span class=\"status approved\">\r\n                      Approved\r\n                    </span>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n                    <span class=\"status rejected\">\r\n                      Sent Back\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n                    <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n                      (click)=\"sentBack()\">\r\n                      <span class=\"sfi sfi-chat-o\"></span>\r\n                    </button>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n                    <span class=\"status pending\">\r\n                      Pending\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n  \r\n                    <div class=\"d-flex align-items-center mx-n1\">\r\n                      <div class=\"img-card circled-img x-small mx-1\">\r\n                        <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n                      </div>\r\n  \r\n                      <div class=\"d-flex flex-column mx-1\">\r\n                        <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n                        <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n  \r\n  \r\n                </div>\r\n              </ng-container>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'actions'\">\r\n  \r\n                <div class=\"d-flex justify-content-between mx-n2\">\r\n                  <ng-container *ngFor=\"let action of element[column]\">\r\n  \r\n                    <div class=\"flex-grow-1\">\r\n                      <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n                        <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n                        <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n                        <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n                        </button>\r\n                      </ng-container>\r\n                    </div>\r\n  \r\n                    <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n                      <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n                        [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n                        <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n                      </button>\r\n                      <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n                        <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n                          {{i18n.translate('createEmail')}} \r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n                          {{ i18n.translate('disableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email  && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n                          {{ i18n.translate('enableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n                          {{ i18n.translate('createCEP')}}\r\n                        </button>\r\n                        <!-- <button  *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n                          {{i18n.translate('disableEntryPermission')}}\r\n                        </button> -->\r\n                        <button  *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n                        (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n                        {{i18n.translate('deleteAccount')}}\r\n                      </button>\r\n\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n                          {{ i18n.translate('extendAccount')}}\r\n                        </button>\r\n                        <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n                          {{ i18n.translate('updateEmploymentInformation')}}\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n  \r\n              <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n                {{ element[column] }}\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loading\">\r\n              <span class=\" d-block loading-bg\"></span>\r\n            </ng-container>\r\n  \r\n          </td>\r\n  \r\n  \r\n        </ng-container>\r\n      </ng-container>\r\n  \r\n      <tr mat-header-row  *matHeaderRowDef=\"columns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n    </table>\r\n  </ng-container>\r\n  <!-- <ng-container *ngIf=\"loading\">\r\n    <span>loading...</span>\r\n  </ng-container> -->\r\n  <!--  <ng-container *ngIf=\"loading\">-->\r\n  <!--    <td *matCellDef=\"let element\" >loading....</td>-->\r\n  <!--  </ng-container>-->\r\n  <!--{{this.rows | json}}-->\r\n  \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n  <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n    [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n  <!-- style-paginator -->\r\n  <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n  <!-- #table  (scroll)=\"onPageChange($event)\" -->\r\n  <ng-container >\r\n    <!-- (matSortChange)=\"sortData($event)\" -->\r\n    <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n      <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n        <ng-container [matColumnDef]=\"column\">\r\n          <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n            {{i18n.translate(columnsConfig[i].label)}} </th>\r\n  \r\n          <td mat-cell  [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\"  *matCellDef=\"let element\">\r\n            <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n              <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n                *ngSwitchCase=\"'rout'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n                <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n                <span class=\"mx-2\">\r\n                  <!-- {{ element?.Date.from }}\r\n                  <ng-container *ngIf=\"element?.Date.to\">\r\n                  : {{ element?.Date.to }}\r\n                </ng-container> -->\r\n                  {{ element[column] | date: 'dd/MM/YYYY' }}\r\n                </span>\r\n              </span>\r\n  \r\n              <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n                <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n                  [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n              </div>\r\n  \r\n              <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n                <img [src]=\"element?.image\" alt=\"\">\r\n              </div>\r\n  \r\n              <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n                {{ element[column].label }}\r\n              </span>\r\n  \r\n  \r\n              <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n                <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n                  {{ item.label }}\r\n                  <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n                  <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n                [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n                {{ element[column] ? element[column] : '-' }}\r\n              </span>\r\n  \r\n              <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'group'\">\r\n                <span>{{element?.Group.groupName}}</span>\r\n                <span class=\"mx-2\"></span>\r\n                <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n              </div>\r\n  \r\n              <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n                <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n                  <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </span>\r\n                <div class=\"d-flex flex-column\">\r\n                  <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n                  <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'assigned'\">\r\n                <div class=\"img-card x-small circled-img\">\r\n                  <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n                </div>\r\n                <span class=\"mx-1\"></span>\r\n                <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n                <span class=\"sfi sfi-close text-color-coral\"></span>\r\n              </div>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'statusAction'\">\r\n                <div class=\"table-action\">\r\n  \r\n                  <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n                    </div>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n                    <span class=\"status approved\">\r\n                      Approved\r\n                    </span>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n                    <span class=\"status rejected\">\r\n                      Sent Back\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n                    <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n                      (click)=\"sentBack()\">\r\n                      <span class=\"sfi sfi-chat-o\"></span>\r\n                    </button>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n                    <span class=\"status pending\">\r\n                      Pending\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n  \r\n                    <div class=\"d-flex align-items-center mx-n1\">\r\n                      <div class=\"img-card circled-img x-small mx-1\">\r\n                        <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n                      </div>\r\n  \r\n                      <div class=\"d-flex flex-column mx-1\">\r\n                        <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n                        <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n  \r\n  \r\n                </div>\r\n              </ng-container>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'actions'\">\r\n  \r\n                <div class=\"d-flex justify-content-between mx-n2\">\r\n                  <ng-container *ngFor=\"let action of element[column]\">\r\n  \r\n                    <div class=\"flex-grow-1\">\r\n                      <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n                        <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n                        <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n                        <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n                        </button>\r\n                      </ng-container>\r\n                    </div>\r\n  \r\n                    <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n                      <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n                        [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n                        <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n                      </button>\r\n                      <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n                        <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n                          {{i18n.translate('createEmail')}} \r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n                          {{ i18n.translate('disableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email  && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n                          {{ i18n.translate('enableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n                          {{ i18n.translate('createCEP')}}\r\n                        </button>\r\n                        <!-- <button  *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n                          {{i18n.translate('disableEntryPermission')}}\r\n                        </button> -->\r\n                        <button  *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n                        (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n                        {{i18n.translate('deleteAccount')}}\r\n                      </button>\r\n\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n                          {{ i18n.translate('extendAccount')}}\r\n                        </button>\r\n                        <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n                          {{ i18n.translate('updateEmploymentInformation')}}\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n  \r\n              <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n                {{ element[column] }}\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loading\">\r\n              <span class=\" d-block loading-bg\"></span>\r\n            </ng-container>\r\n  \r\n          </td>\r\n  \r\n  \r\n        </ng-container>\r\n      </ng-container>\r\n  \r\n      <tr mat-header-row  *matHeaderRowDef=\"columns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n    </table>\r\n  </ng-container>\r\n  <!-- <ng-container *ngIf=\"loading\">\r\n    <span>loading...</span>\r\n  </ng-container> -->\r\n  <!--  <ng-container *ngIf=\"loading\">-->\r\n  <!--    <td *matCellDef=\"let element\" >loading....</td>-->\r\n  <!--  </ng-container>-->\r\n  <!--{{this.rows | json}}-->\r\n  \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n  <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n    [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n  <!-- style-paginator -->\r\n  <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableListComponent, decorators: [{
             type: Component,
@@ -4851,7 +4776,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => AttachmentSectionDataComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n    <ds-button icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"px-md-4 mt-3\">\r\n      <form [formGroup]=\"formGroup\">\r\n        <app-file-uploader\r\n          class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n          [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n          [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\"\r\n          [allowedExtensions]=\"dialogData?.data\"\r\n          [allAttachments]=\"dialogData?.attachments\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea\r\n          class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n          [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n          [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]=\"1\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"description\">\r\n        </app-textarea>\r\n\r\n        <app-textarea\r\n          class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n          [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\"\r\n          [label]=\"'comments' | translate\" [required]=\"false\" [minLength]=\"1\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"comments\">\r\n        </app-textarea>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n    <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\" [class.disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button\r\n      (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!formGroup?.value?.file?.attachmentId || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n      <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n        <span>{{ 'add' | translate }}</span>\r\n      </ng-container>\r\n      <ng-template #editTemplate>\r\n        <span>{{ 'edit' | translate }}</span>\r\n      </ng-template>\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"], dependencies: [{ kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n    <ds-button icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"px-md-4 mt-3\">\r\n      <form [formGroup]=\"formGroup\">\r\n        <app-file-uploader\r\n          class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n          [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n          [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [mandatory]=\"true\" [multiple]=\"false\"\r\n          [allowedExtensions]=\"dialogData?.data\"\r\n          [allAttachments]=\"dialogData?.attachments\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea\r\n          class=\"section-item d-block mt-4 mb-4\"\r\n          (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n          [label]=\"'description' | translate\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\"\r\n          formControlName=\"description\"\r\n          [mandatory]=\"dialogData.descriptionRequired\">\r\n        </app-textarea>\r\n\r\n        <app-textarea\r\n          class=\"section-item\"\r\n          (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\"\r\n          [label]=\"'comments' | translate\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\"\r\n          formControlName=\"comments\"\r\n          [mandatory]=\"dialogData.commentsRequired\">\r\n        </app-textarea>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n    <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\" [class.disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button\r\n      (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!formGroup?.value?.file?.attachmentId || uploading || !formGroup.valid)\">\r\n      <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n        <span>{{ 'add' | translate }}</span>\r\n      </ng-container>\r\n      <ng-template #editTemplate>\r\n        <span>{{ 'edit' | translate }}</span>\r\n      </ng-template>\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"], dependencies: [{ kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength", "mapFn", "filterFn"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AttachmentSectionDataComponent, decorators: [{
             type: Component,
@@ -4871,7 +4796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => AttachmentSectionDataComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n    <ds-button icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"px-md-4 mt-3\">\r\n      <form [formGroup]=\"formGroup\">\r\n        <app-file-uploader\r\n          class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n          [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n          [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\"\r\n          [allowedExtensions]=\"dialogData?.data\"\r\n          [allAttachments]=\"dialogData?.attachments\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea\r\n          class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n          [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n          [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]=\"1\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"description\">\r\n        </app-textarea>\r\n\r\n        <app-textarea\r\n          class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n          [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\"\r\n          [label]=\"'comments' | translate\" [required]=\"false\" [minLength]=\"1\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"comments\">\r\n        </app-textarea>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n    <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\" [class.disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button\r\n      (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!formGroup?.value?.file?.attachmentId || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n      <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n        <span>{{ 'add' | translate }}</span>\r\n      </ng-container>\r\n      <ng-template #editTemplate>\r\n        <span>{{ 'edit' | translate }}</span>\r\n      </ng-template>\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"] }]
+                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n    <ds-button icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"px-md-4 mt-3\">\r\n      <form [formGroup]=\"formGroup\">\r\n        <app-file-uploader\r\n          class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n          [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n          [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [mandatory]=\"true\" [multiple]=\"false\"\r\n          [allowedExtensions]=\"dialogData?.data\"\r\n          [allAttachments]=\"dialogData?.attachments\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea\r\n          class=\"section-item d-block mt-4 mb-4\"\r\n          (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n          [label]=\"'description' | translate\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\"\r\n          formControlName=\"description\"\r\n          [mandatory]=\"dialogData.descriptionRequired\">\r\n        </app-textarea>\r\n\r\n        <app-textarea\r\n          class=\"section-item\"\r\n          (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\"\r\n          [label]=\"'comments' | translate\" [maxLength]=\"500\"\r\n          [isReadOnly]=\"section?.header?.readOnly\"\r\n          formControlName=\"comments\"\r\n          [mandatory]=\"dialogData.commentsRequired\">\r\n        </app-textarea>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n    <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\" [class.disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button\r\n      (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!formGroup?.value?.file?.attachmentId || uploading || !formGroup.valid)\">\r\n      <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n        <span>{{ 'add' | translate }}</span>\r\n      </ng-container>\r\n      <ng-template #editTemplate>\r\n        <span>{{ 'edit' | translate }}</span>\r\n      </ng-template>\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"] }]
         }], 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]
@@ -4908,7 +4833,6 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
     isSortable = false;
     downloadAll = false;
     popupData = {};
-    isRequired = false;
     descriptionRequired;
     commentsRequired;
     allowedExtensions = '';
@@ -4968,7 +4892,6 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
             data: {
                 attachmentListData: null,
                 data: this.allowedExtensions,
-                isRequired: this.isRequired,
                 multiple: this.multiple,
                 attachments: this.attachments,
                 descriptionRequired: this.descriptionRequired,
@@ -5008,7 +4931,8 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
             data: {
                 attachmentListData: Object.assign(rowData),
                 data: this.allowedExtensions,
-                isRequired: this.isRequired,
+                descriptionRequired: this.descriptionRequired,
+                commentsRequired: this.commentsRequired,
                 multiple: this.multiple,
                 attachments: this.attachments,
             }
@@ -5050,14 +4974,14 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
         this.downloadActionClicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AttachmentSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", customDownload: "customDownload", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", isRequired: "isRequired", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { downloadActionClicked: "downloadActionClicked", emitedValue: "emitedValue" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", customDownload: "customDownload", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { downloadActionClicked: "downloadActionClicked", emitedValue: "emitedValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AttachmentSectionComponent),
                 multi: true,
             },
             { provide: MatPaginatorIntl, useFactory: getPaginatorIntl, deps: [CoreI18nService] }
-        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"(required || mandatory ? false : true) && !isReadOnly\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"'downloadAll' | translate\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [customDownload]=\"customDownload\"\r\n              (downloadActionClicked)=\"customDownloadAction($event)\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly ? attachments?.length : true) {\r\n  <div class=\"mt-2 p-0\">\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"(required || mandatory ? false : true) && !isReadOnly\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  \r\n    @if (!attachments?.length && !isReadOnly) {\r\n      <section\r\n        [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n        class=\"mb-2\"\r\n        [class.insideTableStyle]=\"insideTable\"\r\n        (click)=\"addAttachment()\">\r\n        <div\r\n          [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n          class=\"file-uploader-input\">\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n              width=\"41\"\r\n              height=\"38\"\r\n              viewBox=\"0 0 41 38\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n          <div class=\"f-14 fc-black fw-normal\">\r\n            <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n          </div>\r\n          <div class=\"fs-10 fc-dark-gray\">\r\n            {{ 'addMultiAttachments' | translate }}\r\n          </div>\r\n        </div>\r\n      </section>\r\n    }\r\n  \r\n    @if (attachments?.length) {\r\n      <div\r\n        class=\"table-responsive full\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"attachments\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n      >\r\n        <table mat-table [dataSource]=\"dataSource\">\r\n  \r\n          <!-- index Column -->\r\n          <ng-container matColumnDef=\"index\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n              <ds-button\r\n                [matTooltip]=\"'downloadAll' | translate\"\r\n                square icon size=\"small\"\r\n                (click)=\"downloadAllAttachments($event)\"\r\n                class=\"icon-btn-shadow\">\r\n                @if (loading) {\r\n                  <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n                } @else {\r\n                  <ds-icon\r\n                    icon=\"download\"\r\n                    class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                }\r\n              </ds-button>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n          </ng-container>\r\n  \r\n          <!-- Name Column -->\r\n          <ng-container matColumnDef=\"file\">\r\n            <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n              <app-file-uploader\r\n                [allowedExtensions]=\"allowedExtensions\"\r\n                [displayedFiles]=\"[element]\"\r\n                name=\"attachment\"\r\n                [showActions]=\"true\"\r\n                [isReadOnly]=\"true\"\r\n                [customDownload]=\"customDownload\"\r\n                (downloadActionClicked)=\"customDownloadAction($event)\"\r\n                [multiple]=\"true\">\r\n              </app-file-uploader>\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <!-- Description Column -->\r\n          <ng-container matColumnDef=\"description\">\r\n            <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n              <a\r\n                class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n                [hidden]=\"!element?.['fileDescription']\"\r\n                (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n                [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n                #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n                [matTooltip]=\"element?.['fileDescription']\">\r\n                {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n              </a>\r\n              <sat-popover\r\n                #fileDescriptionPopover\r\n                [anchor]=\"fileDescriptionAnchor\"\r\n                [hasBackdrop]=\"true\"\r\n                [restoreFocus]=\"false\"\r\n                verticalAlign=\"below\"\r\n                horizontalAlign=\"center\">\r\n                <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                  <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n                </div>\r\n              </sat-popover>\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <!-- Comment Column -->\r\n          <ng-container matColumnDef=\"comment\">\r\n            <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n              <a\r\n                class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n                [hidden]=\"!element?.['attachmentcomment']\"\r\n                (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n                [satPopoverAnchor]=\"commentsPopover\"\r\n                [matTooltip]=\"element?.['attachmentcomment']\"\r\n                #commentsAnchor=\"satPopoverAnchor\">\r\n                {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n              </a>\r\n              <sat-popover\r\n                #commentsPopover\r\n                [anchor]=\"commentsAnchor\"\r\n                [hasBackdrop]=\"true\"\r\n                [restoreFocus]=\"false\"\r\n                verticalAlign=\"below\"\r\n                horizontalAlign=\"center\">\r\n                <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                  <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n                </div>\r\n              </sat-popover>\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <ng-container matColumnDef=\"actions\">\r\n            <th mat-header-cell *matHeaderCellDef></th>\r\n            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n              @if (!isReadOnly) {\r\n                <td>\r\n                  <div class=\"d-flex gap-2\">\r\n                    <ds-button\r\n                      square\r\n                      icon\r\n                      size=\"small\"\r\n                      (click)=\"deleteAttachments(i, element)\"\r\n                      class=\"icon-btn-shadow\">\r\n                      <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                    </ds-button>\r\n  \r\n                    <ds-button\r\n                      square\r\n                      icon\r\n                      size=\"small\"\r\n                      (click)=\"editRow(element, i)\"\r\n                      class=\"icon-btn-shadow\">\r\n                      <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                    </ds-button>\r\n                  </div>\r\n                </td>\r\n              }\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n        </table>\r\n  \r\n        <mat-paginator\r\n          #paginator\r\n          [pageSizeOptions]=\"[5]\"\r\n          (page)=\"onPaginateChange($event)\"\r\n          [length]=\"attachments.length\"\r\n          [pageSize]=\"pageSize\"\r\n          showFirstLastButtons></mat-paginator>\r\n      </div>\r\n    }\r\n  \r\n    @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n      <div class=\"text-center full mt-3\">\r\n        <ds-button\r\n          shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n          [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n          (click)=\"addAttachment(); $event.stopPropagation()\">\r\n          <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n          {{ 'addAttachments' | translate }}\r\n        </ds-button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
             type: Component,
@@ -5089,7 +5013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         MatRowDef,
                         FormLabelComponent,
                         TranslatePipe
-                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"(required || mandatory ? false : true) && !isReadOnly\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ 'addMultiAttachments' | translate }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"'downloadAll' | translate\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [customDownload]=\"customDownload\"\r\n              (downloadActionClicked)=\"customDownloadAction($event)\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- Comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n        {{ 'addAttachments' | translate }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
+                    ], standalone: true, template: "@if (isReadOnly ? attachments?.length : true) {\r\n  <div class=\"mt-2 p-0\">\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"(required || mandatory ? false : true) && !isReadOnly\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  \r\n    @if (!attachments?.length && !isReadOnly) {\r\n      <section\r\n        [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n        class=\"mb-2\"\r\n        [class.insideTableStyle]=\"insideTable\"\r\n        (click)=\"addAttachment()\">\r\n        <div\r\n          [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n          class=\"file-uploader-input\">\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n              width=\"41\"\r\n              height=\"38\"\r\n              viewBox=\"0 0 41 38\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n          <div class=\"f-14 fc-black fw-normal\">\r\n            <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n          </div>\r\n          <div class=\"fs-10 fc-dark-gray\">\r\n            {{ 'addMultiAttachments' | translate }}\r\n          </div>\r\n        </div>\r\n      </section>\r\n    }\r\n  \r\n    @if (attachments?.length) {\r\n      <div\r\n        class=\"table-responsive full\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"attachments\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n      >\r\n        <table mat-table [dataSource]=\"dataSource\">\r\n  \r\n          <!-- index Column -->\r\n          <ng-container matColumnDef=\"index\">\r\n            <th mat-header-cell *matHeaderCellDef>\r\n              <ds-button\r\n                [matTooltip]=\"'downloadAll' | translate\"\r\n                square icon size=\"small\"\r\n                (click)=\"downloadAllAttachments($event)\"\r\n                class=\"icon-btn-shadow\">\r\n                @if (loading) {\r\n                  <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n                } @else {\r\n                  <ds-icon\r\n                    icon=\"download\"\r\n                    class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                }\r\n              </ds-button>\r\n            </th>\r\n            <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n          </ng-container>\r\n  \r\n          <!-- Name Column -->\r\n          <ng-container matColumnDef=\"file\">\r\n            <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n              <app-file-uploader\r\n                [allowedExtensions]=\"allowedExtensions\"\r\n                [displayedFiles]=\"[element]\"\r\n                name=\"attachment\"\r\n                [showActions]=\"true\"\r\n                [isReadOnly]=\"true\"\r\n                [customDownload]=\"customDownload\"\r\n                (downloadActionClicked)=\"customDownloadAction($event)\"\r\n                [multiple]=\"true\">\r\n              </app-file-uploader>\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <!-- Description Column -->\r\n          <ng-container matColumnDef=\"description\">\r\n            <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n              <a\r\n                class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n                [hidden]=\"!element?.['fileDescription']\"\r\n                (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n                [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n                #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n                [matTooltip]=\"element?.['fileDescription']\">\r\n                {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n              </a>\r\n              <sat-popover\r\n                #fileDescriptionPopover\r\n                [anchor]=\"fileDescriptionAnchor\"\r\n                [hasBackdrop]=\"true\"\r\n                [restoreFocus]=\"false\"\r\n                verticalAlign=\"below\"\r\n                horizontalAlign=\"center\">\r\n                <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                  <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n                </div>\r\n              </sat-popover>\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <!-- Comment Column -->\r\n          <ng-container matColumnDef=\"comment\">\r\n            <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n              <a\r\n                class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n                [hidden]=\"!element?.['attachmentcomment']\"\r\n                (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n                [satPopoverAnchor]=\"commentsPopover\"\r\n                [matTooltip]=\"element?.['attachmentcomment']\"\r\n                #commentsAnchor=\"satPopoverAnchor\">\r\n                {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n              </a>\r\n              <sat-popover\r\n                #commentsPopover\r\n                [anchor]=\"commentsAnchor\"\r\n                [hasBackdrop]=\"true\"\r\n                [restoreFocus]=\"false\"\r\n                verticalAlign=\"below\"\r\n                horizontalAlign=\"center\">\r\n                <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                  <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n                </div>\r\n              </sat-popover>\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <ng-container matColumnDef=\"actions\">\r\n            <th mat-header-cell *matHeaderCellDef></th>\r\n            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n              @if (!isReadOnly) {\r\n                <td>\r\n                  <div class=\"d-flex gap-2\">\r\n                    <ds-button\r\n                      square\r\n                      icon\r\n                      size=\"small\"\r\n                      (click)=\"deleteAttachments(i, element)\"\r\n                      class=\"icon-btn-shadow\">\r\n                      <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n                    </ds-button>\r\n  \r\n                    <ds-button\r\n                      square\r\n                      icon\r\n                      size=\"small\"\r\n                      (click)=\"editRow(element, i)\"\r\n                      class=\"icon-btn-shadow\">\r\n                      <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                    </ds-button>\r\n                  </div>\r\n                </td>\r\n              }\r\n            </td>\r\n          </ng-container>\r\n  \r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n        </table>\r\n  \r\n        <mat-paginator\r\n          #paginator\r\n          [pageSizeOptions]=\"[5]\"\r\n          (page)=\"onPaginateChange($event)\"\r\n          [length]=\"attachments.length\"\r\n          [pageSize]=\"pageSize\"\r\n          showFirstLastButtons></mat-paginator>\r\n      </div>\r\n    }\r\n  \r\n    @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n      <div class=\"text-center full mt-3\">\r\n        <ds-button\r\n          shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n          [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n          (click)=\"addAttachment(); $event.stopPropagation()\">\r\n          <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n          {{ 'addAttachments' | translate }}\r\n        </ds-button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], downloadActionClicked: [{
@@ -5102,8 +5026,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], downloadAll: [{
                 type: Input
-            }], isRequired: [{
-                type: Input
             }], descriptionRequired: [{
                 type: Input
             }], commentsRequired: [{
@@ -5117,8 +5039,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['paginator']
             }] } });
 
+/**
+ * Radio Component for selecting a single option from a list of options.
+ *
+ * Supports both Reactive Forms and Template-driven forms.
+ *
+ * Inputs:
+ * - `options`: Accepts an array of objects used as the selection list.
+ * - `displayedLabel`: Property name from the option object to display in the UI (default: `'description'`).
+ * - `key`: Property name from the option object used as the value (default: `'value'`).
+ * - `label`: Defines the label text shown above the radio buttons.
+ * - `isReadOnly`: Disables interaction and renders the component in a read-only display mode.
+ * - `mandatory`: Hides the "optional" label visually. Does not add validation.
+ * - `required`: Hides the "optional" label and also adds Angular's required validator.
+ * - `tooltip`: Displays a tooltip beside the label.
+ *
+ * Emits:
+ * - The selected value is emitted as an object with `key` and `value` properties:
+ *   ```ts
+ *   { key: option[key], value: option[displayedLabel] }
+ *   ```
+ *
+ * Example usage:
+ * ```html
+*<app-radio
+*   class="section-item"
+*   [isReadOnly]="isReadOnly"
+*   formControlName="radio"
+*   [options]="[]"
+*   label="Radio"
+*>
+*</app-radio>
+ * ```
+ */
 class RadioComponent extends ControlValueAccessorDirective {
-    options;
+    options = [];
+    displayedLabel = 'description';
+    key = 'value';
     destroyRef = inject(DestroyRef);
     ngOnInit() {
         super.ngOnInit();
@@ -5130,14 +5087,20 @@ class RadioComponent extends ControlValueAccessorDirective {
             }
         });
     }
+    onChange(event) {
+        const controlValue = { key: event?.value, value: event?.source?.ariaLabel };
+        this.setValue(controlValue);
+        if (this.control && !this.control.touched)
+            this.onTouchedFn();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RadioComponent, isStandalone: true, selector: "app-radio", inputs: { options: "options" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RadioComponent, isStandalone: true, selector: "app-radio", inputs: { options: "options", displayedLabel: "displayedLabel", key: "key" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-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"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-radio-group\r\n      [aria-label]=\"label\"\r\n      [value]=\"control?.value?.key\"\r\n      (change)=\"onChange($event)\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option[key]\"\r\n        [aria-label]=\"option[displayedLabel]\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx cursor-pointer\">\r\n          {{ option[displayedLabel] }}\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  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [insideTable]=\"insideTable\"\r\n    [label]=\"label\"\r\n    [value]=\"control.value?.value\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\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: "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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -5153,9 +5116,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => RadioComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-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"] }]
+                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <mat-radio-group\r\n      [aria-label]=\"label\"\r\n      [value]=\"control?.value?.key\"\r\n      (change)=\"onChange($event)\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option[key]\"\r\n        [aria-label]=\"option[displayedLabel]\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx cursor-pointer\">\r\n          {{ option[displayedLabel] }}\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  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [insideTable]=\"insideTable\"\r\n    [label]=\"label\"\r\n    [value]=\"control.value?.value\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n}\r\n", styles: [".mat-mdc-radio-group{grid-gap:2rem}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
+            }], displayedLabel: [{
+                type: Input
+            }], key: [{
+                type: Input
             }] } });
 
 /**
@@ -5238,7 +5205,7 @@ class MultiselectComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => MultiselectComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"multipleSelect\"\r\n  ></app-info-item>\r\n} @else {\r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <mat-select \r\n      (selectionChange)=\"selectionChange($event)\" \r\n      [value]=\"mapKeyValuePairsToKeys(value)\" \r\n      multiple \r\n      [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      [disabled]=\"isDisabled\"\r\n    >\r\n      <mat-select-trigger>\r\n        {{value?.[0]?.value || ''}}\r\n        @if (value?.length > 1) {\r\n          <span class=\"additional-selection\">\r\n            (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n          </span>\r\n        }\r\n      </mat-select-trigger>\r\n      @for (item of options; track item) {\r\n        <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (loading) {\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"multipleSelect\"\r\n  ></app-info-item>\r\n} @else {\r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <mat-select \r\n      (selectionChange)=\"selectionChange($event)\" \r\n      [value]=\"mapKeyValuePairsToKeys(value)\" \r\n      multiple \r\n      [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      [disabled]=\"isDisabled\"\r\n    >\r\n      <mat-select-trigger>\r\n        {{value?.[0]?.value || ''}}\r\n        @if (value?.length > 1) {\r\n          <span class=\"additional-selection\">\r\n            (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n          </span>\r\n        }\r\n      </mat-select-trigger>\r\n      @for (item of options; track item) {\r\n        <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (loading) {\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -5332,7 +5299,7 @@ class TimepickerComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => TimepickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"time\"\r\n  ></app-info-item>\r\n} @else { \r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      [matTimepicker]=\"timepicker\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"timePickerChange($event)\"\r\n      [ngModelOptions]=\"{ standalone: true }\"\r\n      [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      [disabled]=\"isDisabled\"\r\n    />\r\n    <mat-timepicker #timepicker (closed)=\"onTouchedFn()\" />\r\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error\r\n      app-validation-errors\r\n      [errors]=\"control.errors\"\r\n      [customErrorMessages]=\"customErrorMessages\"\r\n    >\r\n    </mat-error>\r\n  } \r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-timepicker-input{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}:host ::ng-deep mat-timepicker-toggle,:host ::ng-deep mat-timepicker-toggle button{width:38px!important}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "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", "disabledInteractive"], exportAs: ["matInput"] }, { 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: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"time\"\r\n  ></app-info-item>\r\n} @else { \r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <input\r\n      matInput\r\n      [matTimepicker]=\"timepicker\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"timePickerChange($event)\"\r\n      [ngModelOptions]=\"{ standalone: true }\"\r\n      [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      [disabled]=\"isDisabled\"\r\n    />\r\n    <mat-timepicker #timepicker (closed)=\"onTouchedFn()\" />\r\n    <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error\r\n      app-validation-errors\r\n      [errors]=\"control.errors\"\r\n      [customErrorMessages]=\"customErrorMessages\"\r\n    >\r\n    </mat-error>\r\n  } \r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-timepicker-input{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}:host ::ng-deep mat-timepicker-toggle,:host ::ng-deep mat-timepicker-toggle button{width:38px!important}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "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", "disabledInteractive"], exportAs: ["matInput"] }, { 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: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TimepickerComponent, decorators: [{
             type: Component,
@@ -5452,7 +5419,7 @@ const matModules = [
 ];
 class TableComponent {
     dialog;
-    translateService;
+    i18Service;
     fb;
     matTableRef;
     control = new FormControl(null);
@@ -5493,9 +5460,9 @@ class TableComponent {
     currentPage = 0;
     pageChange = new EventEmitter();
     form;
-    constructor(dialog, translateService, fb) {
+    constructor(dialog, i18Service, fb) {
         this.dialog = dialog;
-        this.translateService = translateService;
+        this.i18Service = i18Service;
         this.fb = fb;
     }
     set keyWord(value) {
@@ -5591,13 +5558,13 @@ class TableComponent {
             this.pageScroll.emit(true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$7.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n    @if (!isLoading) {\r\n    <ng-container>\r\n        @if (dataSource.filteredData?.length! > 0) {\r\n        <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n            @for (column of columns; track $index; let i = $index) {\r\n            <ng-container>\r\n                <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n                @if (columnsConfig && columnsConfig[i]) {\r\n                <ng-container>\r\n                    <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n                                    <div class=\"d-flex align-items-center\">\r\n                                        <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                                            {{ columnsConfig[i].label | translate }}\r\n                                        </div>\r\n                                        @if (columnsConfig[i].slaMax) {\r\n                                        <ds-sla\r\n                                            [canvasScale]=\"'40'\"\r\n                                            [innerLineWidth]=\"'3'\"\r\n                                            [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                            [outerLineColor]=\"'limegreen'\"\r\n                                            [outerLineWidth]=\"'3'\"\r\n                                            [value]=\"columnsConfig[i].slaValue\"\r\n                                            class=\"table-header-sla my-1\"\r\n                                        ></ds-sla>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </ng-container>\r\n                                } @if (columnsConfig[i].type == 'checkbox') {\r\n                                <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                        } @if (columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <div class=\"mx-1\">\r\n                                        {{ columnsConfig[i].label | translate }}\r\n                                    </div>\r\n                                    @if (columnsConfig[i].slaMax) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'50'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                        [outerLineColor]=\"'limegreen'\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"columnsConfig[i].slaValue\"\r\n                                        class=\"table-header-sla my-1\"\r\n                                    ></ds-sla>\r\n                                    }\r\n                                </div>\r\n                            </th>\r\n                        </ng-container>\r\n                        }\r\n\r\n                        <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n                            <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                                <!--            <a target=\"_blank\"-->\r\n                                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                                <!--              {{ element[column] }}-->\r\n                                <!--            </a>-->\r\n                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <!--      <span\r\n                                *ngSwitchCase=\"'link'\"\r\n                                [ngClass]=\"columnsConfig[i].type\"\r\n                                class=\"fc-black text-decoration-underline fw-medium\"\r\n                              >\r\n                                {{ element[column] }}\r\n                              </span>-->\r\n\r\n                                <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @if (element?.date.to) {\r\n                                        <ng-container> : {{ element?.date.to }} </ng-container>\r\n                                        }\r\n                                    </span>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    {{ element[column] | date : \"h:mm a\" }}\r\n                                </span>\r\n                                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                                <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                                    <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                                    <!--              </app-sla>-->\r\n\r\n                                    <ds-sla\r\n                                        [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"element?.SLA?.max\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element?.SLA?.value\"\r\n                                    ></ds-sla>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'slaProgress'\">\r\n                                    <!--              <mat-sp-->\r\n\r\n                                    @if (element[column]?.percentage >= 0) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [customValue]=\"element[column]?.percentage + '%'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"'100'\"\r\n                                        [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element[column]?.percentage\"\r\n                                    ></ds-sla>\r\n                                    } @else {\r\n                                    <ng-template>Not started</ng-template>\r\n                                    }\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-input\r\n                                        (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                                        [(ngModel)]=\"element[column]\"\r\n                                        [min]=\"0\"\r\n                                        [placeholder]=\"element[column]\"\r\n                                        class=\"w-100\"\r\n                                        className=\" no-padding w-100\"\r\n                                        type=\"number\"\r\n                                        value=\"{{ element[column] }}\"\r\n                                    >\r\n                                    </app-input>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                                <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-custom-searchable\r\n                                        (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                                        [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                                        [key]=\"columnsConfig[i]?.key\"\r\n                                        [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                                        [options]=\"columnsConfig[i]?.options\"\r\n                                        [postKey]=\"columnsConfig[i]?.postKey\"\r\n                                        [showLabel]=\"false\"\r\n                                        className=\"no-padding w-100\"\r\n                                    >\r\n                                    </app-custom-searchable>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    @if (element[column]) {\r\n                                    <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                                        {{ element[column]?.title | translate }}\r\n                                    </ds-status>\r\n                                    } @if (element[column]?.reason) {\r\n                                    <span\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"reasonMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                                    >\r\n                                        Show reason\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column]?.reason }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    @if (element[column].label == 'Finished') {\r\n                                    <span class=\" {{ element[column].label }} status  \">\r\n                                        {{ element[column].label }}\r\n                                    </span>\r\n                                    } @if (element[column].label != 'Finished') {\r\n                                    <div class=\"d-flex align-items-center gap-2\">\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n                                            <span class=\"fs-10 fw-light\">SECS</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <span\r\n                                    *ngSwitchCase=\"'number'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] ? element[column] : 0 }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n                                </span>\r\n                                <div\r\n                                    *ngSwitchCase=\"'sync'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                                >\r\n                                    <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"descMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'translatedClickable'\"\r\n                                    [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    {{ columnsConfig[i].clickableText | translate }}\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'conditionalClickable'\"\r\n                                    [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    @if (element[column] && element[column] != 'null') {\r\n                                    <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                                    }\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ element[column] }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                    <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                          {{item.id}}\r\n                                        </span> -->\r\n\r\n                                    <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                                </span>\r\n\r\n                                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                                        <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                                            <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                                            {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\r\n                                        </span>\r\n                                    </ng-container>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    *ngSwitchCase=\"'formatNumber'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] }}\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </span>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"full-name\">{{ element[column] }}</span>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <div class=\"Progress\">\r\n                                        <div class=\"progress-container default-progress\">\r\n                                            <div\r\n                                                [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                                                class=\"progress-bar\"\r\n                                            ></div>\r\n                                        </div>\r\n                                        <div class=\"Progress__footer\">\r\n                                            <div></div>\r\n                                            <div>\r\n                                                <span class=\"fs-12\">\r\n                                                    <span>{{ element[column].consumed }}</span>\r\n                                                    <span>/</span>\r\n                                                    <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n                                        <path\r\n                                            d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n\r\n                                    <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n                                    <span\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                                    ></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div\r\n                                    *ngSwitchCase=\"'colorBg'\"\r\n                                    [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                                    class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                                >\r\n                                    <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n                                    <!--\r\n                                              <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                        -->\r\n\r\n                                    <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n                                        <span class=\"fs-10\">\r\n                                            {{ element[column].percentageTrend }}%\r\n                                        </span>\r\n                                        @if (element[column].trendStatus == 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n                                        }\r\n                                    </ds-status>\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'actions'\">\r\n                                    <div class=\"d-flex justify-content-start gap-2\">\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n                                                    <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                        {{ action?.actionName | translate }}\r\n                                                    </span>\r\n                                                </ds-button>\r\n\r\n                                                <ds-button\r\n                                                    (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                                                    *ngIf=\"action === Actions.ALLOCATE\"\r\n                                                    icon\r\n                                                    size=\"small\"\r\n                                                >\r\n                                                    <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                </ds-button>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                                                >\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                          <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                            *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                            <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                          </ds-button>\r\n                                          }@else { -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- } -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CHART\"\r\n                                                        color=\"transparent\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    @if (element.hasOwnProperty('canTakeAction')) {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    } @else {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.APPROVE\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.REJECT\"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    }\r\n\r\n                                                    <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n                                                        <span class=\"fs-12 underline\"> View Details </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.PREPARE\"\r\n                                                        color=\"light-gray\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-black\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                          *ngIf=\"action?.action === 'customAction'\"\r\n                                            (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                            ></ds-button> -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n                                                        <span class=\"fc-black\">\r\n                                                            {{ action?.Status.title | translate }}\r\n                                                        </span>\r\n                                                    </ds-status>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                                            <ds-button\r\n                                                #statusMenuTrigger=\"matMenuTrigger\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                                *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                                                [matMenuTriggerFor]=\"statusMenu\"\r\n                                                class=\"dots\"\r\n                                                shape=\"text\"\r\n                                                size=\"small\"\r\n                                            >\r\n                                                <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n                                                </button>\r\n                                            </mat-menu>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'specs'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"specsMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <!--<div\r\n                                            *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                            class=\"d-flex gap-1\">\r\n                                        {{ element[column] | json }}\r\n                                        <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                            <div\r\n                                                    class=\"progress-container default-progress medium radius-0 \"\r\n                                                    matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                                <div\r\n                                                        [style.width.%]=\"item.value\"\r\n                                                        class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                    </div>-->\r\n\r\n                                <span\r\n                                    *ngSwitchDefault\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"text-nowrap\"\r\n                                    matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                                    matTooltipPosition=\"below\"\r\n                                >\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                </span>\r\n                            </ng-container>\r\n                        </td>\r\n                    </ng-container>\r\n                </ng-container>\r\n                }\r\n            </ng-container>\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n            <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n        </table>\r\n        }\r\n    </ng-container>\r\n    } @if (isLoading) {\r\n    <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n    } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n    <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$7.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "mapFn", "filterFn"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: CoreI18nService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n    @if (!isLoading) {\r\n    <ng-container>\r\n        @if (dataSource.filteredData?.length! > 0) {\r\n        <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n            @for (column of columns; track $index; let i = $index) {\r\n            <ng-container>\r\n                <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n                @if (columnsConfig && columnsConfig[i]) {\r\n                <ng-container>\r\n                    <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n                                    <div class=\"d-flex align-items-center\">\r\n                                        <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                                            {{ columnsConfig[i].label | translate }}\r\n                                        </div>\r\n                                        @if (columnsConfig[i].slaMax) {\r\n                                        <ds-sla\r\n                                            [canvasScale]=\"'40'\"\r\n                                            [innerLineWidth]=\"'3'\"\r\n                                            [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                            [outerLineColor]=\"'limegreen'\"\r\n                                            [outerLineWidth]=\"'3'\"\r\n                                            [value]=\"columnsConfig[i].slaValue\"\r\n                                            class=\"table-header-sla my-1\"\r\n                                        ></ds-sla>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </ng-container>\r\n                                } @if (columnsConfig[i].type == 'checkbox') {\r\n                                <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                        } @if (columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <div class=\"mx-1\">\r\n                                        {{ columnsConfig[i].label | translate }}\r\n                                    </div>\r\n                                    @if (columnsConfig[i].slaMax) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'50'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                        [outerLineColor]=\"'limegreen'\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"columnsConfig[i].slaValue\"\r\n                                        class=\"table-header-sla my-1\"\r\n                                    ></ds-sla>\r\n                                    }\r\n                                </div>\r\n                            </th>\r\n                        </ng-container>\r\n                        }\r\n\r\n                        <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n                            <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                                <!--            <a target=\"_blank\"-->\r\n                                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                                <!--              {{ element[column] }}-->\r\n                                <!--            </a>-->\r\n                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <!--      <span\r\n                                *ngSwitchCase=\"'link'\"\r\n                                [ngClass]=\"columnsConfig[i].type\"\r\n                                class=\"fc-black text-decoration-underline fw-medium\"\r\n                              >\r\n                                {{ element[column] }}\r\n                              </span>-->\r\n\r\n                                <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @if (element?.date.to) {\r\n                                        <ng-container> : {{ element?.date.to }} </ng-container>\r\n                                        }\r\n                                    </span>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    {{ element[column] | date : \"h:mm a\" }}\r\n                                </span>\r\n                                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                                <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                                    <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                                    <!--              </app-sla>-->\r\n\r\n                                    <ds-sla\r\n                                        [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"element?.SLA?.max\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element?.SLA?.value\"\r\n                                    ></ds-sla>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'slaProgress'\">\r\n                                    <!--              <mat-sp-->\r\n\r\n                                    @if (element[column]?.percentage >= 0) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [customValue]=\"element[column]?.percentage + '%'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"'100'\"\r\n                                        [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element[column]?.percentage\"\r\n                                    ></ds-sla>\r\n                                    } @else {\r\n                                    <ng-template>Not started</ng-template>\r\n                                    }\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-input\r\n                                        (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                                        [(ngModel)]=\"element[column]\"\r\n                                        [min]=\"0\"\r\n                                        [placeholder]=\"element[column]\"\r\n                                        class=\"w-100\"\r\n                                        className=\" no-padding w-100\"\r\n                                        type=\"number\"\r\n                                        value=\"{{ element[column] }}\"\r\n                                    >\r\n                                    </app-input>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                                <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-custom-searchable\r\n                                        (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                                        [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                                        [key]=\"columnsConfig[i]?.key\"\r\n                                        [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                                        [options]=\"columnsConfig[i]?.options\"\r\n                                        [postKey]=\"columnsConfig[i]?.postKey\"\r\n                                        [showLabel]=\"false\"\r\n                                        className=\"no-padding w-100\"\r\n                                    >\r\n                                    </app-custom-searchable>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    @if (element[column]) {\r\n                                    <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                                        {{ element[column]?.title | translate }}\r\n                                    </ds-status>\r\n                                    } @if (element[column]?.reason) {\r\n                                    <span\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"reasonMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                                    >\r\n                                        Show reason\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column]?.reason }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    @if (element[column].label == 'Finished') {\r\n                                    <span class=\" {{ element[column].label }} status  \">\r\n                                        {{ element[column].label }}\r\n                                    </span>\r\n                                    } @if (element[column].label != 'Finished') {\r\n                                    <div class=\"d-flex align-items-center gap-2\">\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n                                            <span class=\"fs-10 fw-light\">SECS</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <span\r\n                                    *ngSwitchCase=\"'number'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] ? element[column] : 0 }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n                                </span>\r\n                                <div\r\n                                    *ngSwitchCase=\"'sync'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                                >\r\n                                    <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"descMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'translatedClickable'\"\r\n                                    [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    {{ columnsConfig[i].clickableText | translate }}\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'conditionalClickable'\"\r\n                                    [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    @if (element[column] && element[column] != 'null') {\r\n                                    <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                                    }\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ element[column] }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                    <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                          {{item.id}}\r\n                                        </span> -->\r\n\r\n                                    <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                                </span>\r\n\r\n                                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                                        <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                                            <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                                            {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\r\n                                        </span>\r\n                                    </ng-container>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    *ngSwitchCase=\"'formatNumber'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] }}\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </span>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"full-name\">{{ element[column] }}</span>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <div class=\"Progress\">\r\n                                        <div class=\"progress-container default-progress\">\r\n                                            <div\r\n                                                [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                                                class=\"progress-bar\"\r\n                                            ></div>\r\n                                        </div>\r\n                                        <div class=\"Progress__footer\">\r\n                                            <div></div>\r\n                                            <div>\r\n                                                <span class=\"fs-12\">\r\n                                                    <span>{{ element[column].consumed }}</span>\r\n                                                    <span>/</span>\r\n                                                    <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n                                        <path\r\n                                            d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n\r\n                                    <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n                                    <span\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                                    ></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div\r\n                                    *ngSwitchCase=\"'colorBg'\"\r\n                                    [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                                    class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                                >\r\n                                    <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n                                    <!--\r\n                                              <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                        -->\r\n\r\n                                    <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n                                        <span class=\"fs-10\">\r\n                                            {{ element[column].percentageTrend }}%\r\n                                        </span>\r\n                                        @if (element[column].trendStatus == 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n                                        }\r\n                                    </ds-status>\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'actions'\">\r\n                                    <div class=\"d-flex justify-content-start gap-2\">\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n                                                    <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                        {{ action?.actionName | translate }}\r\n                                                    </span>\r\n                                                </ds-button>\r\n\r\n                                                <ds-button\r\n                                                    (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                                                    *ngIf=\"action === Actions.ALLOCATE\"\r\n                                                    icon\r\n                                                    size=\"small\"\r\n                                                >\r\n                                                    <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                </ds-button>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                                                >\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                          <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                            *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                            <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                          </ds-button>\r\n                                          }@else { -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- } -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CHART\"\r\n                                                        color=\"transparent\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    @if (element.hasOwnProperty('canTakeAction')) {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    } @else {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.APPROVE\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.REJECT\"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    }\r\n\r\n                                                    <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n                                                        <span class=\"fs-12 underline\"> View Details </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.PREPARE\"\r\n                                                        color=\"light-gray\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-black\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                          *ngIf=\"action?.action === 'customAction'\"\r\n                                            (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                            ></ds-button> -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n                                                        <span class=\"fc-black\">\r\n                                                            {{ action?.Status.title | translate }}\r\n                                                        </span>\r\n                                                    </ds-status>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                                            <ds-button\r\n                                                #statusMenuTrigger=\"matMenuTrigger\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                                *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                                                [matMenuTriggerFor]=\"statusMenu\"\r\n                                                class=\"dots\"\r\n                                                shape=\"text\"\r\n                                                size=\"small\"\r\n                                            >\r\n                                                <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n                                                </button>\r\n                                            </mat-menu>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'specs'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"specsMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <!--<div\r\n                                            *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                            class=\"d-flex gap-1\">\r\n                                        {{ element[column] | json }}\r\n                                        <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                            <div\r\n                                                    class=\"progress-container default-progress medium radius-0 \"\r\n                                                    matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                                <div\r\n                                                        [style.width.%]=\"item.value\"\r\n                                                        class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                    </div>-->\r\n\r\n                                <span\r\n                                    *ngSwitchDefault\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"text-nowrap\"\r\n                                    matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? i18Service.language == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                                    matTooltipPosition=\"below\"\r\n                                >\r\n                                    {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                </span>\r\n                            </ng-container>\r\n                        </td>\r\n                    </ng-container>\r\n                </ng-container>\r\n                }\r\n            </ng-container>\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n            <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n        </table>\r\n        }\r\n    </ng-container>\r\n    } @if (isLoading) {\r\n    <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n    } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n    <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "maxLength", "mapFn", "filterFn"] }, { 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table', standalone: true, imports: [NgFor, TranslateModule, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n    @if (!isLoading) {\r\n    <ng-container>\r\n        @if (dataSource.filteredData?.length! > 0) {\r\n        <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n            @for (column of columns; track $index; let i = $index) {\r\n            <ng-container>\r\n                <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n                @if (columnsConfig && columnsConfig[i]) {\r\n                <ng-container>\r\n                    <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n                                    <div class=\"d-flex align-items-center\">\r\n                                        <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                                            {{ columnsConfig[i].label | translate }}\r\n                                        </div>\r\n                                        @if (columnsConfig[i].slaMax) {\r\n                                        <ds-sla\r\n                                            [canvasScale]=\"'40'\"\r\n                                            [innerLineWidth]=\"'3'\"\r\n                                            [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                            [outerLineColor]=\"'limegreen'\"\r\n                                            [outerLineWidth]=\"'3'\"\r\n                                            [value]=\"columnsConfig[i].slaValue\"\r\n                                            class=\"table-header-sla my-1\"\r\n                                        ></ds-sla>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </ng-container>\r\n                                } @if (columnsConfig[i].type == 'checkbox') {\r\n                                <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                        } @if (columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <div class=\"mx-1\">\r\n                                        {{ columnsConfig[i].label | translate }}\r\n                                    </div>\r\n                                    @if (columnsConfig[i].slaMax) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'50'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                        [outerLineColor]=\"'limegreen'\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"columnsConfig[i].slaValue\"\r\n                                        class=\"table-header-sla my-1\"\r\n                                    ></ds-sla>\r\n                                    }\r\n                                </div>\r\n                            </th>\r\n                        </ng-container>\r\n                        }\r\n\r\n                        <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n                            <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                                <!--            <a target=\"_blank\"-->\r\n                                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                                <!--              {{ element[column] }}-->\r\n                                <!--            </a>-->\r\n                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <!--      <span\r\n                                *ngSwitchCase=\"'link'\"\r\n                                [ngClass]=\"columnsConfig[i].type\"\r\n                                class=\"fc-black text-decoration-underline fw-medium\"\r\n                              >\r\n                                {{ element[column] }}\r\n                              </span>-->\r\n\r\n                                <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @if (element?.date.to) {\r\n                                        <ng-container> : {{ element?.date.to }} </ng-container>\r\n                                        }\r\n                                    </span>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    {{ element[column] | date : \"h:mm a\" }}\r\n                                </span>\r\n                                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                                <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                                    <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                                    <!--              </app-sla>-->\r\n\r\n                                    <ds-sla\r\n                                        [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"element?.SLA?.max\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element?.SLA?.value\"\r\n                                    ></ds-sla>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'slaProgress'\">\r\n                                    <!--              <mat-sp-->\r\n\r\n                                    @if (element[column]?.percentage >= 0) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [customValue]=\"element[column]?.percentage + '%'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"'100'\"\r\n                                        [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element[column]?.percentage\"\r\n                                    ></ds-sla>\r\n                                    } @else {\r\n                                    <ng-template>Not started</ng-template>\r\n                                    }\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-input\r\n                                        (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                                        [(ngModel)]=\"element[column]\"\r\n                                        [min]=\"0\"\r\n                                        [placeholder]=\"element[column]\"\r\n                                        class=\"w-100\"\r\n                                        className=\" no-padding w-100\"\r\n                                        type=\"number\"\r\n                                        value=\"{{ element[column] }}\"\r\n                                    >\r\n                                    </app-input>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                                <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-custom-searchable\r\n                                        (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                                        [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                                        [key]=\"columnsConfig[i]?.key\"\r\n                                        [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                                        [options]=\"columnsConfig[i]?.options\"\r\n                                        [postKey]=\"columnsConfig[i]?.postKey\"\r\n                                        [showLabel]=\"false\"\r\n                                        className=\"no-padding w-100\"\r\n                                    >\r\n                                    </app-custom-searchable>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    @if (element[column]) {\r\n                                    <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                                        {{ element[column]?.title | translate }}\r\n                                    </ds-status>\r\n                                    } @if (element[column]?.reason) {\r\n                                    <span\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"reasonMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                                    >\r\n                                        Show reason\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column]?.reason }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    @if (element[column].label == 'Finished') {\r\n                                    <span class=\" {{ element[column].label }} status  \">\r\n                                        {{ element[column].label }}\r\n                                    </span>\r\n                                    } @if (element[column].label != 'Finished') {\r\n                                    <div class=\"d-flex align-items-center gap-2\">\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n                                            <span class=\"fs-10 fw-light\">SECS</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <span\r\n                                    *ngSwitchCase=\"'number'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] ? element[column] : 0 }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n                                </span>\r\n                                <div\r\n                                    *ngSwitchCase=\"'sync'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                                >\r\n                                    <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"descMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'translatedClickable'\"\r\n                                    [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    {{ columnsConfig[i].clickableText | translate }}\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'conditionalClickable'\"\r\n                                    [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    @if (element[column] && element[column] != 'null') {\r\n                                    <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                                    }\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ element[column] }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                    <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                          {{item.id}}\r\n                                        </span> -->\r\n\r\n                                    <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                                </span>\r\n\r\n                                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                                        <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                                            <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                                            {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\r\n                                        </span>\r\n                                    </ng-container>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    *ngSwitchCase=\"'formatNumber'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] }}\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </span>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"full-name\">{{ element[column] }}</span>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <div class=\"Progress\">\r\n                                        <div class=\"progress-container default-progress\">\r\n                                            <div\r\n                                                [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                                                class=\"progress-bar\"\r\n                                            ></div>\r\n                                        </div>\r\n                                        <div class=\"Progress__footer\">\r\n                                            <div></div>\r\n                                            <div>\r\n                                                <span class=\"fs-12\">\r\n                                                    <span>{{ element[column].consumed }}</span>\r\n                                                    <span>/</span>\r\n                                                    <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n                                        <path\r\n                                            d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n\r\n                                    <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n                                    <span\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                                    ></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div\r\n                                    *ngSwitchCase=\"'colorBg'\"\r\n                                    [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                                    class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                                >\r\n                                    <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n                                    <!--\r\n                                              <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                        -->\r\n\r\n                                    <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n                                        <span class=\"fs-10\">\r\n                                            {{ element[column].percentageTrend }}%\r\n                                        </span>\r\n                                        @if (element[column].trendStatus == 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n                                        }\r\n                                    </ds-status>\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'actions'\">\r\n                                    <div class=\"d-flex justify-content-start gap-2\">\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n                                                    <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                        {{ action?.actionName | translate }}\r\n                                                    </span>\r\n                                                </ds-button>\r\n\r\n                                                <ds-button\r\n                                                    (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                                                    *ngIf=\"action === Actions.ALLOCATE\"\r\n                                                    icon\r\n                                                    size=\"small\"\r\n                                                >\r\n                                                    <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                </ds-button>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                                                >\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                          <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                            *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                            <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                          </ds-button>\r\n                                          }@else { -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- } -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CHART\"\r\n                                                        color=\"transparent\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    @if (element.hasOwnProperty('canTakeAction')) {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    } @else {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.APPROVE\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.REJECT\"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    }\r\n\r\n                                                    <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n                                                        <span class=\"fs-12 underline\"> View Details </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.PREPARE\"\r\n                                                        color=\"light-gray\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-black\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                          *ngIf=\"action?.action === 'customAction'\"\r\n                                            (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                            ></ds-button> -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n                                                        <span class=\"fc-black\">\r\n                                                            {{ action?.Status.title | translate }}\r\n                                                        </span>\r\n                                                    </ds-status>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                                            <ds-button\r\n                                                #statusMenuTrigger=\"matMenuTrigger\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                                *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                                                [matMenuTriggerFor]=\"statusMenu\"\r\n                                                class=\"dots\"\r\n                                                shape=\"text\"\r\n                                                size=\"small\"\r\n                                            >\r\n                                                <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n                                                </button>\r\n                                            </mat-menu>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'specs'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"specsMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <!--<div\r\n                                            *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                            class=\"d-flex gap-1\">\r\n                                        {{ element[column] | json }}\r\n                                        <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                            <div\r\n                                                    class=\"progress-container default-progress medium radius-0 \"\r\n                                                    matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                                <div\r\n                                                        [style.width.%]=\"item.value\"\r\n                                                        class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                    </div>-->\r\n\r\n                                <span\r\n                                    *ngSwitchDefault\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"text-nowrap\"\r\n                                    matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? translateService.currentLang == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                                    matTooltipPosition=\"below\"\r\n                                >\r\n                                    {{ columnsConfig[i].arKey ? translateService.currentLang == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                </span>\r\n                            </ng-container>\r\n                        </td>\r\n                    </ng-container>\r\n                </ng-container>\r\n                }\r\n            </ng-container>\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n            <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n        </table>\r\n        }\r\n    </ng-container>\r\n    } @if (isLoading) {\r\n    <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n    } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n    <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$7.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
+            args: [{ selector: 'app-table', standalone: true, imports: [NgFor, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator, TranslatePipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n    @if (!isLoading) {\r\n    <ng-container>\r\n        @if (dataSource.filteredData?.length! > 0) {\r\n        <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n            @for (column of columns; track $index; let i = $index) {\r\n            <ng-container>\r\n                <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n                @if (columnsConfig && columnsConfig[i]) {\r\n                <ng-container>\r\n                    <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n                        @if (!columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n                                @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n                                <ng-container>\r\n                                    @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n                                    <div class=\"d-flex align-items-center\">\r\n                                        <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n                                            {{ columnsConfig[i].label | translate }}\r\n                                        </div>\r\n                                        @if (columnsConfig[i].slaMax) {\r\n                                        <ds-sla\r\n                                            [canvasScale]=\"'40'\"\r\n                                            [innerLineWidth]=\"'3'\"\r\n                                            [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                            [outerLineColor]=\"'limegreen'\"\r\n                                            [outerLineWidth]=\"'3'\"\r\n                                            [value]=\"columnsConfig[i].slaValue\"\r\n                                            class=\"table-header-sla my-1\"\r\n                                        ></ds-sla>\r\n                                        }\r\n                                    </div>\r\n                                    }\r\n                                </ng-container>\r\n                                } @if (columnsConfig[i].type == 'checkbox') {\r\n                                <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n                                }\r\n                            </th>\r\n                        </ng-container>\r\n                        } @if (columnsConfig[i].notSortable) {\r\n                        <ng-container>\r\n                            <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <div class=\"mx-1\">\r\n                                        {{ columnsConfig[i].label | translate }}\r\n                                    </div>\r\n                                    @if (columnsConfig[i].slaMax) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'50'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"columnsConfig[i].slaMax\"\r\n                                        [outerLineColor]=\"'limegreen'\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"columnsConfig[i].slaValue\"\r\n                                        class=\"table-header-sla my-1\"\r\n                                    ></ds-sla>\r\n                                    }\r\n                                </div>\r\n                            </th>\r\n                        </ng-container>\r\n                        }\r\n\r\n                        <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n                            <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n                                <!--            <a target=\"_blank\"-->\r\n                                <!--               routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n                                <!--               class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n                                <!--              {{ element[column] }}-->\r\n                                <!--            </a>-->\r\n                                <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <!--      <span\r\n                                *ngSwitchCase=\"'link'\"\r\n                                [ngClass]=\"columnsConfig[i].type\"\r\n                                class=\"fc-black text-decoration-underline fw-medium\"\r\n                              >\r\n                                {{ element[column] }}\r\n                              </span>-->\r\n\r\n                                <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n                                    <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n                                    <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n                                </span>\r\n                                <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n                                <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <span class=\"sfi sfi-clock fc-coral\"></span>\r\n                                    <span class=\"mx-2\">\r\n                                        {{ element?.date.from }} @if (element?.date.to) {\r\n                                        <ng-container> : {{ element?.date.to }} </ng-container>\r\n                                        }\r\n                                    </span>\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n                                    {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    {{ element[column] | date : \"h:mm a\" }}\r\n                                </span>\r\n                                <!--dir=\"ltr\" and text-left for English text on ar page  -->\r\n                                <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n                                    <!--  -->\r\n                                    {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n                                    <ng-container>\r\n                                        - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n                                    </ng-container>\r\n                                    }\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n                                    <!--  -->\r\n                                    @if (!element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n                                    </div>\r\n                                    } @if (element[column].monthlyFineEscalation) {\r\n                                    <div>\r\n                                        <br />\r\n                                        {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                        {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n                                        <br />\r\n                                    </div>\r\n                                    }\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n                                    <!--              <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n                                    <!--                class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n                                    <!--              </app-sla>-->\r\n\r\n                                    <ds-sla\r\n                                        [attr.outerLineColor]=\"\r\n                      getSlaColor(element?.SLA.value, element?.SLA.max)\r\n                    \"\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"element?.SLA?.max\"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element?.SLA?.value\"\r\n                                    ></ds-sla>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'slaProgress'\">\r\n                                    <!--              <mat-sp-->\r\n\r\n                                    @if (element[column]?.percentage >= 0) {\r\n                                    <ds-sla\r\n                                        [canvasScale]=\"'55'\"\r\n                                        [customValue]=\"element[column]?.percentage + '%'\"\r\n                                        [innerLineWidth]=\"'3'\"\r\n                                        [maxValue]=\"'100'\"\r\n                                        [outerLineColor]=\"\r\n                      getSlaColor(element[column]?.percentage, 100)\r\n                    \"\r\n                                        [outerLineWidth]=\"'3'\"\r\n                                        [value]=\"element[column]?.percentage\"\r\n                                    ></ds-sla>\r\n                                    } @else {\r\n                                    <ng-template>Not started</ng-template>\r\n                                    }\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n                                    <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n                                    <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n                                    <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n                                    <span>{{ (element[column]?.['name']) }}</span>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n                                    <ng-container *ngFor=\"let item of element[column]\">\r\n                                        <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n                                            <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-input\r\n                                        (input)=\"inputCellChanged.emit({element,column,i})\"\r\n                                        [(ngModel)]=\"element[column]\"\r\n                                        [min]=\"0\"\r\n                                        [placeholder]=\"element[column]\"\r\n                                        class=\"w-100\"\r\n                                        className=\" no-padding w-100\"\r\n                                        type=\"number\"\r\n                                        value=\"{{ element[column] }}\"\r\n                                    >\r\n                                    </app-input>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n                                <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n                                    <app-custom-searchable\r\n                                        (selectedValue)=\"selectValueSelected.emit($event)\"\r\n                                        [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n                                        [key]=\"columnsConfig[i]?.key\"\r\n                                        [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n                                        [options]=\"columnsConfig[i]?.options\"\r\n                                        [postKey]=\"columnsConfig[i]?.postKey\"\r\n                                        [showLabel]=\"false\"\r\n                                        className=\"no-padding w-100\"\r\n                                    >\r\n                                    </app-custom-searchable>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    @if (element[column]) {\r\n                                    <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n                                        {{ element[column]?.title | translate }}\r\n                                    </ds-status>\r\n                                    } @if (element[column]?.reason) {\r\n                                    <span\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"reasonMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-red underline cursor-pointer\"\r\n                                    >\r\n                                        Show reason\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column]?.reason }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    @if (element[column].label == 'Finished') {\r\n                                    <span class=\" {{ element[column].label }} status  \">\r\n                                        {{ element[column].label }}\r\n                                    </span>\r\n                                    } @if (element[column].label != 'Finished') {\r\n                                    <div class=\"d-flex align-items-center gap-2\">\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n                                            <span class=\"fs-10 fw-light\">HRS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n                                            <span class=\"fs-10 fw-light\">MINS</span>\r\n                                        </div>\r\n                                        <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n                                            <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n                                            <span class=\"fs-10 fw-light\">SECS</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    }\r\n                                </div>\r\n                                <span\r\n                                    *ngSwitchCase=\"'number'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{ columnsConfig[i].type }} {{\r\n                    element[column] ? 'underline' : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] ? element[column] : 0 }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n                                    <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n                                </span>\r\n                                <div\r\n                                    *ngSwitchCase=\"'sync'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} d-flex align-items-center gap-2\"\r\n                                >\r\n                                    <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <path\r\n                                            d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                        <path\r\n                                            d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n                                    {{ element[column] }}\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'clickable'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"descMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'translatedClickable'\"\r\n                                    [matMenuTriggerFor]=\"descMenuTranslated\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    {{ columnsConfig[i].clickableText | translate }}\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                        element[column] : \"-\" }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    #statusMenuTrigger=\"matMenuTrigger\"\r\n                                    (click)=\"$event.stopPropagation()\"\r\n                                    *ngSwitchCase=\"'conditionalClickable'\"\r\n                                    [matMenuTriggerFor]=\"descConditionalMenu\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"{{\r\n                    columnsConfig[i].type\r\n                  }} fc-coral underline cursor-pointer\"\r\n                                >\r\n                                    @if (element[column] && element[column] != 'null') {\r\n                                    <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n                                    }\r\n                                    <!-- {{ 'global.view' | translate}} -->\r\n                                </span>\r\n\r\n                                <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <span class=\"fs-14\">\r\n                                        {{ element[column] }}\r\n                                    </span>\r\n                                </mat-menu>\r\n\r\n                                <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}   cursor-pointer\">\r\n                                    {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                    <!-- <span *ngFor=\"let item of  element[column]\">\r\n                                          {{item.id}}\r\n                                        </span> -->\r\n\r\n                                    <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n                                </span>\r\n\r\n                                <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                    <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                                        <span class=\"fs-12 fc-black\" mat-menu-item>\r\n                                            <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n                                            {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n                                            element[column] : \"-\" }}\r\n                                        </span>\r\n                                    </ng-container>\r\n                                </mat-menu>\r\n\r\n                                <span\r\n                                    *ngSwitchCase=\"'formatNumber'\"\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    matTooltip=\"{{\r\n                    element[column] > 1000 ? element[column] : ''\r\n                  }}\"\r\n                                >\r\n                                    {{ element[column] }}\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n                                <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n                                    <span class=\"img-card circled-img\">\r\n                                        <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </span>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"full-name\">{{ element[column] }}</span>\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column] }}\r\n                                </span>\r\n                                <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    {{ element[column]?.title }}\r\n                                </span>\r\n\r\n                                <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n                                    <div class=\"Progress\">\r\n                                        <div class=\"progress-container default-progress\">\r\n                                            <div\r\n                                                [style.width.%]=\"\r\n                          (element[column].consumed! / element[column].total!) *\r\n                          100\r\n                        \"\r\n                                                class=\"progress-bar\"\r\n                                            ></div>\r\n                                        </div>\r\n                                        <div class=\"Progress__footer\">\r\n                                            <div></div>\r\n                                            <div>\r\n                                                <span class=\"fs-12\">\r\n                                                    <span>{{ element[column].consumed }}</span>\r\n                                                    <span>/</span>\r\n                                                    <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </span>\r\n\r\n                                <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n                                    <!--              <span class=\"full-name\">{{element[column]}}</span>-->\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n                                    <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                        <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n                                        <path\r\n                                            d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n                                            fill=\"#FF375E\"\r\n                                        />\r\n                                    </svg>\r\n\r\n                                    <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n                                    <span\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        [style.background]=\"\r\n                      element[column]?.colorCode\r\n                        ? element[column]?.colorCode\r\n                        : element[column]\r\n                    \"\r\n                                    ></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div\r\n                                    *ngSwitchCase=\"'colorBg'\"\r\n                                    [style.background]=\"\r\n                    'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n                  \"\r\n                                    class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n                                >\r\n                                    <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n                                    {{ element[column].title }}\r\n                                </div>\r\n                                <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n                                    <div class=\"img-card x-small circled-img\">\r\n                                        <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n                                    </div>\r\n                                    <span class=\"mx-1\"></span>\r\n                                    <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n                                    <!--\r\n                                        <span class=\"sfi sfi-close fc-coral\"></span>\r\n                                       -->\r\n                                </div>\r\n\r\n                                <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n                                <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n                                    <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n                                    {{ element[column]?.['title'] }}\r\n                                </div>\r\n\r\n                                <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n                                    <!--\r\n                                              <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n                                        -->\r\n\r\n                                    <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n                                    <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n                                        <span class=\"fs-10\">\r\n                                            {{ element[column].percentageTrend }}%\r\n                                        </span>\r\n                                        @if (element[column].trendStatus == 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n                                        } @if (element[column].trendStatus != 'up') {\r\n                                        <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n                                        }\r\n                                    </ds-status>\r\n                                </div>\r\n\r\n                                <ng-container *ngSwitchCase=\"'actions'\">\r\n                                    <div class=\"d-flex justify-content-start gap-2\">\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n                                            <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n                                                <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n                                                    <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                        {{ action?.actionName | translate }}\r\n                                                    </span>\r\n                                                </ds-button>\r\n\r\n                                                <ds-button\r\n                                                    (click)=\"\r\n                            $event.stopPropagation(); action?.onClick(element)\r\n                          \"\r\n                                                    *ngIf=\"action === Actions.ALLOCATE\"\r\n                                                    icon\r\n                                                    size=\"small\"\r\n                                                >\r\n                                                    <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                </ds-button>\r\n                                                <ng-container\r\n                                                    *ngIf=\"\r\n                            action.viewMode != Actions.VIEW ||\r\n                            action.viewMode != Actions.COPY\r\n                          \"\r\n                                                >\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.VIEW &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                   <ds-button  (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n                                                        icon size=\"small\">\r\n                                                        <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.COPY &&\r\n                              !action?.isHidden\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- @if(element.hasOwnProperty('canUpdate')){\r\n                                          <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n                                            *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n                                            <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n                                          </ds-button>\r\n                                          }@else { -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.EDIT &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <!-- } -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETE &&\r\n                              !action?.isHidden &&\r\n                              ![4, 7].includes(element?.contractStatus?.id)\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.DELETEPENDING &&\r\n                              !action?.isHidden &&\r\n                              element?.contractStatus?.id == 1\r\n                            \"\r\n                                                        icon\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CHART\"\r\n                                                        color=\"transparent\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    @if (element.hasOwnProperty('canTakeAction')) {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.APPROVE &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.REJECT &&\r\n                              element.canTakeAction == true\r\n                            \"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    } @else {\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.APPROVE\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.approve\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        shape=\"outline\"\r\n                                                        color=\"dark-gray\"\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                        *ngIf=\"action?.action === Actions.REJECT\"\r\n                                                        shape=\"outline\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ \"global.reject\" | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    }\r\n\r\n                                                    <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n                                                        <span class=\"fs-12 underline\"> View Details </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.PREPARE\"\r\n                                                        color=\"light-gray\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-black\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.START &&\r\n                              element?.isFinalize\r\n                            \"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                        <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n                                                    </ds-button>\r\n\r\n                                                    <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n                                          *ngIf=\"action?.action === 'customAction'\"\r\n                                            (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n                                            ></ds-button> -->\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n                              (element.contractStatus.id == 7 ||\r\n                                element.contractStatus.id == 1)\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n                              element.contractStatus.id == 7\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-button\r\n                                                        (click)=\"\r\n                              $event.stopPropagation(); action?.onClick(element)\r\n                            \"\r\n                                                        *ngIf=\"\r\n                              action?.action === Actions.CUSTOMACTIONDETAILS\r\n                            \"\r\n                                                        [class]=\"action?.actionColor\"\r\n                                                        [color]=\"action?.actionColor\"\r\n                                                        shape=\"{{ action?.actionShape }}\"\r\n                                                        size=\"small\"\r\n                                                    >\r\n                                                        <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n                                                            {{ action?.actionName | translate }}\r\n                                                        </span>\r\n                                                    </ds-button>\r\n                                                    <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n                                                        <span class=\"fc-black\">\r\n                                                            {{ action?.Status.title | translate }}\r\n                                                        </span>\r\n                                                    </ds-status>\r\n                                                </ng-container>\r\n                                            </ng-container>\r\n                                        </ng-container>\r\n\r\n                                        <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n                                            <ds-button\r\n                                                #statusMenuTrigger=\"matMenuTrigger\"\r\n                                                (click)=\"$event.stopPropagation()\"\r\n                                                *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n                                                [matMenuTriggerFor]=\"statusMenu\"\r\n                                                class=\"dots\"\r\n                                                shape=\"text\"\r\n                                                size=\"small\"\r\n                                            >\r\n                                                <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n                                            </ds-button>\r\n\r\n                                            <mat-menu #statusMenu=\"matMenu\">\r\n                                                <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n                                                    <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n                                                </button>\r\n                                            </mat-menu>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'specs'\">\r\n                                    @if (element?.[column]) {\r\n                                    <span\r\n                                        #statusMenuTrigger=\"matMenuTrigger\"\r\n                                        (click)=\"$event.stopPropagation()\"\r\n                                        [matMenuTriggerFor]=\"specsMenu\"\r\n                                        [ngClass]=\"columnsConfig[i].type\"\r\n                                        class=\"{{\r\n                      columnsConfig[i].type\r\n                    }} fc-coral underline cursor-pointer\"\r\n                                    >\r\n                                        {{ columnsConfig[i].clickableText | translate }}\r\n                                    </span>\r\n                                    }\r\n\r\n                                    <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n                                        <span class=\"fs-14\">\r\n                                            {{ element[column] }}\r\n                                        </span>\r\n                                    </mat-menu>\r\n                                </ng-container>\r\n\r\n                                <!--<div\r\n                                            *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n                                            class=\"d-flex gap-1\">\r\n                                        {{ element[column] | json }}\r\n                                        <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n                                            <div\r\n                                                    class=\"progress-container default-progress medium radius-0 \"\r\n                                                    matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n                                                <div\r\n                                                        [style.width.%]=\"item.value\"\r\n                                                        class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n\r\n                                    </div>-->\r\n\r\n                                <span\r\n                                    *ngSwitchDefault\r\n                                    [ngClass]=\"columnsConfig[i].type\"\r\n                                    class=\"text-nowrap\"\r\n                                    matTooltip=\" {{\r\n                    columnsConfig[i].arKey\r\n                      ? i18Service.language == 'ar'\r\n                        ? mapText(columnsConfig[i].arKey, element[column])\r\n                        : mapText(columnsConfig[i].enKey, element[column])\r\n                      : element[column]\r\n                      ? element[column]\r\n                      : '-'\r\n                  }}\"\r\n                                    matTooltipPosition=\"below\"\r\n                                >\r\n                                    {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n                                    \"-\" }}\r\n                                </span>\r\n                            </ng-container>\r\n                        </td>\r\n                    </ng-container>\r\n                </ng-container>\r\n                }\r\n            </ng-container>\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n            <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n        </table>\r\n        }\r\n    </ng-container>\r\n    } @if (isLoading) {\r\n    <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n    } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n    <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n    }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: CoreI18nService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
                 type: ViewChild,
                 args: ['table', { read: ElementRef }]
             }], columns: [{
@@ -6379,7 +6346,7 @@ class FeedbackSectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FeedbackSectionComponent, deps: [{ token: FeedBackService }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: FeedbackSectionComponent, isStandalone: true, selector: "app-feedback-section", inputs: { inboxItem: "inboxItem", profile: "profile" }, ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3>{{i18n.translate('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\" *ngIf=\"submitted\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\" />\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\" />\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\" />\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{i18n.translate('submittedSuccessfully')}}\r\n      </h2>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: FeedbackSectionComponent, isStandalone: true, selector: "app-feedback-section", inputs: { inboxItem: "inboxItem", profile: "profile" }, ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3>{{i18n.translate('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\" *ngIf=\"submitted\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\" />\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\" />\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\" />\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{i18n.translate('submittedSuccessfully')}}\r\n      </h2>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmployee", "emitedDeletedValue"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength", "mapFn", "filterFn"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FeedbackSectionComponent, decorators: [{
             type: Component,
@@ -6802,7 +6769,7 @@ class PreviousRequestsComponent {
         this.ngUnsubscribe.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i1$1.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i2$1.ToastrService }, { token: CoreI18nService }, { token: i4.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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)=\"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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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)=\"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: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PreviousRequestsComponent, decorators: [{
             type: Component,
@@ -6810,7 +6777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         CommonModule,
                         MatMenuModule,
                         RouterModule,
-                        TranslateModule,
                         MatDialogModule,
                         ReactiveFormsModule,
                         MatButtonToggleModule,
@@ -7314,7 +7280,7 @@ class FormSectionComponent {
         return statusStrategy.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -7360,7 +7326,7 @@ class MainRequestDetailsComponent {
         return this.section?.body?.details?.['expandStage'] === 'true';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel\r\n    [expanded]=\"isExpanded || form?.sections?.length === 1\"\r\n    class=\"mb-3\"\r\n    hideToggle\r\n    #requestPanel=\"matExpansionPanel\"\r\n  >\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">\r\n        {{ i18n.translate(\"requestDetailsTitle\") }}\r\n      </h2>\r\n      @if (requestPanel.expanded) {\r\n      <div class=\"d-inline-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n      </div>\r\n      } @else {\r\n      <div class=\"d-inline-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n      </div>\r\n      }\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4 rounded-4\">\r\n      <ng-content></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$8.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel\r\n    [expanded]=\"isExpanded || form?.sections?.length === 1\"\r\n    class=\"mb-3\"\r\n    hideToggle\r\n    #requestPanel=\"matExpansionPanel\"\r\n  >\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">\r\n        {{ i18n.translate(\"requestDetailsTitle\") }}\r\n      </h2>\r\n      @if (requestPanel.expanded) {\r\n      <div class=\"d-inline-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n      </div>\r\n      } @else {\r\n      <div class=\"d-inline-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n      </div>\r\n      }\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4 rounded-4\">\r\n      <ng-content></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$7.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
             type: Component,
@@ -7836,7 +7802,28 @@ class RequestDetailsSectionComponent {
     isLoading = false;
     className = "info-section";
     formGroup;
-    options = ['Option 1', 'Option 2', 'Option 3'];
+    options = [
+        {
+            "description": "Op_1 7",
+            "value": "1"
+        },
+        {
+            "description": "Op_2 18",
+            "value": "2"
+        },
+        {
+            "description": "Op_3 30",
+            "value": "3"
+        },
+        {
+            "description": "Op_4 63",
+            "value": "4"
+        },
+        {
+            "description": "Op_5 75",
+            "value": "5"
+        }
+    ];
     DEFAULT_PAGE_SIZE = 10;
     DEFAULT_PAGE_NUMBER = 0;
     pageNumber = this.DEFAULT_PAGE_NUMBER;
@@ -8057,6 +8044,7 @@ class RequestDetailsSectionComponent {
     
             })*/
     }
+    radio = { key: '', value: 'Op_1 7' };
     timePicker = '2025-07-05T23:00:00.000Z';
     timePickerChange(e) {
         console.log(e);
@@ -8126,13 +8114,13 @@ class RequestDetailsSectionComponent {
             timePicker: new FormControl({ value: '2025-07-05T23:00:00.000Z', disabled: false }, Validators.required),
             // currencyInput: new FormControl(null, Validators.required),
             // emailInput: new FormControl({value: null, disabled: true}, Validators.required),
-            // numberInput: new FormControl(null, Validators.required),
-            // customSearchable: new FormControl(null, Validators.required),
+            numberInput: new FormControl(null, Validators.required),
+            customSearchable: new FormControl(null, Validators.required),
             // checkbox: new FormControl(null, [Validators.requiredTrue, Validators.required]),
             // textArea: new FormControl(null, [Validators.required, Validators.maxLength(5)]),
             // datePicker: new FormControl(null, Validators.required),
             // datePickerRange: new FormControl(null, Validators.required),
-            // radio: new FormControl(null, Validators.required),
+            radio: new FormControl(null, Validators.required),
             // toggle: new FormControl(null, Validators.required),
             // telephone: new FormControl(null, Validators.required),
             searchEmployee: new FormControl(null, Validators.required),
@@ -8264,8 +8252,11 @@ class RequestDetailsSectionComponent {
     }
     filterFn = InputFilters.buildPattern().allowEnglishAlphabets().allowDigits().allowSpace().build();
     mapFn = InputMappers.toUpperCase;
+    log(event) {
+        console.log(event);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-input class=\"section-item full\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"Input\"\r\n    [filterFn]=\"filterFn\"\r\n    [mapFn]=\"mapFn\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n      \r\n      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>-->\r\n    <!--\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n   <!-- <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n\r\n          <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n     <app-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "mapFn", "filterFn"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }, { kind: "component", type: TimepickerComponent, selector: "app-timepicker" }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <pre>\r\n\r\n      {{formGroup.value | json}}\r\n    </pre>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"options\">\r\n    </app-custom-searchable>\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      (selectedEmployee)=\"log($event)\"\r\n      label=\"Search-employee\">\r\n    </app-search-employee>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n\r\n    <app-input class=\"section-item full\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"texapp-input\" maxLength=\"5\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"true\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n      \r\n      <app-radio #r\r\n        class=\"section-item full\" \r\n        [isReadOnly]=\"isReadOnly\" \r\n        formControlName=\"radio\" \r\n        [options]=\"options\" \r\n        [tooltip]=\"'radio tooltip text'\"\r\n        label=\"Radio\">\r\n      </app-radio> \r\n      \r\n      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>-->\r\n    <!--\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n   <!-- <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n\r\n          <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n     <app-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "maxLength", "mapFn", "filterFn"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options", "displayedLabel", "key"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize", "maxLength"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmployee", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }, { kind: "component", type: TimepickerComponent, selector: "app-timepicker" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -8293,8 +8284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         TimepickerComponent,
                         FormsModule,
                         InputMaskComponent,
-                        MultiselectComponent
-                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-input class=\"section-item full\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"Input\"\r\n    [filterFn]=\"filterFn\"\r\n    [mapFn]=\"mapFn\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n      \r\n      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>-->\r\n    <!--\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n   <!-- <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n\r\n          <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n     <app-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
+                        MultiselectComponent,
+                        JsonPipe
+                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <pre>\r\n\r\n      {{formGroup.value | json}}\r\n    </pre>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"options\">\r\n    </app-custom-searchable>\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      (selectedEmployee)=\"log($event)\"\r\n      label=\"Search-employee\">\r\n    </app-search-employee>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n\r\n    <app-input class=\"section-item full\" \r\n    [isReadOnly]=\"isReadOnly\" \r\n    formControlName=\"test\" \r\n    label=\"texapp-input\" maxLength=\"5\">\r\n    </app-input>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [maxLength]=\"2\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\" [multiple]=\"true\"\r\n      [displayedFiles]=\"formGroup.controls.attachment.value\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"true\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n      \r\n      <app-radio #r\r\n        class=\"section-item full\" \r\n        [isReadOnly]=\"isReadOnly\" \r\n        formControlName=\"radio\" \r\n        [options]=\"options\" \r\n        [tooltip]=\"'radio tooltip text'\"\r\n        label=\"Radio\">\r\n      </app-radio> \r\n      \r\n      <!-- <app-timepicker\r\n        label=\"time picker\"\r\n        formControlName=\"timePicker\" \r\n        [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n      </app-timepicker> -->\r\n    <!-- <div class=\"table-responsive full\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>time</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody formArrayName=\"candidates\">\r\n          <tr>\r\n            <td>\r\n            <app-timepicker\r\n              [ngModel]=\"timePicker\" \r\n              (ngModelChange)=\"timePickerChange($event)\"\r\n              [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n              [insideTable]=\"true\">\r\n            </app-timepicker>\r\n            </td>\r\n        </tbody>\r\n      </table>\r\n    </div> -->\r\n      <!-- <app-timepicker\r\n      label=\"time picker\"\r\n      [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n      placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>-->\r\n    <!--\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n   <!-- <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n\r\n          <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n     <app-timepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"test\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"/>\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{
@@ -8361,7 +8353,7 @@ class GeneralApproverSectionComponent {
         this.fieldsForm.reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeneralApproverSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GeneralApproverSectionComponent, isStandalone: true, selector: "app-general-approver-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <app-textarea class=\"section-item\" formControlName=\"comment\" [label]=\"'comment'\" [required]=\"false\"\r\n      [isReadOnly]=\"section?.header?.readOnly\">\r\n    </app-textarea>\r\n\r\n  </form>\r\n</div>\r\n\r\n\r\n@if (!section?.header?.readOnly) {\r\n<div class=\"mt-4\">\r\n  <lib-action-buttons [lovOptions]=\"lov?.['decision']?.options\" [lovType]=\"lov?.['decision']?.type\" [section]=\"section\"\r\n    [form]=\"form\" [sections]=\"form.sections\" [showApprovalCycle]=\"true\" [customCall]=\"false\" [fieldsForm]=\"formGroup\"\r\n    (customCallEmit)=\"customCallSubmit($event)\" (resetFormEmit)=\"resetForm()\" />\r\n</div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GeneralApproverSectionComponent, isStandalone: true, selector: "app-general-approver-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <app-textarea class=\"section-item\" formControlName=\"comment\" [label]=\"'comment'\" [required]=\"false\"\r\n      [isReadOnly]=\"section?.header?.readOnly\">\r\n    </app-textarea>\r\n\r\n  </form>\r\n</div>\r\n\r\n\r\n@if (!section?.header?.readOnly) {\r\n<div class=\"mt-4\">\r\n  <lib-action-buttons [lovOptions]=\"lov?.['decision']?.options\" [lovType]=\"lov?.['decision']?.type\" [section]=\"section\"\r\n    [form]=\"form\" [sections]=\"form.sections\" [showApprovalCycle]=\"true\" [customCall]=\"false\" [fieldsForm]=\"formGroup\"\r\n    (customCallEmit)=\"customCallSubmit($event)\" (resetFormEmit)=\"resetForm()\" />\r\n</div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength", "mapFn", "filterFn"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeneralApproverSectionComponent, decorators: [{
             type: Component,