tango-app-ui-manage-settings 3.0.51-dev → 3.0.53-dev

package/fesm2022/tango-app-ui-manage-settings.mjs

@@ -121,6 +121,10 @@ class ClientApiService {
     updateReport(id, data) {
         return this.http.put(`${this.reportApiUrl}/update-report/${id}`, data);
     }
+    deleteReport(reportId) {
+        // return this.http.put(`${this.reportApiUrl}/delete-report/${id}`, data)
+        return this.http.get(`${this.reportApiUrl}/delete-report/${reportId}`);
+    }
     getCsmUsers() {
         return this.http.get(`${this.clientApiUrl}/get-csm-users`);
     }
@@ -170,7 +174,7 @@ class ClientApiService {
         return this.http.put(`${this.matAppApiUrl}/updateTicketConfig/?clientId=${id}`, fromdata);
     }
     getTicketConfig(id) {
-        return this.http.get(`${this.matAppApiUrl}/getTicketConfig/?clientId=${id}`);
+        return this.http.get(`${this.matAppApiUrl}/getTicketConfig?clientId=${id}`);
     }
     saveAsTemplate(buffer, fileName) {
         const data = new Blob([buffer], {
@@ -776,11 +780,11 @@ class BrandDetailsComponent {
         return formData;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: BrandDetailsComponent, deps: [{ token: ClientApiService }, { token: i4$2.ToastService }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: BrandDetailsComponent, selector: "lib-brand-details", viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col-12\">\r\n        <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem($event)\">\r\n            <div class=\"settings-accordian-card \"  ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Brand Info</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-brand-info></lib-brand-info>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Billing Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-billing-details></lib-billing-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Signatory Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-signatory-details></lib-signatory-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: BrandInfoComponent, selector: "lib-brand-info" }, { kind: "component", type: BillingDetailsComponent, selector: "lib-billing-details" }, { kind: "component", type: SignatoryDetailsComponent, selector: "lib-signatory-details" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: BrandDetailsComponent, selector: "lib-brand-details", viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row\">\r\n    <div class=\"col-12\">\r\n        <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem($event)\">\r\n            <div class=\"settings-accordian-card \"  ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button type=\"button\" class=\"mainheading\" ngbAccordionButton >\r\n                        <div class=\"header-row\">\r\n                            <span >Brand Info</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-brand-info></lib-brand-info>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Billing Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-billing-details></lib-billing-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Signatory Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-signatory-details></lib-signatory-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: BrandInfoComponent, selector: "lib-brand-info" }, { kind: "component", type: BillingDetailsComponent, selector: "lib-billing-details" }, { kind: "component", type: SignatoryDetailsComponent, selector: "lib-signatory-details" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: BrandDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-brand-details', template: "<div class=\"row\">\r\n    <div class=\"col-12\">\r\n        <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem($event)\">\r\n            <div class=\"settings-accordian-card \"  ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Brand Info</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-brand-info></lib-brand-info>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Billing Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-billing-details></lib-billing-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Signatory Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-signatory-details></lib-signatory-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"] }]
+            args: [{ selector: 'lib-brand-details', template: "<div class=\"row\">\r\n    <div class=\"col-12\">\r\n        <div ngbAccordion #accordion=\"ngbAccordion\" [closeOthers]=\"true\" [destroyOnHide]=\"true\" (show)=\"openItem($event)\">\r\n            <div class=\"settings-accordian-card \"  ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button type=\"button\" class=\"mainheading\" ngbAccordionButton >\r\n                        <div class=\"header-row\">\r\n                            <span >Brand Info</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-brand-info></lib-brand-info>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Billing Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-billing-details></lib-billing-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"settings-accordian-card mt-6\" ngbAccordionItem>\r\n                <div class=\"d-flex\" ngbAccordionHeader>\r\n                    <button class=\"mainheading\" ngbAccordionButton>\r\n                        <div class=\"header-row\">\r\n                            <span >Signatory Details</span>\r\n                            <span class=\"divider\"></span>\r\n                        </div>\r\n                    </button>\r\n                </div>\r\n                <div ngbAccordionCollapse>\r\n                    <div ngbAccordionBody>\r\n                        <ng-template>\r\n                            <lib-signatory-details></lib-signatory-details>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [".settings-accordian-card{border-radius:10px;background:var(#FFF)}\n"] }]
         }], ctorParameters: () => [{ type: ClientApiService }, { type: i4$2.ToastService }, { type: i3.GlobalStateService }], propDecorators: { accordion: [{
                 type: ViewChild,
                 args: ['accordion', { static: true }]
@@ -3827,13 +3831,15 @@ class ReportConfigurationComponent {
     cd;
     gs;
     reportConfigurationForm;
-    emailList = [];
-    reportList = [];
+    emailList = [] = [];
+    reportList = [] = [];
     $emailInterrupt = new BehaviorSubject('');
     clientId;
     selectedReport;
     destroy$ = new Subject();
     emailValidation = [];
+    noData = false;
+    loading = true;
     constructor(fb, apiService, modalService, toaster, cd, gs) {
         this.fb = fb;
         this.apiService = apiService;
@@ -3841,6 +3847,9 @@ class ReportConfigurationComponent {
         this.toaster = toaster;
         this.cd = cd;
         this.gs = gs;
+        this.reportConfigurationForm = this.fb.group({
+            reports: this.fb.array([])
+        });
         this.initForm();
         this.apiService.clientData.pipe(takeUntil(this.destroy$)).subscribe((e) => {
             if (e) {
@@ -3849,6 +3858,9 @@ class ReportConfigurationComponent {
             }
         });
     }
+    get reportsFormArray() {
+        return this.reportConfigurationForm.get('reports');
+    }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.complete();
@@ -3856,10 +3868,10 @@ class ReportConfigurationComponent {
     emailValidator(value) {
         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
         const valid = emailRegex.test(value);
-        this.emailValidation.push(valid);
+        // this.emailValidation.push(valid);
     }
     ngAfterViewInit() {
-        this.reportConfigurationForm.get('email')?.valueChanges
+        this.reportsFormArray.get('email')?.valueChanges
             .pipe(map((value) => value.replace(/\n/g, '').replace(/\s/g, '')))
             .pipe(switchMap((val) => {
             return this.$emailInterrupt.pipe(takeUntil(this.destroy$)).pipe(map((interrupt) => {
@@ -3880,52 +3892,85 @@ class ReportConfigurationComponent {
         })).subscribe();
     }
     initForm() {
-        this.reportConfigurationForm = this.fb.group({
-            fileName: [''],
-            fileType: ['', Validators.required],
-            email: ['']
+        const reportFormGroup = this.fb.group({
+            id: [''],
+            reportName: ['', Validators.required],
+            fileType: [''],
+            email: this.fb.array([this.fb.control('', Validators.email)]),
+            disabled: [true]
         });
-        this.reportConfigurationForm.disable();
+        this.reportsFormArray.push(reportFormGroup);
     }
     patchForm(data) {
-        this.reportConfigurationForm.patchValue({
-            fileType: data.fileType,
-        }, { emitEvent: false, onlySelf: true });
-        this.emailList = data?.email;
+        const reportsFormArray = this.reportConfigurationForm.get('reports');
+        reportsFormArray.clear();
+        data.forEach((report) => {
+            reportsFormArray.push(this.fb.group({
+                id: [report._id],
+                reportName: [report.fileName],
+                fileType: [report.fileType, Validators.required],
+                email: this.fb.array(report.email),
+                disabled: [true]
+            }));
+        });
+        this.reportConfigurationForm.disable();
         this.cd.detectChanges();
     }
     getClientReports(clientId) {
+        this.loading = true;
+        this.reportList = [];
         this.apiService.getClientReports(clientId).pipe(takeUntil(this.destroy$)).subscribe({
             next: (res) => {
-                this.reportList = res.data;
-                this.selectedReport = res.data[0];
-                this.getSingleReport(res.data[0]._id);
+                if (res && res.code == 200 && res.data.length) {
+                    this.loading = false;
+                    this.noData = false;
+                    this.reportList = res.data;
+                    this.selectedReport = res.data[0];
+                }
+                else {
+                    this.noData = true;
+                    this.loading = false;
+                }
+                this.patchForm(this.reportList);
                 this.cd.detectChanges();
             },
             error: (err) => {
+                this.loading = false;
+                this.noData = true;
             }
         });
     }
-    onKeyDown(event) {
-        this.$emailInterrupt.next(event.code);
+    onKeyDown(event, index) {
+        if (event.code == 'Backspace' && event.target.value == '') {
+            let emailLen = (this.reportConfigurationForm.get('reports').at(index)).get('email')?.value.length;
+            (this.reportConfigurationForm.get('reports').at(index)).get('email').removeAt(emailLen - 1);
+            event.target.value = '';
+        }
+        if (event.code == 'Enter') {
+            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            const valid = emailRegex.test(event.target.value);
+            if (valid) {
+                (this.reportConfigurationForm.get('reports').at(index)).get('email').push(this.fb.control(event.target.value));
+                event.target.value = '';
+            }
+            else {
+                this.toaster.getErrorToast('Please Enter Valid Email.');
+            }
+        }
     }
-    removeChip(i) {
-        this.emailList.splice(i, 1);
-        this.emailValidation = [];
-        this.emailList.forEach((element) => { this.emailValidator(element); });
+    removeChip(i, j) {
+        (this.reportConfigurationForm.get('reports').at(i)).get('email').removeAt(j);
     }
     onReportSelect(event) {
         this.selectedReport = event;
-        this.getSingleReport(this.selectedReport._id);
+        this.getClientReports(this.clientId);
     }
-    getSingleReport(reportId) {
-        this.apiService.getSingleReport(reportId).pipe(takeUntil(this.destroy$)).subscribe({
-            next: (res) => {
-                this.patchForm(res.data);
-            },
-            error: (err) => {
-            }
-        });
+    getEnabledValue(i) {
+        const control = this.reportConfigurationForm.get('reports')?.get(i.toString())?.get('enabled');
+        return control ? control.value : null;
+    }
+    getEmails(index) {
+        return (this.reportConfigurationForm.get('reports').at(index)).get('email');
     }
     openAddModal() {
         const modalRef = this.modalService.open(AddReportComponent, { size: 'md', centered: true });
@@ -3936,35 +3981,55 @@ class ReportConfigurationComponent {
             }
         });
     }
+    getReportDisabled(index) {
+        return (this.reportConfigurationForm.get('reports').at(index)).get('disabled')?.value;
+    }
+    enableForm(index) {
+        this.reportConfigurationForm.enable();
+        (this.reportConfigurationForm.get('reports').at(index)).get('disabled')?.setValue(false);
+        this.reportConfigurationForm.enable();
+        this.cd.detectChanges();
+    }
+    deleteReport(reportId) {
+        this.apiService.deleteReport(reportId).subscribe({
+            next: (res) => {
+                this.toaster.getSuccessToast('Report has been deleted successfully');
+                this.getClientReports(this.clientId);
+            },
+            error: (err) => {
+                console.error('Error deleting report:', err);
+            }
+        });
+    }
     onCancel() {
         this.getClientReports(this.clientId);
         this.reportConfigurationForm.disable();
         this.apiService.clientFormData.next({ value: null, type: 'cancel', form: 'report-configuration' });
     }
-    onSubmit() {
-        let data = {
-            fileType: this.reportConfigurationForm.value.fileType,
-            email: this.emailList,
+    onSubmit(data) {
+        let params = {
+            fileType: data.value.fileType,
+            email: data.value.email,
             clientId: this.clientId
         };
-        this.apiService.updateReport(this.selectedReport._id, data).pipe(takeUntil(this.destroy$)).subscribe({
+        this.apiService.updateReport(data.value.id, params).pipe(takeUntil(this.destroy$)).subscribe({
             next: (e) => {
                 this.toaster.getSuccessToast(e.data?.result);
-                this.getSingleReport(this.selectedReport._id);
-                this.apiService.clientFormData.next({ value: null, type: 'submitted', form: 'null' });
+                this.getClientReports(this.clientId);
+                this.apiService.clientFormData.next({ value: null, type: 'cancel', form: 'report-configuration' });
             },
             error: (e) => {
                 this.toaster.getErrorToast(e.error?.error);
-                this.getSingleReport(this.selectedReport._id);
+                this.getClientReports(this.clientId);
             }
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ReportConfigurationComponent, deps: [{ token: i1$1.FormBuilder }, { token: ClientApiService }, { token: i1$2.NgbModal }, { token: i4$2.ToastService }, { token: i0.ChangeDetectorRef }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ReportConfigurationComponent, selector: "lib-report-configuration", ngImport: i0, template: "<form [formGroup]=\"reportConfigurationForm\">\r\n    <div class=\"row\">\r\n        <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n            <div class=\"col-12 mb-5\">\r\n                <div class=\" d-flex justify-content-end\">\r\n                    <button *ngIf=\"reportConfigurationForm.disabled\"\r\n                        (click)=\"reportConfigurationForm.disabled ? reportConfigurationForm.enable() : reportConfigurationForm.disable()\"\r\n                        type=\"button\" class=\"btn btn-outline align-items-end me-5\"><span class=\"me-2\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_2579_25125)\">\r\n                                    <path\r\n                                        d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_2579_25125\">\r\n                                        <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>Edit Details</button>\r\n                    <button [disabled]=\"reportConfigurationForm.disabled\" (click)=\"openAddModal()\" type=\"button\" class=\"btn btn-primary align-items-end\"><span\r\n                            class=\"me-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </span>Add Report</button>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n            <label for=\"infraDownTime\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n            <lib-select [items]=\"reportList\" [multi]=\"false\" [searchField]=\"'fileName'\"\r\n                [disabled]=\"reportConfigurationForm.get('fileName')?.disabled\" [idField]=\"'_id'\"\r\n                (selected)=\"onReportSelect($event)\" [selectedValues]=\"[selectedReport]\"></lib-select>\r\n        </div>\r\n        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n            <label for=\"count\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n            <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"count\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n            <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n            <div class=\"outer-container\">\r\n                <div class=\" input-container form-control\">\r\n                    <ng-container *ngFor=\"let domain of emailList; let i = index\">\r\n                        <span class=\"chip\">\r\n                            <span class=\"me-3\">{{domain}}</span>\r\n                            <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                    </ng-container>\r\n                    <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <div *ngIf=\"emailValidation.includes(false)\" class=\"text-danger mt-3\">Invalid Email Format</div>\r\n\r\n    <div *ngIf=\"reportConfigurationForm.enabled\">\r\n        <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n        <div class=\"d-flex justify-content-end\">\r\n            <a type=\"button\" class=\"btn btn-outline me-4 align-content-center\" (click)=\"onCancel()\">Cancel</a>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"reportConfigurationForm.invalid || !emailList?.length || emailValidation.includes(false)\" (click)=\"onSubmit()\"><span>Save Changes</span></button>\r\n        </div>\r\n    </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$2.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ReportConfigurationComponent, selector: "lib-report-configuration", ngImport: i0, template: "<form [formGroup]=\"reportConfigurationForm\">\r\n  <div class=\"row\">\r\n    <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \">\r\n      <div class=\"col-12 mb-5\">\r\n        <div class=\"d-flex justify-content-end\">\r\n          <button (click)=\"openAddModal()\" type=\"button\"\r\n            class=\"btn btn-primary align-items-end\">\r\n            <span class=\"me-2\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path d=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </span>\r\n            Add Report\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"loading\">\r\n      <div\r\n          class=\"row loader  d-flex justify-content-center align-items-center\">\r\n          <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n              </div>\r\n          </div>\r\n          <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n              </div>\r\n          </div>\r\n\r\n      </div>\r\n  </ng-container>\r\n    <ng-container *ngIf=\"noData\">\r\n      <div class=\"row\">\r\n          <div class=\"col-lg-12 mb-3\">\r\n              <div\r\n                  class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src w-25\"\r\n                      src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </ng-container>\r\n    <ng-container formArrayName=\"reports\">\r\n      <ng-container *ngFor=\"let report of reportsFormArray.controls; let i = index\" [formGroupName]=\"i\">\r\n        <div *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" class=\"d-flex justify-content-end mt-5\">\r\n          <div *ngIf=\"getReportDisabled(i)\" (click)=\"enableForm(i)\" type=\"button\"\r\n            class=\" align-items-end\">\r\n            <span class=\"me-2\">\r\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g filter=\"url(#filter0_d_13410_52264)\">\r\n                  <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                  <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                  <g clip-path=\"url(#clip0_13410_52264)\">\r\n                    <path\r\n                      d=\"M24.167 11.4999C24.3859 11.2811 24.6457 11.1074 24.9317 10.989C25.2176 10.8705 25.5241 10.8096 25.8337 10.8096C26.1432 10.8096 26.4497 10.8705 26.7357 10.989C27.0216 11.1074 27.2815 11.2811 27.5003 11.4999C27.7192 11.7188 27.8928 11.9786 28.0113 12.2646C28.1297 12.5506 28.1907 12.8571 28.1907 13.1666C28.1907 13.4761 28.1297 13.7826 28.0113 14.0686C27.8928 14.3546 27.7192 14.6144 27.5003 14.8333L16.2503 26.0833L11.667 27.3333L12.917 22.7499L24.167 11.4999Z\"\r\n                      stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  </g>\r\n                </g>\r\n                <defs>\r\n                  <filter id=\"filter0_d_13410_52264\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" filterUnits=\"userSpaceOnUse\"\r\n                    color-interpolation-filters=\"sRGB\">\r\n                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                      result=\"hardAlpha\" />\r\n                    <feOffset dy=\"1\" />\r\n                    <feGaussianBlur stdDeviation=\"1\" />\r\n                    <feColorMatrix type=\"matrix\"\r\n                      values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_13410_52264\" />\r\n                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_13410_52264\" result=\"shape\" />\r\n                  </filter>\r\n                  <clipPath id=\"clip0_13410_52264\">\r\n                    <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(10 9)\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n            </span>\r\n          </div>\r\n      \r\n          <div *ngIf=\"getReportDisabled(i)\" (click)=\"deleteReport(selectedReport._id)\"\r\n            class=\"align-items-end cursor-pointer\">\r\n            <span class=\"me-2\">\r\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g filter=\"url(#filter0_d_13252_178642)\">\r\n                  <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                  <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                  <path\r\n                    d=\"M12.5 14.0001H14.1667M14.1667 14.0001H27.5M14.1667 14.0001V25.6667C14.1667 26.1088 14.3423 26.5327 14.6548 26.8453C14.9674 27.1578 15.3913 27.3334 15.8333 27.3334H24.1667C24.6087 27.3334 25.0326 27.1578 25.3452 26.8453C25.6577 26.5327 25.8333 26.1088 25.8333 25.6667V14.0001H14.1667ZM16.6667 14.0001V12.3334C16.6667 11.8914 16.8423 11.4675 17.1548 11.1549C17.4674 10.8423 17.8913 10.6667 18.3333 10.6667H21.6667C22.1087 10.6667 22.5326 10.8423 22.8452 11.1549C23.1577 11.4675 23.3333 11.8914 23.3333 12.3334V14.0001M18.3333 18.1667V23.1667M21.6667 18.1667V23.1667\"\r\n                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <filter id=\"filter0_d_13252_178642\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" filterUnits=\"userSpaceOnUse\"\r\n                    color-interpolation-filters=\"sRGB\">\r\n                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                      result=\"hardAlpha\" />\r\n                    <feOffset dy=\"1\" />\r\n                    <feGaussianBlur stdDeviation=\"1\" />\r\n                    <feColorMatrix type=\"matrix\"\r\n                      values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_13252_178642\" />\r\n                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_13252_178642\" result=\"shape\" />\r\n                  </filter>\r\n                </defs>\r\n              </svg></span>\r\n          </div>\r\n\r\n        </div>\r\n \r\n           <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n      <label [for]=\"'reportName' + i\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n      <input formControlName=\"reportName\" type=\"text\" class=\"form-control disabled\" [id]=\"'reportName' + i\" autocomplete=\"off\">\r\n    </div>\r\n\r\n    <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n      <label [for]=\"'fileType' + i\" class=\"form-label\">File Type <span class=\"alert-required\"></span></label>\r\n      <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" [id]=\"'fileType' + i\"\r\n        autocomplete=\"off\" [ngClass]=\"getReportDisabled(i)? 'disabled' : ''\">\r\n    </div>\r\n\r\n\r\n  <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n    <label [for]=\"'email' + i\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n    <div class=\"outer-container\">\r\n      <div class=\"input-container form-control\" formArrayName=\"email\">\r\n        <ng-container *ngFor=\"let email of getEmails(i)?.controls; let j = index\">\r\n          <span class=\"chip\">\r\n            <span class=\"me-3\">{{ email.value }}</span>\r\n            <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i,j)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </span>\r\n          </span>\r\n        </ng-container>\r\n        <input style=\"min-height: 44px;\" (keydown)=\"onKeyDown($event,i)\" type=\"text\" id=\"emailValue\"\r\n          [disabled]=\"getReportDisabled(i) == true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!getReportDisabled(i)\">\r\n    <div class=\"mb-5 w-100 footer-separator\"></div>\r\n    <div class=\"d-flex justify-content-end\">\r\n      <a type=\"button\" class=\"btn btn-outline me-4 align-content-center\" (click)=\"onCancel()\">Cancel</a>\r\n      <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"onSubmit(report)\"><span>Save\r\n          Changes</span></button>\r\n    </div>\r\n  </div>\r\n  </ng-container>\r\n  </ng-container>\r\n  </div>\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.disabled{background-color:#f9fafb!important;pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ReportConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-report-configuration', template: "<form [formGroup]=\"reportConfigurationForm\">\r\n    <div class=\"row\">\r\n        <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" >\r\n            <div class=\"col-12 mb-5\">\r\n                <div class=\" d-flex justify-content-end\">\r\n                    <button *ngIf=\"reportConfigurationForm.disabled\"\r\n                        (click)=\"reportConfigurationForm.disabled ? reportConfigurationForm.enable() : reportConfigurationForm.disable()\"\r\n                        type=\"button\" class=\"btn btn-outline align-items-end me-5\"><span class=\"me-2\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_2579_25125)\">\r\n                                    <path\r\n                                        d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_2579_25125\">\r\n                                        <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>Edit Details</button>\r\n                    <button [disabled]=\"reportConfigurationForm.disabled\" (click)=\"openAddModal()\" type=\"button\" class=\"btn btn-primary align-items-end\"><span\r\n                            class=\"me-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </span>Add Report</button>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n            <label for=\"infraDownTime\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n            <lib-select [items]=\"reportList\" [multi]=\"false\" [searchField]=\"'fileName'\"\r\n                [disabled]=\"reportConfigurationForm.get('fileName')?.disabled\" [idField]=\"'_id'\"\r\n                (selected)=\"onReportSelect($event)\" [selectedValues]=\"[selectedReport]\"></lib-select>\r\n        </div>\r\n        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n            <label for=\"count\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n            <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" id=\"count\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n\r\n        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n            <label for=\"infraDownTime\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n            <div class=\"outer-container\">\r\n                <div class=\" input-container form-control\">\r\n                    <ng-container *ngFor=\"let domain of emailList; let i = index\">\r\n                        <span class=\"chip\">\r\n                            <span class=\"me-3\">{{domain}}</span>\r\n                            <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                        </span>\r\n                    </ng-container>\r\n                    <input style=\"min-height: 44px;\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\" type=\"text\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <div *ngIf=\"emailValidation.includes(false)\" class=\"text-danger mt-3\">Invalid Email Format</div>\r\n\r\n    <div *ngIf=\"reportConfigurationForm.enabled\">\r\n        <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n        <div class=\"d-flex justify-content-end\">\r\n            <a type=\"button\" class=\"btn btn-outline me-4 align-content-center\" (click)=\"onCancel()\">Cancel</a>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"reportConfigurationForm.invalid || !emailList?.length || emailValidation.includes(false)\" (click)=\"onSubmit()\"><span>Save Changes</span></button>\r\n        </div>\r\n    </div>\r\n\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}\n"] }]
+            args: [{ selector: 'lib-report-configuration', template: "<form [formGroup]=\"reportConfigurationForm\">\r\n  <div class=\"row\">\r\n    <ng-container *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \">\r\n      <div class=\"col-12 mb-5\">\r\n        <div class=\"d-flex justify-content-end\">\r\n          <button (click)=\"openAddModal()\" type=\"button\"\r\n            class=\"btn btn-primary align-items-end\">\r\n            <span class=\"me-2\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path d=\"M10.0003 4.16663V15.8333M4.16699 9.99996H15.8337\" stroke=\"white\" stroke-width=\"2\"\r\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </span>\r\n            Add Report\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"loading\">\r\n      <div\r\n          class=\"row loader  d-flex justify-content-center align-items-center\">\r\n          <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n              </div>\r\n          </div>\r\n          <div class=\"shimmer\">\r\n              <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n              </div>\r\n          </div>\r\n\r\n      </div>\r\n  </ng-container>\r\n    <ng-container *ngIf=\"noData\">\r\n      <div class=\"row\">\r\n          <div class=\"col-lg-12 mb-3\">\r\n              <div\r\n                  class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src w-25\"\r\n                      src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </ng-container>\r\n    <ng-container formArrayName=\"reports\">\r\n      <ng-container *ngFor=\"let report of reportsFormArray.controls; let i = index\" [formGroupName]=\"i\">\r\n        <div *ngIf=\"(gs.userAccess | async)?.settings_configuration_isEdit \" class=\"d-flex justify-content-end mt-5\">\r\n          <div *ngIf=\"getReportDisabled(i)\" (click)=\"enableForm(i)\" type=\"button\"\r\n            class=\" align-items-end\">\r\n            <span class=\"me-2\">\r\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g filter=\"url(#filter0_d_13410_52264)\">\r\n                  <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                  <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                  <g clip-path=\"url(#clip0_13410_52264)\">\r\n                    <path\r\n                      d=\"M24.167 11.4999C24.3859 11.2811 24.6457 11.1074 24.9317 10.989C25.2176 10.8705 25.5241 10.8096 25.8337 10.8096C26.1432 10.8096 26.4497 10.8705 26.7357 10.989C27.0216 11.1074 27.2815 11.2811 27.5003 11.4999C27.7192 11.7188 27.8928 11.9786 28.0113 12.2646C28.1297 12.5506 28.1907 12.8571 28.1907 13.1666C28.1907 13.4761 28.1297 13.7826 28.0113 14.0686C27.8928 14.3546 27.7192 14.6144 27.5003 14.8333L16.2503 26.0833L11.667 27.3333L12.917 22.7499L24.167 11.4999Z\"\r\n                      stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                  </g>\r\n                </g>\r\n                <defs>\r\n                  <filter id=\"filter0_d_13410_52264\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" filterUnits=\"userSpaceOnUse\"\r\n                    color-interpolation-filters=\"sRGB\">\r\n                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                      result=\"hardAlpha\" />\r\n                    <feOffset dy=\"1\" />\r\n                    <feGaussianBlur stdDeviation=\"1\" />\r\n                    <feColorMatrix type=\"matrix\"\r\n                      values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_13410_52264\" />\r\n                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_13410_52264\" result=\"shape\" />\r\n                  </filter>\r\n                  <clipPath id=\"clip0_13410_52264\">\r\n                    <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(10 9)\" />\r\n                  </clipPath>\r\n                </defs>\r\n              </svg>\r\n            </span>\r\n          </div>\r\n      \r\n          <div *ngIf=\"getReportDisabled(i)\" (click)=\"deleteReport(selectedReport._id)\"\r\n            class=\"align-items-end cursor-pointer\">\r\n            <span class=\"me-2\">\r\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <g filter=\"url(#filter0_d_13252_178642)\">\r\n                  <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                  <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                  <path\r\n                    d=\"M12.5 14.0001H14.1667M14.1667 14.0001H27.5M14.1667 14.0001V25.6667C14.1667 26.1088 14.3423 26.5327 14.6548 26.8453C14.9674 27.1578 15.3913 27.3334 15.8333 27.3334H24.1667C24.6087 27.3334 25.0326 27.1578 25.3452 26.8453C25.6577 26.5327 25.8333 26.1088 25.8333 25.6667V14.0001H14.1667ZM16.6667 14.0001V12.3334C16.6667 11.8914 16.8423 11.4675 17.1548 11.1549C17.4674 10.8423 17.8913 10.6667 18.3333 10.6667H21.6667C22.1087 10.6667 22.5326 10.8423 22.8452 11.1549C23.1577 11.4675 23.3333 11.8914 23.3333 12.3334V14.0001M18.3333 18.1667V23.1667M21.6667 18.1667V23.1667\"\r\n                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                  <filter id=\"filter0_d_13252_178642\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" filterUnits=\"userSpaceOnUse\"\r\n                    color-interpolation-filters=\"sRGB\">\r\n                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                      result=\"hardAlpha\" />\r\n                    <feOffset dy=\"1\" />\r\n                    <feGaussianBlur stdDeviation=\"1\" />\r\n                    <feColorMatrix type=\"matrix\"\r\n                      values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_13252_178642\" />\r\n                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_13252_178642\" result=\"shape\" />\r\n                  </filter>\r\n                </defs>\r\n              </svg></span>\r\n          </div>\r\n\r\n        </div>\r\n \r\n           <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n      <label [for]=\"'reportName' + i\" class=\"form-label\">Report Name <span class=\"alert-required\"></span></label>\r\n      <input formControlName=\"reportName\" type=\"text\" class=\"form-control disabled\" [id]=\"'reportName' + i\" autocomplete=\"off\">\r\n    </div>\r\n\r\n    <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5\">\r\n      <label [for]=\"'fileType' + i\" class=\"form-label\">File Type <span class=\"alert-required\"></span></label>\r\n      <input formControlName=\"fileType\" type=\"text\" class=\"form-control disabled-input\" [id]=\"'fileType' + i\"\r\n        autocomplete=\"off\" [ngClass]=\"getReportDisabled(i)? 'disabled' : ''\">\r\n    </div>\r\n\r\n\r\n  <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n    <label [for]=\"'email' + i\" class=\"form-label\">Receivers Email <span class=\"alert-required\"></span></label>\r\n    <div class=\"outer-container\">\r\n      <div class=\"input-container form-control\" formArrayName=\"email\">\r\n        <ng-container *ngFor=\"let email of getEmails(i)?.controls; let j = index\">\r\n          <span class=\"chip\">\r\n            <span class=\"me-3\">{{ email.value }}</span>\r\n            <span *ngIf=\"reportConfigurationForm.enabled\" (click)=\"removeChip(i,j)\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\" />\r\n              </svg>\r\n            </span>\r\n          </span>\r\n        </ng-container>\r\n        <input style=\"min-height: 44px;\" (keydown)=\"onKeyDown($event,i)\" type=\"text\" id=\"emailValue\"\r\n          [disabled]=\"getReportDisabled(i) == true\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!getReportDisabled(i)\">\r\n    <div class=\"mb-5 w-100 footer-separator\"></div>\r\n    <div class=\"d-flex justify-content-end\">\r\n      <a type=\"button\" class=\"btn btn-outline me-4 align-content-center\" (click)=\"onCancel()\">Cancel</a>\r\n      <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"onSubmit(report)\"><span>Save\r\n          Changes</span></button>\r\n    </div>\r\n  </div>\r\n  </ng-container>\r\n  </ng-container>\r\n  </div>\r\n</form>", styles: [".form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.sso-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:18px;font-weight:600;line-height:28px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.disabled{background-color:#f9fafb!important;pointer-events:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i1$2.NgbModal }, { type: i4$2.ToastService }, { type: i0.ChangeDetectorRef }, { type: i3.GlobalStateService }] });
 
 class UserConfigurationComponent {
@@ -4596,6 +4661,7 @@ class EmployeeTrainingComponent {
     }
     onCancel() {
         this.editMode = false;
+        this.apiService.clientFormData.next({ value: null, type: 'cancel', form: '' });
     }
     onSubmit() {
         if (this.selectedTrainingStart !== undefined && this.isEnable !== undefined) {
@@ -4608,6 +4674,7 @@ class EmployeeTrainingComponent {
                     console.log('Response:', response);
                     this.toast.getSuccessToast(response.message);
                     this.editMode = false;
+                    this.apiService.clientFormData.next({ value: null, type: 'cancel', form: '' });
                 },
                 error: (error) => {
                     console.error('Error:', error);
@@ -4617,11 +4684,11 @@ class EmployeeTrainingComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmployeeTrainingComponent, deps: [{ token: ClientApiService }, { token: i4$2.ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EmployeeTrainingComponent, selector: "lib-employee-training", ngImport: i0, template: "<div class=\"d-flex justify-content-end\">\r\n    <button *ngIf=\"!editMode\" type=\"button\" class=\"btn btn-outline align-items-end\" (click)=\"toggleEditMode()\">\r\n        <span class=\"me-2\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <g clip-path=\"url(#clip0_2579_25125)\">\r\n                    <path\r\n                        d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                    <clipPath id=\"clip0_2579_25125\">\r\n                        <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                    </clipPath>\r\n                </defs>\r\n            </svg>\r\n        </span>Edit Details\r\n    </button>\r\n</div>\r\n\r\n<div>\r\n    <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n        <div class=\"d-flex align-items-center mb-2\">\r\n            <div class=\"form-check form-switch\">\r\n                <input [(ngModel)]=\"isEnable\" [disabled]=\"!editMode\" class=\"form-check-input\" type=\"checkbox\" id=\"isPasserByData\">\r\n            </div>\r\n            <label class=\"enable-label me-5\" for=\"isPasserByData\">Enable Training </label>\r\n        </div>\r\n    </div>\r\n    <div class=\"py-2\">\r\n        <label class=\"headingtext mb-3\">Training Starts after </label>\r\n        <div class=\"position-relative selectwidth\">\r\n            <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"trainingstartsDropdown($event)\"\r\n                aria-label=\"Default select example\" [class.disabled]=\"!editMode\">\r\n                {{ selectedTrainingStart }} days\r\n            </div>\r\n            <div *ngIf=\"trainingstartsdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n                <ul *ngFor=\"let trainingstart of trainingstartstype\" class=\"list-unstyled mb-2\">\r\n                    <li class=\"producttext px-5 py-4 items cursor-pointer\" (click)=\"selectTrainingStarts(trainingstart)\">\r\n                        {{ trainingstart }}\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"d-flex justify-content-end mt-6\">\r\n    <div data-kt-subscription-table-toolbar=\"base\"\r\n        class=\"d-flex justify-content-end\">\r\n        <button *ngIf=\"editMode\" type=\"submit\"\r\n            class=\"btn-outline btn needhelp me-4\"\r\n            (click)=\"toggleEditMode()\">Cancel</button>\r\n            <button *ngIf=\"editMode\" type=\"button\"\r\n            tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n            (click)=\"onSubmit()\"\r\n            ><span>Save Changes\r\n            </span></button></div>\r\n</div>\r\n\r\n", styles: [".headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.labeltext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.enable-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.disabled{pointer-events:none;background-color:#f9fafb}.selectwidth{width:35%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EmployeeTrainingComponent, selector: "lib-employee-training", ngImport: i0, template: "<div class=\"d-flex justify-content-end\">\r\n    <button *ngIf=\"!editMode\" type=\"button\" class=\"btn btn-outline align-items-end\" (click)=\"toggleEditMode()\">\r\n        <span class=\"me-2\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <g clip-path=\"url(#clip0_2579_25125)\">\r\n                    <path\r\n                        d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                    <clipPath id=\"clip0_2579_25125\">\r\n                        <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                    </clipPath>\r\n                </defs>\r\n            </svg>\r\n        </span>Edit Details\r\n    </button>\r\n</div>\r\n\r\n<div>\r\n    <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n        <div class=\"d-flex align-items-center mb-2\">\r\n            <div class=\"form-check form-switch\">\r\n                <input [(ngModel)]=\"isEnable\" [disabled]=\"!editMode\" class=\"form-check-input\" type=\"checkbox\" id=\"isPasserByData\">\r\n            </div>\r\n            <label class=\"enable-label me-5\" for=\"isPasserByData\">Enable Training </label>\r\n        </div>\r\n    </div>\r\n    <div class=\"py-2\">\r\n        <label class=\"headingtext mb-3\">Training Starts after </label>\r\n        <div class=\"position-relative selectwidth\">\r\n            <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"trainingstartsDropdown($event)\"\r\n                aria-label=\"Default select example\" [class.disabled]=\"!editMode\">\r\n                {{ selectedTrainingStart }} days\r\n            </div>\r\n            <div *ngIf=\"trainingstartsdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n                <ul *ngFor=\"let trainingstart of trainingstartstype\" class=\"list-unstyled mb-2\">\r\n                    <li class=\"producttext px-5 py-4 items cursor-pointer\" (click)=\"selectTrainingStarts(trainingstart)\">\r\n                        {{ trainingstart }}\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"d-flex justify-content-end mt-6\">\r\n    <div data-kt-subscription-table-toolbar=\"base\"\r\n        class=\"d-flex justify-content-end\">\r\n        <button *ngIf=\"editMode\" type=\"submit\"\r\n            class=\"btn-outline btn needhelp me-4\"\r\n            (click)=\"onCancel()\">Cancel</button>\r\n            <button *ngIf=\"editMode\" type=\"button\"\r\n            tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n            (click)=\"onSubmit()\"\r\n            ><span>Save Changes\r\n            </span></button></div>\r\n</div>\r\n\r\n", styles: [".headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.labeltext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.enable-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.disabled{pointer-events:none;background-color:#f9fafb}.selectwidth{width:35%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EmployeeTrainingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-employee-training', template: "<div class=\"d-flex justify-content-end\">\r\n    <button *ngIf=\"!editMode\" type=\"button\" class=\"btn btn-outline align-items-end\" (click)=\"toggleEditMode()\">\r\n        <span class=\"me-2\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <g clip-path=\"url(#clip0_2579_25125)\">\r\n                    <path\r\n                        d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                    <clipPath id=\"clip0_2579_25125\">\r\n                        <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                    </clipPath>\r\n                </defs>\r\n            </svg>\r\n        </span>Edit Details\r\n    </button>\r\n</div>\r\n\r\n<div>\r\n    <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n        <div class=\"d-flex align-items-center mb-2\">\r\n            <div class=\"form-check form-switch\">\r\n                <input [(ngModel)]=\"isEnable\" [disabled]=\"!editMode\" class=\"form-check-input\" type=\"checkbox\" id=\"isPasserByData\">\r\n            </div>\r\n            <label class=\"enable-label me-5\" for=\"isPasserByData\">Enable Training </label>\r\n        </div>\r\n    </div>\r\n    <div class=\"py-2\">\r\n        <label class=\"headingtext mb-3\">Training Starts after </label>\r\n        <div class=\"position-relative selectwidth\">\r\n            <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"trainingstartsDropdown($event)\"\r\n                aria-label=\"Default select example\" [class.disabled]=\"!editMode\">\r\n                {{ selectedTrainingStart }} days\r\n            </div>\r\n            <div *ngIf=\"trainingstartsdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n                <ul *ngFor=\"let trainingstart of trainingstartstype\" class=\"list-unstyled mb-2\">\r\n                    <li class=\"producttext px-5 py-4 items cursor-pointer\" (click)=\"selectTrainingStarts(trainingstart)\">\r\n                        {{ trainingstart }}\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"d-flex justify-content-end mt-6\">\r\n    <div data-kt-subscription-table-toolbar=\"base\"\r\n        class=\"d-flex justify-content-end\">\r\n        <button *ngIf=\"editMode\" type=\"submit\"\r\n            class=\"btn-outline btn needhelp me-4\"\r\n            (click)=\"toggleEditMode()\">Cancel</button>\r\n            <button *ngIf=\"editMode\" type=\"button\"\r\n            tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n            (click)=\"onSubmit()\"\r\n            ><span>Save Changes\r\n            </span></button></div>\r\n</div>\r\n\r\n", styles: [".headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.labeltext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.enable-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.disabled{pointer-events:none;background-color:#f9fafb}.selectwidth{width:35%}\n"] }]
+            args: [{ selector: 'lib-employee-training', template: "<div class=\"d-flex justify-content-end\">\r\n    <button *ngIf=\"!editMode\" type=\"button\" class=\"btn btn-outline align-items-end\" (click)=\"toggleEditMode()\">\r\n        <span class=\"me-2\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <g clip-path=\"url(#clip0_2579_25125)\">\r\n                    <path\r\n                        d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </g>\r\n                <defs>\r\n                    <clipPath id=\"clip0_2579_25125\">\r\n                        <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n                    </clipPath>\r\n                </defs>\r\n            </svg>\r\n        </span>Edit Details\r\n    </button>\r\n</div>\r\n\r\n<div>\r\n    <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-5\">\r\n        <div class=\"d-flex align-items-center mb-2\">\r\n            <div class=\"form-check form-switch\">\r\n                <input [(ngModel)]=\"isEnable\" [disabled]=\"!editMode\" class=\"form-check-input\" type=\"checkbox\" id=\"isPasserByData\">\r\n            </div>\r\n            <label class=\"enable-label me-5\" for=\"isPasserByData\">Enable Training </label>\r\n        </div>\r\n    </div>\r\n    <div class=\"py-2\">\r\n        <label class=\"headingtext mb-3\">Training Starts after </label>\r\n        <div class=\"position-relative selectwidth\">\r\n            <div class=\"form-select dropselect levelviewtext\" id=\"currency\" (click)=\"trainingstartsDropdown($event)\"\r\n                aria-label=\"Default select example\" [class.disabled]=\"!editMode\">\r\n                {{ selectedTrainingStart }} days\r\n            </div>\r\n            <div *ngIf=\"trainingstartsdropDown\" class=\"card py-2 w-100 position-absolute end-0 z-1\">\r\n                <ul *ngFor=\"let trainingstart of trainingstartstype\" class=\"list-unstyled mb-2\">\r\n                    <li class=\"producttext px-5 py-4 items cursor-pointer\" (click)=\"selectTrainingStarts(trainingstart)\">\r\n                        {{ trainingstart }}\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"d-flex justify-content-end mt-6\">\r\n    <div data-kt-subscription-table-toolbar=\"base\"\r\n        class=\"d-flex justify-content-end\">\r\n        <button *ngIf=\"editMode\" type=\"submit\"\r\n            class=\"btn-outline btn needhelp me-4\"\r\n            (click)=\"onCancel()\">Cancel</button>\r\n            <button *ngIf=\"editMode\" type=\"button\"\r\n            tabindex=\"0\" class=\"btn btn-primary px-4 ng-star-inserted\"\r\n            (click)=\"onSubmit()\"\r\n            ><span>Save Changes\r\n            </span></button></div>\r\n</div>\r\n\r\n", styles: [".headingtext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500}.dropselect{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-style:normal;font-weight:400;line-height:24px;height:45px!important}.producttext{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.items:hover,.tems.focus,.items.active,.camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.labeltext{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[disabled]{background-color:#f9fafb!important}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;display:block;margin-top:6px}.cancel{border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font-family:Inter;font-size:14px;font-weight:600;line-height:20px;text-transform:capitalize}.apply{color:#fff;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.footer-seperator{border-top:1px solid #EAECF0}:host{width:100%;height:100%}.outer-container{position:relative}.outer-container .form-control{padding-top:0;padding-bottom:0}.outer-container .input-container{border:1px solid black;height:100%;width:100%;display:flex;flex-wrap:wrap}.outer-container .input-container input{all:unset;flex:1;min-width:50px}.outer-container .input-container .chip{margin:10px 0 10px 10px;padding:3px 10px;border-radius:16px;background:var(--Gray-100, #F2F4F7);color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .chip:nth-child(1){margin-left:0}.enable-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.sso-sub{color:var(--Gray-500, #667085);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.disabled{pointer-events:none;background-color:#f9fafb}.selectwidth{width:35%}\n"] }]
         }], ctorParameters: () => [{ type: ClientApiService }, { type: i4$2.ToastService }, { type: i0.ChangeDetectorRef }] });
 
 class ConfigurationsComponent {