bpm-core 0.0.55 → 0.0.56

package/fesm2022/bpm-core.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, forwardRef, EventEmitter, Input, Output, Directive, HostListener, inject, ViewChild, NO_ERRORS_SCHEMA, DestroyRef, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Injectable, Inject, inject, DestroyRef, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, forwardRef, EventEmitter, Input, Output, Directive, HostListener, ViewChild, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i5 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import { Subject, ReplaySubject, BehaviorSubject, catchError, throwError, switchMap, from } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { map } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5$1 from '@angular/common';
 import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i4$1 from '@angular/material/core';
@@ -52,7 +53,6 @@ import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
 import * as i2$4 from '@angular/material/expansion';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i3$1 from 'ng-dynamic-component';
 import { ComponentOutletIoDirective, DynamicModule, DynamicComponentInjectorToken } from 'ng-dynamic-component';
@@ -809,6 +809,7 @@ class CoreService {
     historyDataLoaded;
     historyData = [];
     isMobile;
+    destroyRef = inject(DestroyRef);
     constructor(http, config) {
         this.http = http;
         this.config = config;
@@ -833,7 +834,7 @@ class CoreService {
     }
     getLoggedInUserData() {
         let loggedInEmail = this.loggedInUserId();
-        this.employeeProfile(loggedInEmail).subscribe((response) => {
+        this.employeeProfile(loggedInEmail).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((response) => {
             this.loggedInUserData = response?.["Users"]?.[0];
             console.log('getLoggedInUserData', response);
         });
@@ -1044,7 +1045,7 @@ class CoreService {
         result.sections.push(new Section(SECTION_ID_REQUEST_DETAILS, new SectionHeader(DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, requestDetailsHasComment, (payload.data['workflowSteps'] ? READ_ONLY : isReadOnly)), payload.data.request));
         if (result.header.formId) {
             result.commentsDrop = (!result.commentsDrop ? [] : result.commentsDrop);
-            this.loadHistory(result.header.formId).subscribe((response) => {
+            this.loadHistory(result.header.formId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((response) => {
                 if (response) {
                     response.items.forEach((item) => {
                         if (item.sequenceNumber !== '0' && item.processedBy) {
@@ -1057,7 +1058,7 @@ class CoreService {
         }
         const inboxType = this.getInboxType(result);
         if (result.header.formId && (!this.isOpenOnInbox())) {
-            this.getInboxItem(result.header.formId, inboxType).subscribe((response) => {
+            this.getInboxItem(result.header.formId, inboxType).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((response) => {
                 if (response) {
                     const item = response.item;
                     result.inboxItem = new InboxItem(item['flagging'].flagPriority, item['flagging']['isFlagged'], item.feedback['canRequestFeedback'], item.feedback['hasFeedback'], item.feedback['isPending'], item.feedback['isRequested'], item.feedback['isResponded']);
@@ -2598,7 +2599,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){ @if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  @if(!required){\r\n  <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$2.MatDatepickerModule }, { kind: "directive", type: i1$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){ @if(label){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$2.MatDatepickerModule }, { kind: "directive", type: i1$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -2616,7 +2617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         ...MatDatePickerImports,
                         ...MatFormImports,
                         ...Shareds
-                    ], template: "@if(!isReadOnly){ @if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n  @if(!required){\r\n  <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], template: "@if(!isReadOnly){ @if(label){\r\n  @if(label){\r\n    <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], yearOnly: [{
@@ -3053,6 +3054,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
     isUniqueUsers = false;
     userAlreadyExist = false;
     emitedDeletedValue = new EventEmitter();
+    destroyRef = inject(DestroyRef);
     deleteRow(ind, rowData) {
         if (!this.isReadOnly) {
             this.arrayList = this.arrayList.filter((item, index) => {
@@ -3071,7 +3073,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
         if (input.length >= 3) {
             this.selected = false;
             this.loading = true;
-            this.coreService.searchEmployee(input).subscribe({
+            this.coreService.searchEmployee(input).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
                 next: (form) => {
                     this.loading = false;
                     this.data = form.Users;
@@ -3671,6 +3673,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     maxSize = '10';
     inputFile;
     dialog = inject(MatDialog);
+    destroyRef = inject(DestroyRef);
     validImageTypes = {
         jpg: ['image/jpeg', 'image/pjpeg'],
         JPG: ['image/jpeg', 'image/pjpeg'],
@@ -3899,7 +3902,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
             "fileContents": field.fileContents,
         };
         this.uploading = true;
-        this.coreService.getAttachments(data).subscribe({
+        this.coreService.getAttachments(data).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
             next: (form) => {
                 const newObj = {
                     "fileName": field.fileName,
@@ -3981,7 +3984,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         this.selectedTemplateAttachment.emit(null);
     }
     downloadFile(event, field) {
-        this.coreService.loadFile(field.attachmentId).subscribe((responseObject) => {
+        this.coreService.loadFile(field.attachmentId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((responseObject) => {
             const fileInformation = responseObject.body;
             this.coreService.saveFile(fileInformation);
             /*const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
@@ -4128,6 +4131,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
     hasColumnBreak;
     section;
     formGroup;
+    destroyRef = inject(DestroyRef);
     constructor(injector, i18n, toasterService, coreService, sanitizer, fb, dialogRef, dialogData) {
         super(injector, i18n, toasterService, coreService, sanitizer, fb);
         this.dialogRef = dialogRef;
@@ -4178,7 +4182,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
             fileContents: this.formGroup.controls['file'].value.fileContents,
         };
         this.uploading = true;
-        this.coreService.getAttachments(data).subscribe((Response) => {
+        this.coreService.getAttachments(data).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((Response) => {
             this.uploading = false;
             if (Response) {
                 const newObj = {
@@ -4247,6 +4251,7 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
     totalRecords = 0;
     pageSize = 5;
     pageNumber = 0;
+    destroyRef = inject(DestroyRef);
     ngOnInit() {
         super.ngOnInit();
         if (this.control.value) {
@@ -4356,7 +4361,7 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
     }
     downloadFile(event, field) {
         return new Promise((resolve, reject) => {
-            this.coreService.loadFile(field.attachmentId).subscribe((responseObject) => {
+            this.coreService.loadFile(field.attachmentId).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((responseObject) => {
                 const fileInformation = responseObject.body;
                 /*const fileInformation = responseObject.body;
                 const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
@@ -4508,6 +4513,7 @@ class ApprovalsWorkflowComponent {
     form;
     approvals = [];
     loading = false;
+    destroyRef = inject(DestroyRef);
     constructor(i18n, sidenavService, coreService, toasterService) {
         this.i18n = i18n;
         this.sidenavService = sidenavService;
@@ -4519,7 +4525,7 @@ class ApprovalsWorkflowComponent {
             return;
         }
         this.initializeApprovals();
-        this.coreService.perspectiveApproves(this.section.body.details).subscribe(response => this.handleResponse(response), err => this.handleError(err));
+        this.coreService.perspectiveApproves(this.section.body.details).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(response => this.handleResponse(response), err => this.handleError(err));
     }
     isLoading() {
         return this.loading;
@@ -4613,6 +4619,7 @@ class ActionButtonsComponent {
         'SUBMIT': false
     };
     submittingForm;
+    destroyRef = inject(DestroyRef);
     constructor(i18n, actionStateService, coreService, dialog, toasterService, cdRef) {
         this.i18n = i18n;
         this.actionStateService = actionStateService;
@@ -4620,7 +4627,7 @@ class ActionButtonsComponent {
         this.dialog = dialog;
         this.toasterService = toasterService;
         this.cdRef = cdRef;
-        this.actionStateService.actionStates$.subscribe(states => this.actionStates = states);
+        this.actionStateService.actionStates$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(states => this.actionStates = states);
     }
     ngAfterViewInit() {
         this.lovOptions?.forEach((item) => {
@@ -4646,7 +4653,7 @@ class ActionButtonsComponent {
         }
         this.isSubmitting[action] = true;
         this.submittingForm = true;
-        this.coreService.submitForm(section, action).subscribe((response) => {
+        this.coreService.submitForm(section, action).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((response) => {
             if (response) {
                 this.isSubmitting[action] = false;
                 this.success(response);
@@ -4991,6 +4998,7 @@ class FeedbackSectionComponent {
     isResponseValidated = false;
     employeeInput = null;
     feedbackId = null;
+    destroyRef = inject(DestroyRef);
     constructor(feedBackService, i18n, data) {
         this.feedBackService = feedBackService;
         this.i18n = i18n;
@@ -5038,7 +5046,7 @@ class FeedbackSectionComponent {
         }
     }
     getFeedBack() {
-        this.feedBackService.getFeedback(this.profile.employeeEmail).subscribe((Response) => {
+        this.feedBackService.getFeedback(this.profile.employeeEmail).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((Response) => {
             if (Response) {
                 if (Response instanceof Messages) {
                     this.showError(Response);
@@ -5069,7 +5077,7 @@ class FeedbackSectionComponent {
     addFeedback() {
         if (this.isFeedbackValidated) {
             const email = this.searchEmp.personEmail, question = this.feedBackQuestion;
-            this.feedBackService.submitFeedback({ email, question }).subscribe((Response) => {
+            this.feedBackService.submitFeedback({ email, question }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((Response) => {
                 if (Response) {
                     if (Response instanceof Messages) {
                         this.showError(Response);
@@ -5102,7 +5110,7 @@ class FeedbackSectionComponent {
     addResponse() {
         if (this.isFeedbackValidated) {
             const feedbackId = this.feedbackId, feedbackResponse = this.feedBackResponse;
-            this.feedBackService.addResponse({ feedbackId, feedbackResponse }).subscribe((Response) => {
+            this.feedBackService.addResponse({ feedbackId, feedbackResponse }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((Response) => {
                 if (Response) {
                     if (Response instanceof Messages) {
                         this.showError(Response);
@@ -5217,15 +5225,18 @@ class ActivitiesComponent {
     downloadFile(event) {
         console.log(event.detail.value);
         const placeholder = event.target.nextElementSibling;
-        this.coreService.loadFile(event.detail.value.id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((responseObject) => {
-            const fileInformation = responseObject.body;
-            const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
-            const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
-            placeholder.href = URL.createObjectURL(file);
-            placeholder.download = file.name;
-            placeholder.click();
-        }, error => {
-            console.error('Error loading file:', error);
+        this.coreService.loadFile(event.detail.value.id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+            next: (responseObject) => {
+                const fileInformation = responseObject.body;
+                const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
+                const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
+                placeholder.href = URL.createObjectURL(file);
+                placeholder.download = file.name;
+                placeholder.click();
+            },
+            error: (error) => {
+                console.error('Error loading file:', error);
+            }
         });
     }
     closeSidenav() {
@@ -5302,6 +5313,7 @@ class PreviousRequestsComponent {
     i18n;
     fb;
     previousRequests = [];
+    destroyRef = inject(DestroyRef);
     loading;
     filterFormGroup;
     errorMessage;
@@ -5339,6 +5351,12 @@ class PreviousRequestsComponent {
         this.i18n = i18n;
         this.fb = fb;
     }
+    /**
+     * Initializes the component on initialization.
+     * It creates a form and sets the available statuses based on the current language.
+     *
+     * @return {void}
+     */
     ngOnInit() {
         this.createForm();
         this.statuses = [
@@ -5347,16 +5365,46 @@ class PreviousRequestsComponent {
             { key: "PENDING", value: this.i18n.language == 'en' ? "Pending" : "معلق" }
         ];
     }
+    // variables to manage subscription
+    ngUnsubscribe = new Subject();
+    // new helper methods for form controls
+    /**
+     * Generates form controls for the current month and year.
+     *
+     * @return {object} An object containing form controls for the current month and year.
+     *                  - month: FormControl for the current month with Validators required
+     *                  - year: FormControl for the current year with Validators required
+     */
+    currentDateControl() {
+        const date = new Date();
+        const month = date.getUTCMonth() + 1;
+        const year = date.getFullYear();
+        return {
+            month: new FormControl({ key: month, value: month }, Validators.required),
+            year: new FormControl({ key: year, value: year }, Validators.required),
+        };
+    }
+    /**
+     * Initializes a form group for filtering data.
+     * It creates form controls for the current date and status.
+     * Also sets up a subscription to listen for changes in the status control.
+     *
+     * @return {void}
+     */
     createForm() {
         this.filterFormGroup = this.fb.group({
-            month: new FormControl({ key: new Date().getUTCMonth() + 1, value: new Date().getUTCMonth() + 1 }, Validators.required),
-            year: new FormControl({ key: new Date().getFullYear(), value: new Date().getFullYear() }, Validators.required),
+            ...this.currentDateControl(),
             status: new FormControl('', Validators.required)
         });
-        this.filterFormGroup.get('status').valueChanges.subscribe(value => {
+        this.filterFormGroup.get('status').valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
             this.filterStatus();
         });
     }
+    /**
+     * Perform initialization after Angular has fully initialized a component's view.
+     *
+     * @return {void}
+     */
     ngAfterViewInit() {
         if (this.coreService.historyDataLoaded) {
             this.previousRequests = this.coreService.historyData;
@@ -5365,6 +5413,14 @@ class PreviousRequestsComponent {
             this.getRequests();
         }
     }
+    /**
+     * Clear all filters and reset the form group to its initial state.
+     * Sets the month and year filters to the current date's month and year respectively.
+     * Sets the status filter to an empty string.
+     * Toggles the isOpen property and triggers the filterStatus method.
+     *
+     * @return {void}
+     */
     clearFilters() {
         this.filterFormGroup.reset();
         this.filterFormGroup.get('month').setValue({ key: new Date().getUTCMonth() + 1, value: new Date().getUTCMonth() + 1 });
@@ -5373,60 +5429,173 @@ class PreviousRequestsComponent {
         this.isOpen = !this.isOpen;
         this.filterStatus();
     }
+    /**
+     * Toggles the isOpen property and triggers the getRequests() method.
+     *
+     * @return {void}
+     */
     applyFilters() {
         this.isOpen = !this.isOpen;
         this.getRequests();
     }
+    /**
+     * Retrieves request data based on form values.
+     *
+     * @return {void}
+     */
     getRequests() {
-        if (this.searchData.year == this.filterFormGroup.get('year').value?.key && this.searchData.month == this.filterFormGroup.get('month').value?.key) {
+        const formValues = this.getFormValues();
+        if (this.areFormValuesEqual(this.searchData, formValues)) {
             this.filterStatus();
         }
         else {
-            this.searchData = {
-                year: this.filterFormGroup.get('year').value?.key,
-                month: this.filterFormGroup.get('month').value?.key,
-            };
-            this.loading = true;
-            this.coreService.historyData = [];
-            this.previousRequests = [];
-            this.coreService.myRequests(this.searchData).subscribe({
-                next: (response) => {
-                    this.coreService.historyData = response.history;
-                    this.previousRequests = this.coreService.historyData;
-                    this.coreService.historyDataLoaded = true;
-                    this.filterStatus();
-                },
-                error: (err) => {
-                    this.loading = false;
-                    this.errorMessage = err?.error?.meta?.messages?.['0']?.message;
-                    this.toasterService.error(this.errorMessage);
-                },
-                complete: () => {
-                    this.loading = false;
-                }
-            });
+            this.updateSearchData(formValues);
+            this.requestCoreData();
         }
     }
+    /**
+     * Retrieves the form values including the year and month.
+     *
+     * @return {Object} Returns an object containing the year and month values.
+     */
+    getFormValues() {
+        return {
+            year: this.getYearValue(),
+            month: this.getMonthValue(),
+        };
+    }
+    /**
+     * Retrieves the selected year value from the filter form group.
+     *
+     * @return The selected year value as a number.
+     */
+    getYearValue() {
+        return this.filterFormGroup.get('year').value?.key;
+    }
+    /**
+     * Retrieves the month value from the filter form group.
+     *
+     * @return {number} The month value retrieved from the form group.
+     */
+    getMonthValue() {
+        return this.filterFormGroup.get('month').value?.key;
+    }
+    /**
+     * Checks if the year and month values of two form objects are equal.
+     *
+     * @param {Object} first - The first form object to compare.
+     * @param {Object} second - The second form object to compare.
+     * @returns {boolean} - true if the year and month values are equal, otherwise false.
+     */
+    areFormValuesEqual(first, second) {
+        return first.year == second.year && first.month == second.month;
+    }
+    /**
+     * Update the search data with the provided data.
+     *
+     * @param {Object} data - The new search data to update.
+     *
+     * @return {void}
+     */
+    updateSearchData(data) {
+        this.searchData = data;
+    }
+    /**
+     * Sends a request to retrieve core data using the Core Service API.
+     * Initializes loading and requests before making the call.
+     *
+     * @return {void}
+     */
+    requestCoreData() {
+        this.initializeLoadingAndRequests();
+        this.loading = true;
+        this.coreService.historyData = [];
+        this.previousRequests = [];
+        this.coreService.myRequests(this.searchData).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+            next: (response) => {
+                this.coreService.historyData = response.history;
+                this.previousRequests = this.coreService.historyData;
+                this.coreService.historyDataLoaded = true;
+                this.filterStatus();
+            },
+            error: (err) => {
+                this.loading = false;
+                this.errorMessage = err?.error?.meta?.messages?.['0']?.message;
+                this.toasterService.error(this.errorMessage);
+            },
+            complete: () => {
+                this.loading = false;
+            }
+        });
+    }
+    /**
+     * Initializes loading and requests.
+     *
+     * @return {void}
+     */
+    initializeLoadingAndRequests() {
+        this.loading = true;
+        this.coreService.historyData = [];
+        this.previousRequests = [];
+    }
+    /**
+     * Handles successful response from a request.
+     *
+     * @param {Object} response - The response object containing history data.
+     * @return {void}
+     */
+    handleRequestSuccess(response) {
+        this.coreService.historyData = response.history;
+        this.previousRequests = this.coreService.historyData;
+        this.coreService.historyDataLoaded = true;
+        this.filterStatus();
+    }
+    /**
+     * Handles the error received from a request
+     *
+     * @param {Object} err - The error object containing information about the error
+     * @return {void}
+     */
+    handleRequestError(err) {
+        this.loading = false;
+        this.errorMessage = err?.error?.meta?.messages?.['0']?.message;
+        this.toasterService.error(this.errorMessage);
+    }
+    /**
+     * Filters the previous requests based on the status selected in the filter form.
+     *
+     * @return {void}
+     */
     filterStatus() {
+        const statusKey = this.filterFormGroup.get('status').value?.key;
         this.previousRequests = this.coreService.historyData;
-        let filterData = [];
-        if (this.filterFormGroup.get('status').value?.key) {
-            filterData = this.previousRequests.filter((request) => {
-                return request.form.formStatus.key === this.filterFormGroup.get('status').value.key;
-            });
+        let filterData;
+        if (statusKey) {
+            filterData = this.previousRequests.filter((request) => request.form?.['formStatus']?.key === statusKey);
         }
         else {
             filterData = this.previousRequests;
         }
         this.previousRequests = filterData;
     }
+    /**
+     * Opens a form in a new window based on the provided form ID.
+     *
+     * @param {string} formId - The ID of the form to be opened.
+     * @return {void}
+     */
     viewForm(formId) {
         if (formId) {
             window.open('/group/i-gate/wm-bpm/forms?formId=' + formId);
         }
     }
+    ngOnDestroy() {
+        // emit the value to complete all active subscriptions
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i5.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i2.ToastrService }, { token: CoreI18nService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (previousRequests?.length) {\r\n        <div class=\"history-cards-container\" *ngIf=\"pageView.value === 'card'\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n        <div class=\"table-responsive\" *ngIf=\"pageView.value === 'list'\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5$1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      }\r\n      @if (!previousRequests?.length) {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5$1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, decorators: [{
             type: Component,
@@ -5442,7 +5611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         CdkOverlayOrigin,
                         CustomSearchableComponent,
                         CdkConnectedOverlay
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (previousRequests?.length) {\r\n        <div class=\"history-cards-container\" *ngIf=\"pageView.value === 'card'\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n        <div class=\"table-responsive\" *ngIf=\"pageView.value === 'list'\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (pageView.value === 'card') {\r\n        <div class=\"history-cards-container\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n      }\r\n      @if (pageView.value === 'list') {\r\n        <div class=\"table-responsive\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      }\r\n      @if (!previousRequests?.length) {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"] }]
         }], ctorParameters: () => [{ type: i5.MatDialog }, { type: SidenavService }, { type: CoreService }, { type: i2.ToastrService }, { type: CoreI18nService }, { type: i4.FormBuilder }] });
 
 const StatusMap$1 = {
@@ -5474,6 +5643,7 @@ class ServiceHeaderComponent {
     serviceFaq = [];
     approvals = [];
     flagPriority;
+    destroyRef = inject(DestroyRef);
     constructor(cdRef, coreService, i18n, feedBackService, dialog, sidenavService, toasterService) {
         this.cdRef = cdRef;
         this.coreService = coreService;
@@ -5572,7 +5742,7 @@ class ServiceHeaderComponent {
      * @return {void}
      */
     subscribeToSetFlagPriority(id) {
-        this.coreService.setFlagPriority(id).subscribe((response) => {
+        this.coreService.setFlagPriority(id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((response) => {
             if (response) {
                 this.toasterService.success(this.i18n.translate('flagStatusUpdated'));
             }
@@ -5766,6 +5936,7 @@ class FormSectionComponent {
     };
     input;
     processingDate;
+    destroyRef = inject(DestroyRef);
     constructor(i18n, coreService, sidenavService) {
         this.i18n = i18n;
         this.coreService = coreService;
@@ -5906,7 +6077,7 @@ class FormSectionComponent {
      * @return {void}
      */
     fetchAndSetUserProfile(userEmail, personType) {
-        this.coreService.employeeProfile(userEmail).subscribe((response) => {
+        this.coreService.employeeProfile(userEmail).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((response) => {
             if (response) {
                 let userData = this.createUserProfileFromResponse(response);
                 this.openOrCreateUserProfile(userData, personType);
@@ -6015,6 +6186,7 @@ class WorkflowSectionComponent {
     segmentDynamicLoaderService = null;
     sectionFormComponent = null;
     sectionName = SECTION_ID_REQUEST_DETAILS;
+    destroyRef = inject(DestroyRef);
     constructor(i18n, cdRef) {
         this.i18n = i18n;
         this.cdRef = cdRef;
@@ -6031,7 +6203,7 @@ class WorkflowSectionComponent {
     }
     ngAfterViewChecked() {
         if (this.formStateObject && this.form && !this.startedListener) {
-            this.formStateObject.valueChanges.subscribe(
+            this.formStateObject.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(
             /* istanbul ignore next  */
             (form) => {
                 Object.keys(form).forEach((key) => {
@@ -6485,6 +6657,7 @@ class RequestDetailsSectionComponent {
     pageSize = this.DEFAULT_PAGE_SIZE;
     columnsConfig = [];
     columns = [];
+    destroyRef = inject(DestroyRef);
     isError = false;
     categoryData = [
         {
@@ -6774,7 +6947,7 @@ class RequestDetailsSectionComponent {
             callDate: new FormControl(null, [Validators.required]),
             agreement: new FormControl(null, [Validators.required, Validators.requiredTrue]),
         });
-        this.formGroup.valueChanges.subscribe(value => {
+        this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
             this.lov?.['decision']?.options?.forEach(option => {
                 let isActionValid = this.checkValidity(option.value);
                 this.actionStateService.setActionValid(option.value, isActionValid);
@@ -6864,6 +7037,7 @@ class GeneralApproverSectionComponent {
     className = "info-section";
     fieldsForm;
     numbers = [...Array(100).keys()].map(i => i + 1);
+    destroyRef = inject(DestroyRef);
     formGroup = new FormGroup({
         name: new FormControl('', [Validators.required, Validators.maxLength(3), Validators.minLength(2)]),
         countries: new FormControl('', Validators.required),
@@ -6892,7 +7066,7 @@ class GeneralApproverSectionComponent {
             });
         };
         checkValidityAndUpdate();
-        this.fieldsForm.valueChanges.subscribe(() => {
+        this.fieldsForm.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             checkValidityAndUpdate();
         });
     }
@@ -7426,5 +7600,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormValidation, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
+export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormValidation, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map