bpm-core 0.0.121 → 0.0.124

package/fesm2022/bpm-core.mjs

@@ -20,7 +20,7 @@ import * as i1$4 from '@angular/material/datepicker';
 import { MatDatepickerToggle, MatDatepickerInput, MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
 import * as i1$3 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
-import * as i7 from '@angular/material/input';
+import * as i8 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@ncstate/sat-popover';
 import { SatPopoverModule } from '@ncstate/sat-popover';
@@ -413,7 +413,8 @@ var en = {
     itemsPerPage: "Items per page",
     startDate: "Start Date",
     endDate: "End Date",
-    textArea: "Text area"
+    textArea: "Text area",
+    enter: "Enter",
 };
 
 var ar = {
@@ -609,7 +610,8 @@ var ar = {
     itemsPerPage: "عدد العناصر بالصفحة",
     startDate: "تاريخ البداية",
     endDate: "تاريخ النهاية",
-    textArea: "خانة النص"
+    textArea: "خانة النص",
+    enter: "ادخل",
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2446,7 +2448,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]=\"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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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"] }] });
+        ], 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CustomSearchableComponent, decorators: [{
             type: Component,
@@ -2463,7 +2465,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]=\"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}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], selectedValue: [{
@@ -2597,7 +2599,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]=\"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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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$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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2616,7 +2618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         ...MatDatePickerImports,
                         ...MatFormImports,
                         ...Shareds
-                    ], 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]=\"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"] }]
+                    ], 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"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], calendarType: [{
@@ -2828,7 +2830,7 @@ class InputComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"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\"\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\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n\r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n  <mat-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: "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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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  <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    />\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    />\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    />\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -2843,7 +2845,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\"\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\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n\r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n  <mat-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    <!-- 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    />\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    />\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    />\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: [{
@@ -2951,7 +2953,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputNumberComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"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\"\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: "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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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        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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -2965,7 +2967,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\"\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      <!-- 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"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3010,7 +3012,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\"\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: "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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
@@ -3023,7 +3025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => InputEmailComponent),
                             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\"\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"] }]
+                    ], 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"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3056,7 +3058,7 @@ class InputMaskComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputMaskComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n\r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n\r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n\r\n\r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n\r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n\r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\">\r\n      </label>\r\n\r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n\r\n\r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n\r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
@@ -3073,7 +3075,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         InfoItemComponent,
                         ReactiveFormsModule,
                         NgClass,
-                    ], template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n\r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n\r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n\r\n\r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n\r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
+                        TranslatePipe
+                    ], template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n\r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder || (label ? ('enter' | translate) + ' ' + label : '')\">\r\n      </label>\r\n\r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n\r\n\r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n\r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3203,7 +3206,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\"\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: "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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
@@ -3221,7 +3224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true,
                         },
                         MycurrencyPipe
-                    ], 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\"\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"] }]
+                    ], 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"] }]
         }], propDecorators: { floatLabel: [{
                 type: Input
             }], className: [{
@@ -3390,6 +3393,8 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
         return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + id;
     }
     selectOption(object, ev) {
+        if (!this.control.touched)
+            this.onTouchedFn();
         this.userAlreadyExist = false;
         this.selected = true;
         this.data = [];
@@ -3429,7 +3434,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SearchEmployeeComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"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      />\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$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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
             type: Component,
@@ -3448,7 +3453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => SearchEmployeeComponent),
                             multi: true,
                         },
-                    ], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"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      />\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"] }]
+                    ], 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"] }]
         }], propDecorators: { valueName: [{
                 type: Input
             }], className: [{
@@ -3678,7 +3683,7 @@ class TextareaComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"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\"\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\"\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\"\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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "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: "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        @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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -3692,7 +3697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"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\"\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\"\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\"\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        @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" }]
         }], propDecorators: { className: [{
                 type: Input
             }], preventSpecailChar: [{
@@ -4878,7 +4883,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\"\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: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -4896,7 +4901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => MultiselectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"multipleSelect\"\r\n  ></app-info-item>\r\n} @else {\r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <mat-select \r\n      (selectionChange)=\"selectionChange($event)\" \r\n      [value]=\"mapKeyValuePairsToKeys(value)\" \r\n      multiple \r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled\"\r\n    >\r\n      <mat-select-trigger>\r\n        {{value?.[0]?.value || ''}}\r\n        @if (value?.length > 1) {\r\n          <span class=\"additional-selection\">\r\n            (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n          </span>\r\n        }\r\n      </mat-select-trigger>\r\n      @for (item of options; track item) {\r\n        <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n      }\r\n    </mat-select>\r\n    @if (loading) {\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"multipleSelect\"\r\n  ></app-info-item>\r\n} @else {\r\n  @if(label){\r\n    <app-form-label\r\n      [label]=\"label\"\r\n      [optional]=\"required || mandatory ? false : true\"\r\n      [tooltip]=\"tooltip\"\r\n    ></app-form-label>\r\n  }\r\n  <mat-form-field>\r\n    <mat-select \r\n      (selectionChange)=\"selectionChange($event)\" \r\n      [value]=\"mapKeyValuePairsToKeys(value)\" \r\n      multiple \r\n      [placeholder]=\"placeholder || (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"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], displayedLabel: [{
@@ -4972,7 +4977,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\"\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"] }], 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: 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TimepickerComponent, decorators: [{
             type: Component,
@@ -4986,6 +4991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         MatFormField,
                         MatInput,
                         FormsModule,
+                        TranslatePipe
                     ], providers: [
                         provideNativeDateAdapter(),
                         {
@@ -4993,7 +4999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => TimepickerComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"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\"\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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isReadOnly) {\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [value]=\"control?.value\"\r\n    type=\"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"] }]
         }] });
 
 function mapTo(path, source, allowUndefined = false, allowArrayWithSingleValue = false) {
@@ -7778,6 +7784,7 @@ class RequestDetailsSectionComponent {
             // // ...newForm,
             // attachment: new FormControl(null, Validators.required),
             attachmentSection: new FormControl([], Validators.required),
+            test: new FormControl()
         });
         /*    if(this.lov?.['decision']?.options?.length){
         
@@ -7900,7 +7907,7 @@ class RequestDetailsSectionComponent {
         this.pageSize = event.pageSize;
     }
     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-search-employee\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\">\r\n    </app-search-employee>\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-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { 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    <app-search-employee\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\">\r\n    </app-search-employee>\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: 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: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: TimepickerComponent, selector: "app-timepicker" }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -7926,8 +7933,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         TableComponent,
                         TranslatePipe,
                         TimepickerComponent,
-                        FormsModule
-                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\">\r\n    </app-search-employee>\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-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
+                        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-search-employee\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\">\r\n    </app-search-employee>\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"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{