tango-app-ui-manage-settings 3.0.47-dev → 3.0.50-dev

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

@@ -3741,6 +3741,8 @@ class AddReportComponent {
     $emailInterrupt = new BehaviorSubject('');
     clientId;
     destroy$ = new Subject();
+    // emailValidation: { invalidEmail: boolean; } | null;
+    emailValidation = [];
     constructor(fb, apiService, activeModal, toaster) {
         this.fb = fb;
         this.apiService = apiService;
@@ -3759,11 +3761,16 @@ class AddReportComponent {
     }
     initForm() {
         this.addReportForm = this.fb.group({
-            fileName: [''],
-            fileType: [''],
-            email: ['']
+            fileName: ['', Validators.required],
+            fileType: ['', Validators.required],
+            email: ['', Validators.required]
         });
     }
+    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);
+    }
     ngAfterViewInit() {
         this.addReportForm.get('email')?.valueChanges
             .pipe(map((value) => value.replace(/\n/g, '')))
@@ -3771,8 +3778,9 @@ class AddReportComponent {
             return this.$emailInterrupt.pipe(takeUntil(this.destroy$)).pipe(map((interrupt) => {
                 if (interrupt === 'Enter') {
                     this.$emailInterrupt.next('');
-                    console.log(val);
+                    this.emailValidation = [];
                     this.emailList.push(val);
+                    this.emailList.forEach((element) => { this.emailValidator(element); });
                     this.addReportForm.get('email')?.setValue('');
                 }
                 else if (interrupt === 'Backspace' && !val && this.emailList.length) {
@@ -3789,6 +3797,8 @@ class AddReportComponent {
     }
     removeChip(i) {
         this.emailList.splice(i, 1);
+        this.emailValidation = [];
+        this.emailList.forEach((element) => { this.emailValidator(element); });
     }
     onCancel() {
         this.activeModal.close();
@@ -3802,11 +3812,11 @@ class AddReportComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AddReportComponent, deps: [{ token: i1$1.FormBuilder }, { token: ClientApiService }, { token: i1$2.NgbActiveModal }, { token: i4$2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: AddReportComponent, selector: "lib-add-report", ngImport: i0, template: "<form [formGroup]=\"addReportForm\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 mb-5\">\r\n            <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n                <path d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>            \r\n        </div>\r\n        <div class=\"col-12 mb-10 header\">\r\n            Add Report\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileName\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n            <input formControlName=\"fileName\" type=\"text\" class=\"form-control disabled-input\" id=\"fileName\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileType\" 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\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-md-12\">\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 email of emailList; let i = index\">\r\n                        <span class=\"chip\">\r\n                            <span class=\"me-3\">{{email}}</span>\r\n                            <span *ngIf=\"addReportForm.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                    <textarea rows=\"5\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\"></textarea>\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        <div class=\"col-12 mt-10\">\r\n            <div class=\"row\" >\r\n                <div class=\"col \">\r\n                    <a type=\"button\" class=\"btn btn-outline w-100 \" (click)=\"onCancel()\">Cancel</a>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <a type=\"submit\" class=\"btn btn-primary w-100\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [":host{padding:1.5rem}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.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}.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 textarea{all:unset;flex:1;min-width:50px;line-height:16px}.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;height:25px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: AddReportComponent, selector: "lib-add-report", ngImport: i0, template: "<form [formGroup]=\"addReportForm\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 mb-5\">\r\n            <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n                <path d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>            \r\n        </div>\r\n        <div class=\"col-12 mb-10 header\">\r\n            Add Report\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileName\" class=\"form-label\">Report Name<span class=\"alert-required\"></span></label>\r\n            <input formControlName=\"fileName\" type=\"text\" class=\"form-control disabled-input\" id=\"fileName\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileType\" 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\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-md-12\">\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 email of emailList; let i = index\">\r\n                        <span class=\"chip\">\r\n                            <span class=\"me-3\">{{email}}</span>\r\n                            <span *ngIf=\"addReportForm.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                    <textarea rows=\"5\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\"></textarea>\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         <div *ngIf=\"emailValidation.includes(false)\" class=\"text-danger mt-3\">Invalid Email Format</div>\r\n        <div class=\"col-12 mt-10\">\r\n            <div class=\"row\" >\r\n                <div class=\"col \">\r\n                    <a type=\"button\" class=\"btn btn-outline w-100 \" (click)=\"onCancel()\">Cancel</a>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <button type=\"submit\" class=\"btn btn-primary w-100\" (click)=\"onSubmit()\" [disabled]=\"addReportForm.invalid || emailValidation.includes(false)\"><span>Save Changes</span></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [":host{padding:1.5rem}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.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}.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 textarea{all:unset;flex:1;min-width:50px;line-height:16px}.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;height:25px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: AddReportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-add-report', template: "<form [formGroup]=\"addReportForm\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 mb-5\">\r\n            <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n                <path d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>            \r\n        </div>\r\n        <div class=\"col-12 mb-10 header\">\r\n            Add Report\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileName\" class=\"form-label\">File Type<span class=\"alert-required\"></span></label>\r\n            <input formControlName=\"fileName\" type=\"text\" class=\"form-control disabled-input\" id=\"fileName\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileType\" 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\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-md-12\">\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 email of emailList; let i = index\">\r\n                        <span class=\"chip\">\r\n                            <span class=\"me-3\">{{email}}</span>\r\n                            <span *ngIf=\"addReportForm.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                    <textarea rows=\"5\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\"></textarea>\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        <div class=\"col-12 mt-10\">\r\n            <div class=\"row\" >\r\n                <div class=\"col \">\r\n                    <a type=\"button\" class=\"btn btn-outline w-100 \" (click)=\"onCancel()\">Cancel</a>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <a type=\"submit\" class=\"btn btn-primary w-100\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [":host{padding:1.5rem}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.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}.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 textarea{all:unset;flex:1;min-width:50px;line-height:16px}.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;height:25px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"] }]
+            args: [{ selector: 'lib-add-report', template: "<form [formGroup]=\"addReportForm\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12 mb-5\">\r\n            <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n                <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n                <path d=\"M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31\" stroke=\"#00A3FF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>            \r\n        </div>\r\n        <div class=\"col-12 mb-10 header\">\r\n            Add Report\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileName\" class=\"form-label\">Report Name<span class=\"alert-required\"></span></label>\r\n            <input formControlName=\"fileName\" type=\"text\" class=\"form-control disabled-input\" id=\"fileName\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-12 mb-5\">\r\n            <label for=\"fileType\" 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\"\r\n                autocomplete=\"off\">\r\n        </div>\r\n        <div class=\"col-md-12\">\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 email of emailList; let i = index\">\r\n                        <span class=\"chip\">\r\n                            <span class=\"me-3\">{{email}}</span>\r\n                            <span *ngIf=\"addReportForm.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                    <textarea rows=\"5\" formControlName=\"email\" (keydown)=\"onKeyDown($event)\"></textarea>\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         <div *ngIf=\"emailValidation.includes(false)\" class=\"text-danger mt-3\">Invalid Email Format</div>\r\n        <div class=\"col-12 mt-10\">\r\n            <div class=\"row\" >\r\n                <div class=\"col \">\r\n                    <a type=\"button\" class=\"btn btn-outline w-100 \" (click)=\"onCancel()\">Cancel</a>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <button type=\"submit\" class=\"btn btn-primary w-100\" (click)=\"onSubmit()\" [disabled]=\"addReportForm.invalid || emailValidation.includes(false)\"><span>Save Changes</span></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [":host{padding:1.5rem}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}.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}.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 textarea{all:unset;flex:1;min-width:50px;line-height:16px}.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;height:25px}.outer-container .input-container .chip:nth-child(1){margin-left:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i1$2.NgbActiveModal }, { type: i4$2.ToastService }] });
 
 class ReportConfigurationComponent {
@@ -3823,6 +3833,7 @@ class ReportConfigurationComponent {
     clientId;
     selectedReport;
     destroy$ = new Subject();
+    emailValidation = [];
     constructor(fb, apiService, modalService, toaster, cd, gs) {
         this.fb = fb;
         this.apiService = apiService;
@@ -3842,6 +3853,11 @@ class ReportConfigurationComponent {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
+    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);
+    }
     ngAfterViewInit() {
         this.reportConfigurationForm.get('email')?.valueChanges
             .pipe(map((value) => value.replace(/\n/g, '').replace(/\s/g, '')))
@@ -3849,7 +3865,9 @@ class ReportConfigurationComponent {
             return this.$emailInterrupt.pipe(takeUntil(this.destroy$)).pipe(map((interrupt) => {
                 if (interrupt === 'Enter') {
                     this.$emailInterrupt.next('');
+                    this.emailValidation = [];
                     this.emailList.push(val);
+                    this.emailList.forEach((element) => { this.emailValidator(element); });
                     this.reportConfigurationForm.get('email')?.setValue('');
                 }
                 else if (interrupt === 'Backspace' && !val && this.emailList.length) {
@@ -3864,7 +3882,7 @@ class ReportConfigurationComponent {
     initForm() {
         this.reportConfigurationForm = this.fb.group({
             fileName: [''],
-            fileType: [''],
+            fileType: ['', Validators.required],
             email: ['']
         });
         this.reportConfigurationForm.disable();
@@ -3893,6 +3911,8 @@ class ReportConfigurationComponent {
     }
     removeChip(i) {
         this.emailList.splice(i, 1);
+        this.emailValidation = [];
+        this.emailList.forEach((element) => { this.emailValidator(element); });
     }
     onReportSelect(event) {
         this.selectedReport = event;
@@ -3940,11 +3960,11 @@ class ReportConfigurationComponent {
         });
     }
     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\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\" (click)=\"onCancel()\">Cancel</a>\r\n            <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\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 *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" }] });
 }
 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\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\" (click)=\"onCancel()\">Cancel</a>\r\n            <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"onSubmit()\"><span>Save Changes</span></a>\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 *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"] }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: ClientApiService }, { type: i1$2.NgbModal }, { type: i4$2.ToastService }, { type: i0.ChangeDetectorRef }, { type: i3.GlobalStateService }] });
 
 class UserConfigurationComponent {
@@ -5431,6 +5451,7 @@ class ActivityLogsComponent {
     }
     datechange(event) {
         if (event.startDate || event.endDate) {
+            this.currentPage = 1;
             this.filterStartDate = this.dayjs(event.startDate).utc().toISOString();
             this.filterEndDate = this.dayjs(event.endDate).utc().toISOString();
             this.getActivityLogs();
@@ -5455,7 +5476,9 @@ class ActivityLogsComponent {
         this.getActivityLogs();
     }
     onPageSizeChange(pageSize) {
+        this.currentPage = 1;
         this.pageSize = pageSize;
+        this.itemsPerPage = pageSize;
         this.getActivityLogs();
     }
     formatDate(inputDate) {
@@ -5481,12 +5504,17 @@ class ActivityLogsComponent {
         const checkedIds = filters.filter((filter) => filter.isChecked).map((filter) => filter.id);
         return checkedIds;
     }
+    applyFilter() {
+        this.currentPage = 1;
+        this.showFilters = false;
+        this.getActivityLogs();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ActivityLogsComponent, deps: [{ token: ClientApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n    <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n        <ng-container [ngSwitch]=\"pageState\" >\r\n            <ng-container *ngSwitchCase=\"'loaded'\"   >\r\n                <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n                    <div class=\"header\">Activity Logs</div>\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"d-flex align-items-center position-relative me-5\">\r\n                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n                                [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                        </div>\r\n                        <div>\r\n                                <div class=\"multi-select-dropdown\" >\r\n                                 <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\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=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                      </svg>\r\n                                      <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n                                </button>  \r\n                                <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n                                    <div>\r\n                                    <ul>\r\n                                        <li >\r\n                                            <div   class=\"form-check\">\r\n                                                <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                                                    id=\"selectAll\">\r\n                                                <label class=\"form-check-label\" for=\"selectAll\">\r\n                                                    All Logs\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        <li *ngFor=\"let filter of filters\"  >\r\n                                            <div class=\"form-check\">\r\n                                                <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n                                                <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n                                                    {{filter.label}}\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        \r\n                                    </ul>     \r\n                                    </div>\r\n                                    <div >\r\n                                        <div class=\" w-100 footer-seperator\"></div>\r\n                                        <div class=\"d-flex justify-content-end m-2\">\r\n                                            <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n                                            <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"getActivityLogs(); showFilters = false\" >Apply</a>\r\n                                        </div>\r\n                                    </div>\r\n                                     \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            \r\n                <ng-container *ngIf=\"logList?.length\" >\r\n                <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n                    <div class=\"d-flex me-10\">\r\n                        <div class=\"line me-4\"></div>\r\n                        <div class=\"d-flex flex-column\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n                                <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n                            </div>\r\n                            <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n                            <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n                        </div>\r\n            \r\n                    </div>\r\n                    <div class=\"chip\">\r\n                        {{camelCaseToWords(item?.logType)}}\r\n                    </div>\r\n                </div>\r\n            \r\n                <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n                    <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                    (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>    \r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!logList?.length\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\" >\r\n                        <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">    \r\n                        </div>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'loading'\"  >\r\n                    <div 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                          <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>\r\n                \r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.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"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ActivityLogsComponent, selector: "lib-activity-logs", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"activity-card\">\r\n    <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n        <ng-container [ngSwitch]=\"pageState\" >\r\n            <ng-container *ngSwitchCase=\"'loaded'\"   >\r\n                <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n                    <div class=\"header\">Activity Logs</div>\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"d-flex align-items-center position-relative me-5\">\r\n                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n                                [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                        </div>\r\n                        <div>\r\n                                <div class=\"multi-select-dropdown\" >\r\n                                 <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\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=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                      </svg>\r\n                                      <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n                                </button>  \r\n                                <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n                                    <div>\r\n                                    <ul>\r\n                                        <li >\r\n                                            <div   class=\"form-check\">\r\n                                                <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                                                    id=\"selectAll\">\r\n                                                <label class=\"form-check-label\" for=\"selectAll\">\r\n                                                    All Logs\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        <li *ngFor=\"let filter of filters\"  >\r\n                                            <div class=\"form-check\">\r\n                                                <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n                                                <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n                                                    {{filter.label}}\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        \r\n                                    </ul>     \r\n                                    </div>\r\n                                    <div >\r\n                                        <div class=\" w-100 footer-seperator\"></div>\r\n                                        <div class=\"d-flex justify-content-end m-2\">\r\n                                            <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n                                            <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n                                        </div>\r\n                                    </div>\r\n                                     \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            \r\n                <ng-container *ngIf=\"logList?.length\" >\r\n                <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n                    <div class=\"d-flex me-10\">\r\n                        <div class=\"line me-4\"></div>\r\n                        <div class=\"d-flex flex-column\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n                                <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n                            </div>\r\n                            <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n                            <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n                        </div>\r\n            \r\n                    </div>\r\n                    <div class=\"chip\">\r\n                        {{camelCaseToWords(item?.logType)}}\r\n                    </div>\r\n                </div>\r\n            \r\n                <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n                    <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                    (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>    \r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!logList?.length\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\" >\r\n                        <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">    \r\n                        </div>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'loading'\"  >\r\n                    <div 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                          <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>\r\n                \r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.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"] }, { kind: "component", type: i4$2.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ActivityLogsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-activity-logs', template: "<div class=\"activity-card\">\r\n    <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n        <ng-container [ngSwitch]=\"pageState\" >\r\n            <ng-container *ngSwitchCase=\"'loaded'\"   >\r\n                <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n                    <div class=\"header\">Activity Logs</div>\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"d-flex align-items-center position-relative me-5\">\r\n                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n                                [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                        </div>\r\n                        <div>\r\n                                <div class=\"multi-select-dropdown\" >\r\n                                 <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\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=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                      </svg>\r\n                                      <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n                                </button>  \r\n                                <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n                                    <div>\r\n                                    <ul>\r\n                                        <li >\r\n                                            <div   class=\"form-check\">\r\n                                                <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                                                    id=\"selectAll\">\r\n                                                <label class=\"form-check-label\" for=\"selectAll\">\r\n                                                    All Logs\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        <li *ngFor=\"let filter of filters\"  >\r\n                                            <div class=\"form-check\">\r\n                                                <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n                                                <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n                                                    {{filter.label}}\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        \r\n                                    </ul>     \r\n                                    </div>\r\n                                    <div >\r\n                                        <div class=\" w-100 footer-seperator\"></div>\r\n                                        <div class=\"d-flex justify-content-end m-2\">\r\n                                            <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n                                            <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"getActivityLogs(); showFilters = false\" >Apply</a>\r\n                                        </div>\r\n                                    </div>\r\n                                     \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            \r\n                <ng-container *ngIf=\"logList?.length\" >\r\n                <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n                    <div class=\"d-flex me-10\">\r\n                        <div class=\"line me-4\"></div>\r\n                        <div class=\"d-flex flex-column\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n                                <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n                            </div>\r\n                            <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n                            <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n                        </div>\r\n            \r\n                    </div>\r\n                    <div class=\"chip\">\r\n                        {{camelCaseToWords(item?.logType)}}\r\n                    </div>\r\n                </div>\r\n            \r\n                <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n                    <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                    (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>    \r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!logList?.length\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\" >\r\n                        <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">    \r\n                        </div>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'loading'\"  >\r\n                    <div 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                          <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>\r\n                \r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"] }]
+            args: [{ selector: 'lib-activity-logs', template: "<div class=\"activity-card\">\r\n    <ng-container *ngIf=\"pageState$ | async as pageState\" >\r\n        <ng-container [ngSwitch]=\"pageState\" >\r\n            <ng-container *ngSwitchCase=\"'loaded'\"   >\r\n                <div class=\"d-flex justify-content-between align-items-center mb-10\">\r\n                    <div class=\"header\">Activity Logs</div>\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"d-flex align-items-center position-relative me-5\">\r\n                            <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd\r\n                                [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\"\r\n                                [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                                autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                        stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </span>\r\n                        </div>\r\n                        <div>\r\n                                <div class=\"multi-select-dropdown\" >\r\n                                 <button (click)=\"$event.stopPropagation();showFilters = !showFilters;\" class=\"btn btn-outline\">\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=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                      </svg>\r\n                                      <span class=\" ms-3\">{{getCheckedIds(filters).length}} selected</span>\r\n                                </button>  \r\n                                <div *ngIf=\"showFilters\" class=\"input-container dropdown\" >\r\n                                    <div>\r\n                                    <ul>\r\n                                        <li >\r\n                                            <div   class=\"form-check\">\r\n                                                <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                                                    id=\"selectAll\">\r\n                                                <label class=\"form-check-label\" for=\"selectAll\">\r\n                                                    All Logs\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        <li *ngFor=\"let filter of filters\"  >\r\n                                            <div class=\"form-check\">\r\n                                                <input class=\"form-check-input me-3\" type=\"checkbox\" [(ngModel)]=\"filter.isChecked\" [id]=\"filter.id\">\r\n                                                <label class=\"form-check-label\" [for]=\"filter.id\" >\r\n                                                    {{filter.label}}\r\n                                                </label>\r\n                                            </div>\r\n                                        </li>\r\n                                        \r\n                                    </ul>     \r\n                                    </div>\r\n                                    <div >\r\n                                        <div class=\" w-100 footer-seperator\"></div>\r\n                                        <div class=\"d-flex justify-content-end m-2\">\r\n                                            <a type=\"button\" class=\"btn btn-outline me-4\" (click)=\"showFilters = false\" >Cancel</a>\r\n                                            <a type=\"submit\" class=\"btn btn-primary px-4 \" (click)=\"applyFilter()\" >Apply</a>\r\n                                        </div>\r\n                                    </div>\r\n                                     \r\n                                </div>   \r\n                                </div>\r\n                                \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            \r\n                <ng-container *ngIf=\"logList?.length\" >\r\n                <div *ngFor=\"let item of logList\" class=\"log-card mb-8\">\r\n                    <div class=\"d-flex me-10\">\r\n                        <div class=\"line me-4\"></div>\r\n                        <div class=\"d-flex flex-column\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                <div class=\"header me-4\">{{camelCaseToWords(item?.logSubType)}}</div>\r\n                                <div class=\"time\">{{formatDate(item?.date)}}</div>\r\n                            </div>\r\n                            <div class=\"sub\">{{arrayToString(item?.changes)}} <span *ngIf=\"item?.eventType\">{{item?.eventType + 'd'}}</span></div>\r\n                            <div class=\"sub\">By {{item?.userName}} - {{item?.email}}</div>\r\n                        </div>\r\n            \r\n                    </div>\r\n                    <div class=\"chip\">\r\n                        {{camelCaseToWords(item?.logType)}}\r\n                    </div>\r\n                </div>\r\n            \r\n                <div *ngIf=\"logList?.length\" class=\"my-3\">\r\n                    <lib-pagination [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n                    (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>    \r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!logList?.length\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\" >\r\n                        <img width=\"300px\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">    \r\n                        </div>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'loading'\"  >\r\n                    <div 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                          <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>\r\n                \r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n", styles: [".activity-card{border-radius:8px;background:var(--White, #FFF);padding:24px}.log-card{display:flex;justify-content:space-between}.log-card .line{border-radius:2px;background:var(--Primary-600, #00A3FF);min-width:2px;height:100%}.log-card .header{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.log-card .time{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.log-card .sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:24px}.log-card .chip{padding:2px 10px;border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;height:100%;white-space:nowrap}.header{color:var(--Gray-900, #101828);font-size:18px;font-weight:600;line-height:28px}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.multi-select-dropdown{position:relative}.multi-select-dropdown .input-container{position:absolute;width:212px;right:0;z-index:1;margin-top:5px;background-color:#fff;min-height:200px;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7);background:var(--White, #FFF);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;justify-content:space-between}.multi-select-dropdown .input-container ul{margin:0;padding:0}.multi-select-dropdown .input-container ul li{list-style:none;padding:10px 16px}.multi-select-dropdown .input-container .form-check{display:flex;align-items:center}.multi-select-dropdown .input-container .form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.multi-select-dropdown .input-container .form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.multi-select-dropdown .input-container .form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.multi-select-dropdown .input-container .footer-seperator{border-top:1px solid #EAECF0}.multi-select-dropdown .input-container .btn-primary{padding:10px 16px!important;font-size:12px!important;font-weight:600!important}.multi-select-dropdown .input-container .btn-outline{padding:10px 16px;font-size:12px;font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: ClientApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]