vc-create-dashboard 2.8.27 → 2.8.29

package/fesm2020/create-dashboard.mjs

@@ -3124,25 +3124,25 @@ class CreateDashboardComponent {
         this.dashboardDescription = {
             placeholder: 'Description (Max limit: 250 characters)',
             mode: 'prime',
-            id: 'description'
+            id: 'description',
         };
         this.responsibilityCategoriesTree = {
             regulations: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             standards: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             internalControls: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             others: {
                 list: [],
-                selectedList: []
-            }
+                selectedList: [],
+            },
         };
         this.allComplianceCategories = [];
         this.allRiskCategories = [];
@@ -3164,16 +3164,41 @@ class CreateDashboardComponent {
             selectedFrequencyType: '',
             selectedFrequencies: [0],
             frequencyMessage: '',
-            frequencyDate: 1
+            frequencyDate: 1,
         };
         this.openConfigureWidgets = false;
         this.selectedWidgets = [];
         this.displayedWidgets = [];
         this.responsibilityCentersList = [];
         this.datePickerOverlay = false;
-        this.dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-        this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-        this.quarters = ['January, April, July, October', 'February, May, August, November', 'March, June, September, December'];
+        this.dayNames = [
+            'Monday',
+            'Tuesday',
+            'Wednesday',
+            'Thursday',
+            'Friday',
+            'Saturday',
+            'Sunday',
+        ];
+        this.monthNames = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ];
+        this.quarters = [
+            'January, April, July, October',
+            'February, May, August, November',
+            'March, June, September, December',
+        ];
         this.categoryListLoaded = false;
         this.showRiskWidgets = false;
         this.showComplianceWidgets = false;
@@ -3181,23 +3206,23 @@ class CreateDashboardComponent {
         this.riskCategoryList = {
             strategic: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             operational: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             compliance: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
             others: {
                 list: [],
-                selectedList: []
+                selectedList: [],
             },
         };
         this.fromDatePickerConfig = {
-            min: this.getCurrentDate()
+            min: this.getCurrentDate(),
         };
         this.toDatePickerConfig = {};
         this.smileyMessage = '';
@@ -3214,7 +3239,7 @@ class CreateDashboardComponent {
         this.isSmiley = false;
     }
     ngOnInit() {
-        this.groupsEnabled = this.feature?.isFeatureEnabled("ff_groups_improvements");
+        this.groupsEnabled = this.feature?.isFeatureEnabled('ff_groups_improvements');
         this.animation = true;
         setTimeout(() => {
             this.animation = false;
@@ -3223,7 +3248,7 @@ class CreateDashboardComponent {
         this.getCategoryList();
         this.getRCList();
         this.getComplianceCategoryList();
-        this.setFrequency("2~1~0~0", 'import');
+        this.setFrequency('2~1~0~0', 'import');
         this.checkWhetherAllListsLoaded();
         this.getUsersList('');
         this.getGroupList();
@@ -3236,7 +3261,9 @@ class CreateDashboardComponent {
             else {
                 this.showRiskCategory = false;
             }
-        }, error => { console.log(error); });
+        }, (error) => {
+            console.log(error);
+        });
     }
     /**
      * Displays the listing pages the left side of policy form to set and edit the dropdown fields values
@@ -3275,7 +3302,7 @@ class CreateDashboardComponent {
         this.toDatePickerConfig = { min: minToDate };
         const fromDate = new Date(minToDate.split('-').reverse().join('-'));
         const toDate = new Date(this.dashboardForm.selectedToDate);
-        const inValidDate = (fromDate >= toDate) ? true : false;
+        const inValidDate = fromDate >= toDate ? true : false;
         if (inValidDate) {
             this.dashboardForm.selectedToDate = undefined;
             this.hideToDate = true;
@@ -3302,15 +3329,20 @@ class CreateDashboardComponent {
     }
     getCurrentDate() {
         let today = new Date();
-        return today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
+        return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
     }
     setToDate(data) {
         let today = new Date(data);
-        return today.getDate() + 1 + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
+        return (today.getDate() +
+            1 +
+            '-' +
+            (today.getMonth() + 1) +
+            '-' +
+            today.getFullYear());
     }
     getFromDate(data) {
         let today = new Date(data);
-        return today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
+        return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
     }
     /**
      * It takes a string, converts it to a date, then returns a string in the format of YYYY-MM-DD.
@@ -3319,7 +3351,11 @@ class CreateDashboardComponent {
      */
     getDateFormate(data) {
         let today = new Date(data);
-        return today.getFullYear() + '-' + String((today.getMonth() + 1)).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
+        return (today.getFullYear() +
+            '-' +
+            String(today.getMonth() + 1).padStart(2, '0') +
+            '-' +
+            String(today.getDate()).padStart(2, '0'));
     }
     configureDashboard() {
         let fieldsStatus = this.validateDashboard();
@@ -3328,13 +3364,26 @@ class CreateDashboardComponent {
                 this.vLoader = true;
                 const payload = {
                     dashboard_name: this.dashboardForm.dashboardName,
-                    dashboard_id: ''
+                    dashboard_id: '',
                 };
-                this.createDashboardService.checkDuplicateDashboardName(payload).subscribe(res => {
+                this.createDashboardService
+                    .checkDuplicateDashboardName(payload)
+                    .subscribe((res) => {
                     if (!res) {
                         this.vLoader = false;
-                        this.showRiskWidgets = (this.isManageRisk && this.showRiskCategory && (this.dashboardForm.selectedRiskCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0)) ? true : false;
-                        this.showComplianceWidgets = (this.dashboardForm.selectedResponsibilityCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0) ? true : false;
+                        this.showRiskWidgets =
+                            this.isManageRisk &&
+                                this.showRiskCategory &&
+                                (this.dashboardForm.selectedRiskCategories.length > 0 ||
+                                    this.dashboardForm.selectedResponsibilityCenters.length > 0)
+                                ? true
+                                : false;
+                        this.showComplianceWidgets =
+                            this.dashboardForm.selectedResponsibilityCategories.length >
+                                0 ||
+                                this.dashboardForm.selectedResponsibilityCenters.length > 0
+                                ? true
+                                : false;
                         this.openConfigureWidgets = true;
                     }
                     else {
@@ -3342,7 +3391,7 @@ class CreateDashboardComponent {
                         this.snackBar.show('A dashboard with this name already exists. Specify a different name for the dashboard.', 'alert');
                         return;
                     }
-                }, error => {
+                }, (error) => {
                     console.error(error);
                     this.vLoader = false;
                 });
@@ -3351,13 +3400,26 @@ class CreateDashboardComponent {
                 this.vLoader = true;
                 const payload = {
                     dashboard_name: this.dashboardForm.dashboardName,
-                    dashboard_id: this.dashboardId
+                    dashboard_id: this.dashboardId,
                 };
-                this.createDashboardService.checkDuplicateDashboardName(payload).subscribe(res => {
+                this.createDashboardService
+                    .checkDuplicateDashboardName(payload)
+                    .subscribe((res) => {
                     if (!res) {
                         this.vLoader = false;
-                        this.showRiskWidgets = (this.isManageRisk && this.showRiskCategory && (this.dashboardForm.selectedRiskCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0)) ? true : false;
-                        this.showComplianceWidgets = (this.dashboardForm.selectedResponsibilityCategories.length > 0 || this.dashboardForm.selectedResponsibilityCenters.length > 0) ? true : false;
+                        this.showRiskWidgets =
+                            this.isManageRisk &&
+                                this.showRiskCategory &&
+                                (this.dashboardForm.selectedRiskCategories.length > 0 ||
+                                    this.dashboardForm.selectedResponsibilityCenters.length > 0)
+                                ? true
+                                : false;
+                        this.showComplianceWidgets =
+                            this.dashboardForm.selectedResponsibilityCategories.length >
+                                0 ||
+                                this.dashboardForm.selectedResponsibilityCenters.length > 0
+                                ? true
+                                : false;
                         this.openConfigureWidgets = true;
                     }
                     else {
@@ -3365,7 +3427,7 @@ class CreateDashboardComponent {
                         this.snackBar.show('A dashboard with this name already exists. Specify a different name for the dashboard.', 'alert');
                         return;
                     }
-                }, error => {
+                }, (error) => {
                     this.vLoader = false;
                     console.error(error);
                 });
@@ -3373,11 +3435,13 @@ class CreateDashboardComponent {
         }
     }
     /**
-      * Fetches organization users count api to get total number of pages
-      * @param Url contains prams
-      */
+     * Fetches organization users count api to get total number of pages
+     * @param Url contains prams
+     */
     getOrganizationUsersCount(Url) {
-        this.createDashboardService.getOrganizationUsersCount(Url).subscribe(res => {
+        this.createDashboardService
+            .getOrganizationUsersCount(Url)
+            .subscribe((res) => {
             this.totalList = res.total_members;
             if (res.total_members && res.limit_per_page > 1) {
                 this.totalPages = res.create_page;
@@ -3388,9 +3452,9 @@ class CreateDashboardComponent {
         });
     }
     /**
-   * Get users list by making api call and pre selects all admins by adding to viewers
-   * @param url contains query params for organization users api
-   */
+     * Get users list by making api call and pre selects all admins by adding to viewers
+     * @param url contains query params for organization users api
+     */
     getUsersList(url) {
         this.createDashboardService.getAllUsers().subscribe((res) => {
             this.usersList = res;
@@ -3421,7 +3485,9 @@ class CreateDashboardComponent {
         });
     }
     getComplianceCategoryList() {
-        this.createDashboardService.getComplianceCategoriesListFromGlobal().subscribe((res) => {
+        this.createDashboardService
+            .getComplianceCategoriesListFromGlobal()
+            .subscribe((res) => {
             const data = res;
             this.allComplianceCategories = Object.assign(res);
             // cloneDeep(res);
@@ -3446,7 +3512,7 @@ class CreateDashboardComponent {
         });
     }
     saveSelectedCategory(event) {
-        console.log("event==>>>", event);
+        console.log('event==>>>', event);
     }
     getCategoryList() {
         this.createDashboardService.getCategoryList().subscribe((res) => {
@@ -3455,17 +3521,22 @@ class CreateDashboardComponent {
             this.riskCategoryList.compliance.list = res.compliance_arr;
             this.riskCategoryList.others.list = res.others_arr;
             this.riskCategoryListLoaded = true;
-            this.allRiskCategories = [...new Set(this.allRiskCategories.concat(res.strategic_arr, res.operational_arr, res.compliance_arr, res.others_arr))];
-        }, err => {
+            this.allRiskCategories = [
+                ...new Set(this.allRiskCategories.concat(res.strategic_arr, res.operational_arr, res.compliance_arr, res.others_arr)),
+            ];
+        }, (err) => {
             console.error(err);
             this.riskCategoryListLoaded = true;
         });
     }
     /**
-    * It is to ensure whether all required lists on Policy from is loaded from the api call or not
-    */
+     * It is to ensure whether all required lists on Policy from is loaded from the api call or not
+     */
     checkWhetherAllListsLoaded() {
-        if (this.rcListLoaded && this.complianceCategoriesListLoaded && this.riskCategoryListLoaded && this.userListLoaded) {
+        if (this.rcListLoaded &&
+            this.complianceCategoriesListLoaded &&
+            this.riskCategoryListLoaded &&
+            this.userListLoaded) {
             if (this.mode === 'EDIT') {
                 this.editDashboard();
             }
@@ -3496,7 +3567,7 @@ class CreateDashboardComponent {
                         subWidgetObject._id = '';
                         subWidgetObject.widget_name = subWidget.title;
                         subWidgetObject.widget_code = subWidget.id;
-                        subWidgetObject.state = (subWidget.value) ? 'ACTIVE' : 'INACTIVE';
+                        subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
                         obj.sub_widgets.push(Object.assign(subWidgetObject));
                     });
                 }
@@ -3521,7 +3592,7 @@ class CreateDashboardComponent {
                             subWidgetObject._id = '';
                             subWidgetObject.widget_name = subWidget.title;
                             subWidgetObject.widget_code = subWidget.id;
-                            subWidgetObject.state = (subWidget.value) ? 'ACTIVE' : 'INACTIVE';
+                            subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
                             obj.sub_widgets.push(subWidgetObject);
                         });
                     }
@@ -3535,7 +3606,9 @@ class CreateDashboardComponent {
                             this.selectedWidgets[index].sub_widgets.forEach((subWidgetData) => {
                                 const elementIndex = element.subWidgets.findIndex((ele) => ele.id == subWidgetData.widget_code);
                                 if (elementIndex != -1) {
-                                    subWidgetData.state = (element.subWidgets[elementIndex].value) ? 'ACTIVE' : 'INACTIVE';
+                                    subWidgetData.state = element.subWidgets[elementIndex].value
+                                        ? 'ACTIVE'
+                                        : 'INACTIVE';
                                 }
                             });
                         }
@@ -3568,9 +3641,13 @@ class CreateDashboardComponent {
     paginationFilter(event) {
         if (event) {
             this.getUsersList({
-                p: this.paginationService.currentPage === 1 ? '' : this.paginationService.currentPage,
+                p: this.paginationService.currentPage === 1
+                    ? ''
+                    : this.paginationService.currentPage,
                 type: 'all_except_executive',
-                q: (!this.paginationService.searchValue) ? '' : this.paginationService.searchValue,
+                q: !this.paginationService.searchValue
+                    ? ''
+                    : this.paginationService.searchValue,
             });
         }
     }
@@ -3584,17 +3661,16 @@ class CreateDashboardComponent {
         });
     }
     /**
-   * #### Description
-   *
-   * Returns the unique array of object based on unique key
-   * @param array
-   * @param key
-   * @returns
-   */
+     * #### Description
+     *
+     * Returns the unique array of object based on unique key
+     * @param array
+     * @param key
+     * @returns
+     */
     uniqueByProp(array, key) {
         return Array.from(array
-            .reduce((acc, item) => (item && item[key] && acc.set(item[key], item),
-            acc), new Map())
+            .reduce((acc, item) => (item && item[key] && acc.set(item[key], item), acc), new Map())
             .values());
     }
     saveSelectedList(type, selectedItems) {
@@ -3719,18 +3795,20 @@ class CreateDashboardComponent {
         return data;
     }
     /**
-    * Returns id's from a particular list elements
-    * @param list actual selected list
-    * @param key contains key to extract id from the list
-    */
+     * Returns id's from a particular list elements
+     * @param list actual selected list
+     * @param key contains key to extract id from the list
+     */
     returnIds(list, key) {
-        return list?.map(ele => { if (ele[key]) {
-            return ele[key];
-        } });
+        return list?.map((ele) => {
+            if (ele[key]) {
+                return ele[key];
+            }
+        });
     }
     /**
-    * Validates the data submitted on create dashboard form
-    */
+     * Validates the data submitted on create dashboard form
+     */
     validateDashboard() {
         setTimeout(() => {
             this.submitted = true;
@@ -3739,12 +3817,17 @@ class CreateDashboardComponent {
         const re = /&nbsp;|<br>/g;
         this.dashboardForm.dashboardName = event.replace(re, '').trim();
         const description = this.dashboardForm.dashboardDescriptionText;
-        this.dashboardForm.dashboardDescriptionText = description.replace(re, '').trim();
-        if (!this.dashboardForm.dashboardName || this.dashboardForm.dashboardName.trim() == ''
-            || (this.dashboardForm.dashboardName.length > 30)
-            || (this.textCount.transform(this.dashboardForm?.dashboardDescriptionText) > 250)
-            || (this.dashboardForm?.selectedFromDate && (!this.dashboardForm?.selectedToDate))
-            || (this.dashboardForm.selectedResponsibilityCenters.length == 0 &&
+        this.dashboardForm.dashboardDescriptionText = description
+            .replace(re, '')
+            .trim();
+        if (!this.dashboardForm.dashboardName ||
+            this.dashboardForm.dashboardName.trim() == '' ||
+            this.dashboardForm.dashboardName.length > 30 ||
+            this.textCount.transform(this.dashboardForm?.dashboardDescriptionText) >
+                250 ||
+            (this.dashboardForm?.selectedFromDate &&
+                !this.dashboardForm?.selectedToDate) ||
+            (this.dashboardForm.selectedResponsibilityCenters.length == 0 &&
                 this.dashboardForm.selectedResponsibilityCategories.length == 0 &&
                 this.dashboardForm.selectedRiskCategories.length == 0)) {
             return false;
@@ -3754,9 +3837,9 @@ class CreateDashboardComponent {
         }
     }
     /**
-    * Makes an api call to create a policy
-    * @param dashboard contains dashboardForm data
-    */
+     * Makes an api call to create a policy
+     * @param dashboard contains dashboardForm data
+     */
     submitDashboard() {
         this.submitted = false;
         const valid = this.validateDashboard();
@@ -3770,21 +3853,27 @@ class CreateDashboardComponent {
             description: [
                 {
                     content: dashboard.dashboardDescriptionText,
-                    attachments: []
-                }
+                    attachments: [],
+                },
             ],
             visible_to_users: this.returnIds(dashboard.selectedViewers, 'member_id'),
             visible_to_groups: this.returnIds(dashboard.selectedGroup, 'group_id'),
             responsibility_center: this.returnIds(dashboard.selectedResponsibilityCenters, 'item_id'),
             responsibility_category: this.returnIds(dashboard.selectedResponsibilityCategories, 'category_id'),
             risk_category: this.returnIds(dashboard.selectedRiskCategories, 'category_id'),
-            display_criteria: (dashboard.displayCriteria === 'and') ? 'BOTH_RC_AND_CATEGORY' : 'RC_OR_CATEGORY',
+            display_criteria: dashboard.displayCriteria === 'and'
+                ? 'BOTH_RC_AND_CATEGORY'
+                : 'RC_OR_CATEGORY',
             timeframe: {
-                start_date: (dashboard.selectedFromDate) ? this.getDateFormate(dashboard?.selectedFromDate) : '',
-                end_date: (dashboard.selectedToDate) ? this.getDateFormate(dashboard?.selectedToDate) : '',
+                start_date: dashboard.selectedFromDate
+                    ? this.getDateFormate(dashboard?.selectedFromDate)
+                    : '',
+                end_date: dashboard.selectedToDate
+                    ? this.getDateFormate(dashboard?.selectedToDate)
+                    : '',
             },
             email_summary: this.setFrequency('', 'export'),
-            widget_details: dashboard.configureWidget
+            widget_details: dashboard.configureWidget,
         };
         if (this.mode == 'CREATE') {
             this.createDashboardService.submitDashboard(payload).subscribe((res) => {
@@ -3796,7 +3885,7 @@ class CreateDashboardComponent {
                     this.isSmiley = false;
                     this.close.emit({ mode: 'created', id: res._id });
                 }, 3000);
-            }, err => {
+            }, (err) => {
                 if (err.status === 409) {
                     this.snackBar.show('A dashboard with this name already exists. Specify a different name for the dashboard.', 'alert');
                     this.vLoader = false;
@@ -3810,7 +3899,9 @@ class CreateDashboardComponent {
         }
         if (this.mode === 'EDIT') {
             payload.widget_update_flag = true;
-            this.createDashboardService.updateDashboard(this.dashboardId, payload).subscribe({
+            this.createDashboardService
+                .updateDashboard(this.dashboardId, payload)
+                .subscribe({
                 next: (res) => {
                     this.vLoader = false;
                     // this.snackBar.show('The dashboard has been updated','info');
@@ -3825,7 +3916,7 @@ class CreateDashboardComponent {
                     console.error(error);
                     this.vLoader = false;
                     this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
-                }
+                },
             });
         }
     }
@@ -3834,33 +3925,47 @@ class CreateDashboardComponent {
             this.createDashboardService.fetchDashboard(this.dashboardId).subscribe((res) => {
                 const data = res;
                 this.listDetails.nonRemovableUsersList = [res.created_by];
-                data.visible_to_groups = (data?.visible_to_groups && data.visible_to_groups.length) ? data.visible_to_groups : [];
+                data.visible_to_groups =
+                    data?.visible_to_groups && data.visible_to_groups.length
+                        ? data.visible_to_groups
+                        : [];
                 this.populateDashboardForm(data);
-            }, error => {
+            }, (error) => {
                 console.error(error);
             });
         }
     }
     populateDashboardForm(data) {
         try {
-            console.log(" datattttta ===> ", data, this.groupList);
-            this.dashboardForm.dashboardName = data?.dashboard_name,
-                this.dashboardForm.dashboardDescriptionText = data?.description[0]?.content ?? "",
-                this.dashboardForm.selectedViewers = this.setList(this.usersList, data?.visible_to_users, 'member_id');
+            console.log(' datattttta ===> ', data, this.groupList);
+            (this.dashboardForm.dashboardName = data?.dashboard_name),
+                (this.dashboardForm.dashboardDescriptionText =
+                    data?.description[0]?.content ?? ''),
+                (this.dashboardForm.selectedViewers = this.setList(this.usersList, data?.visible_to_users, 'member_id'));
             this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-            data.visible_to_groups = (data?.visible_to_groups && data?.visible_to_groups.length) ? data?.visible_to_groups : [];
+            data.visible_to_groups =
+                data?.visible_to_groups && data?.visible_to_groups.length
+                    ? data?.visible_to_groups
+                    : [];
             this.dashboardForm.selectedGroup = this.setList(this.groupList, data?.visible_to_groups ?? [], 'group_id');
             this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
             this.dashboardForm.selectedResponsibilityCenters = this.setList(this.responsibilityCentersList, data?.responsibility_center, 'item_id');
             this.dashboardForm.selectedResponsibilityCategories = this.setList(this.allComplianceCategories, data?.responsibility_category, 'category_id');
             this.dashboardForm.selectedRiskCategories = this.setList(this.allRiskCategories, data?.risk_category, 'category_id');
-            this.dashboardForm.displayCriteria = (data?.display_criteria === "BOTH_RC_AND_CATEGORY") ? 'and' : 'or';
-            this.dashboardForm.selectedFromDate = (data?.timeframe?.start_date) ? new Date(data?.timeframe?.start_date) : undefined;
-            this.dashboardForm.selectedToDate = (data?.timeframe?.end_date) ? new Date(data?.timeframe?.end_date) : undefined;
+            this.dashboardForm.displayCriteria =
+                data?.display_criteria === 'BOTH_RC_AND_CATEGORY' ? 'and' : 'or';
+            this.dashboardForm.selectedFromDate = data?.timeframe?.start_date
+                ? new Date(data?.timeframe?.start_date)
+                : undefined;
+            this.dashboardForm.selectedToDate = data?.timeframe?.end_date
+                ? new Date(data?.timeframe?.end_date)
+                : undefined;
             this.vLoader = false;
             this.dashboardForm.configureWidget = data.widget_details;
-            this.selectedWidgets = data.widget_details.length > 0 ? [...new Set(data.widget_details)] : [];
-            this.displayedWidgets = data.all_widgets.length > 0 ? [...new Set(data.all_widgets)] : [];
+            this.selectedWidgets =
+                data.widget_details.length > 0 ? [...new Set(data.widget_details)] : [];
+            this.displayedWidgets =
+                data.all_widgets.length > 0 ? [...new Set(data.all_widgets)] : [];
             this.setFrequency(data?.email_summary, 'import');
             let minToDate = this.setToDate(data?.timeframe?.start_date);
             this.toDatePickerConfig = { min: minToDate };
@@ -3870,7 +3975,7 @@ class CreateDashboardComponent {
             }, 20);
         }
         catch (error) {
-            console.log("populate dashboard error =>", error);
+            console.log('populate dashboard error =>', error);
         }
     }
     setFrequency(event, mode) {
@@ -3883,10 +3988,14 @@ class CreateDashboardComponent {
                 case 'monthly':
                     const monthlyValueData = this.dashboardForm?.selectedFrequencies?.map((ele) => Number(ele) + 1);
                     const monthlyValue = monthlyValueData?.join();
-                    return '3~' + this.dashboardForm?.frequencyDate + '~' + monthlyValue + '~0';
+                    return ('3~' + this.dashboardForm?.frequencyDate + '~' + monthlyValue + '~0');
                 case 'quarterly':
                     const quarterlyValueData = Number(this.dashboardForm.selectedFrequencies) + 1;
-                    return '7~' + this.dashboardForm.frequencyDate + '~' + quarterlyValueData + '~0';
+                    return ('7~' +
+                        this.dashboardForm.frequencyDate +
+                        '~' +
+                        quarterlyValueData +
+                        '~0');
             }
         }
         if (mode === 'import') {
@@ -3894,61 +4003,74 @@ class CreateDashboardComponent {
             switch (val[0]) {
                 case '2':
                     {
-                        let stringVal = "Every ";
+                        let stringVal = 'Every ';
                         this.dashboardForm.selectedFrequencyType = 'weekly';
-                        this.dashboardForm.selectedFrequencies = val[1]?.split(',')?.map((element) => Number(element) - 1);
+                        this.dashboardForm.selectedFrequencies = val[1]
+                            ?.split(',')
+                            ?.map((element) => Number(element) - 1);
                         this.dashboardForm.selectedFrequencies?.forEach((dayIndex, index) => {
-                            stringVal += index === 0 ? this.dayNames[dayIndex] : ', ' + this.dayNames[dayIndex];
+                            stringVal +=
+                                index === 0
+                                    ? this.dayNames[dayIndex]
+                                    : ', ' + this.dayNames[dayIndex];
                         });
                         this.dashboardForm.frequencyMessage = stringVal;
                     }
                     break;
                 case '3':
                     {
-                        let stringVal = "every ";
+                        let stringVal = 'every ';
                         this.dashboardForm.selectedFrequencyType = 'monthly';
                         this.dashboardForm.frequencyDate = val[1];
-                        this.dashboardForm.selectedFrequencies = val[2]?.split(',')?.map((element) => Number(element) - 1);
+                        this.dashboardForm.selectedFrequencies = val[2]
+                            ?.split(',')
+                            ?.map((element) => Number(element) - 1);
                         this.dashboardForm.selectedFrequencies.forEach((monthIndex, index) => {
-                            stringVal += index === 0 ? this.monthNames[monthIndex] : ', ' + this.monthNames[monthIndex];
+                            stringVal +=
+                                index === 0
+                                    ? this.monthNames[monthIndex]
+                                    : ', ' + this.monthNames[monthIndex];
                         });
                         let monthDateName;
-                        if (this.dashboardForm.frequencyDate == "1") {
+                        if (this.dashboardForm.frequencyDate == '1') {
                             monthDateName = '1st';
                         }
-                        else if (this.dashboardForm.frequencyDate == "2") {
+                        else if (this.dashboardForm.frequencyDate == '2') {
                             monthDateName = '2nd';
                         }
-                        else if (this.dashboardForm.frequencyDate == "3") {
+                        else if (this.dashboardForm.frequencyDate == '3') {
                             monthDateName = '3rd';
                         }
                         else {
                             monthDateName = this.dashboardForm.frequencyDate + 'th';
                         }
-                        this.dashboardForm.frequencyMessage = monthDateName + ' of ' + stringVal;
+                        this.dashboardForm.frequencyMessage =
+                            monthDateName + ' of ' + stringVal;
                     }
                     break;
                 case '7':
                     {
-                        let stringVal = "every ";
+                        let stringVal = 'every ';
                         this.dashboardForm.selectedFrequencyType = 'quarterly';
                         this.dashboardForm.frequencyDate = val[1];
-                        this.dashboardForm.selectedFrequencies = Number(val[2].split(',')[0]) - 1;
+                        this.dashboardForm.selectedFrequencies =
+                            Number(val[2].split(',')[0]) - 1;
                         stringVal += this.quarters[this.dashboardForm.selectedFrequencies];
                         let monthDateName;
-                        if (this.dashboardForm.frequencyDate == "1") {
+                        if (this.dashboardForm.frequencyDate == '1') {
                             monthDateName = '1st';
                         }
-                        else if (this.dashboardForm.frequencyDate == "2") {
+                        else if (this.dashboardForm.frequencyDate == '2') {
                             monthDateName = '2nd';
                         }
-                        else if (this.dashboardForm.frequencyDate == "3") {
+                        else if (this.dashboardForm.frequencyDate == '3') {
                             monthDateName = '3rd';
                         }
                         else {
                             monthDateName = this.dashboardForm.frequencyDate + 'th';
                         }
-                        this.dashboardForm.frequencyMessage = monthDateName + ' of ' + stringVal;
+                        this.dashboardForm.frequencyMessage =
+                            monthDateName + ' of ' + stringVal;
                     }
                     break;
             }
@@ -3959,7 +4081,7 @@ class CreateDashboardComponent {
         this.cdr.detectChanges();
     }
     setPermission(roleActions) {
-        let ifExistRisk = roleActions?.find((el) => el.moduleName == "risk");
+        let ifExistRisk = roleActions?.find((el) => el.moduleName == 'risk');
         ifExistRisk?.subModule?.forEach((module) => {
             module?.permissions?.forEach((permission) => {
                 switch (permission?.code) {
@@ -3967,7 +4089,6 @@ class CreateDashboardComponent {
                         if (permission?.defaultPermission == 1 || permission?.enable == 1) {
                             this.isManageRisk = true;
                         }
-                        ;
                         break;
                     }
                 }
@@ -3976,10 +4097,10 @@ class CreateDashboardComponent {
     }
 }
 CreateDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <!-- Dashboard Name -->\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group\">\r\n                                    <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n                                    \r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Who -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n                                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\">&#xe9ae;</i>\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n                                            <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n                                        </div>\r\n                                        <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i> {{ user?.member_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </ng-container>\r\n\r\n                                    <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                                            <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\">&#xe90d;</i> {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i> {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Responsibility Center -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"  (click)=\"remove('rc',rc)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\">&#xe90d;</i> {{ rc?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Program -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i> {{ rCategory?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Risk Category -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i> {{ riskCategory?.category_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Display Criteria -->\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Timeframe -->\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Email Summary -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n                                <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n                                <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
+CreateDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector!=='name'\">\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <!-- Dashboard Name -->\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group\">\r\n                                    <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n                                    \r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Who -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n                                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\">&#xe9ae;</i>\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n                                            <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n                                        </div>\r\n                                        <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i> {{ user?.member_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </ng-container>\r\n\r\n                                    <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                                            <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\">&#xe90d;</i> {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i> {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Responsibility Center -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"  (click)=\"remove('rc',rc)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\">&#xe90d;</i> {{ rc?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Program -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i> {{ rCategory?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Risk Category -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i> {{ riskCategory?.category_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Display Criteria -->\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Timeframe -->\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Email Summary -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n                                <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n                                <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\" [class.hide]=\"activeSelector && activeSelector!=='name'\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}@media screen and (max-width: 1200px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1200px){::ng-deep .create-dashboard .vx-dialog-container.tablet-width{width:28px}::ng-deep .create-dashboard .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1200px){::ng-deep .create-dashboard .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i10.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: ConfigureWidgetsComponent, selector: "app-configure-widgets", inputs: ["selectedWidgetsData", "displayedWidgets", "showRisk", "showCompliance", "mode"], outputs: ["widgetsDataModified", "closeConfigureWidgets"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SnackBarComponent, selector: "app-snack-bar" }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "component", type: SmileyDialogComponent, selector: "app-smiley-dialog", inputs: ["message", "autoClose", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: UserListComponent, selector: "app-user-list", inputs: ["selectionType", "listDetails", "totalPages", "limit", "totalList", "feature", "totalgroupscount"], outputs: ["closeUserList", "saveSelectedUsers"] }, { kind: "component", type: ResponsibilityCenterComponent, selector: "app-responsibility-center", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: CategoriesComponent, selector: "app-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: RiskCategoriesComponent, selector: "app-risk-categories", inputs: ["categoryList", "allCategories", "categoryIdKey", "selectedCategories"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "component", type: FrequencyComponent, selector: "app-frequency", inputs: ["savedFrequencyTab", "savedFrequencies", "selectedDate"], outputs: ["closeFrequencyPopup", "saveFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <!-- Dashboard Name -->\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group\">\r\n                                    <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n                                    \r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Who -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n                                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\">&#xe9ae;</i>\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n                                            <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n                                        </div>\r\n                                        <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i> {{ user?.member_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </ng-container>\r\n\r\n                                    <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                                            <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\">&#xe90d;</i> {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i> {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Responsibility Center -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"  (click)=\"remove('rc',rc)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\">&#xe90d;</i> {{ rc?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Program -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i> {{ rCategory?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Risk Category -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i> {{ riskCategory?.category_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Display Criteria -->\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Timeframe -->\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Email Summary -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n                                <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n                                <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"] }]
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\" [feature]=\"feature\" ></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector!=='name'\">\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <!-- Dashboard Name -->\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\" *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Dashboard Name <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group\">\r\n                                    <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\" (focusout)=\"activateSelector('name',false)\" />\r\n                                    \r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 - dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && ( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">{{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character limit of 30 characters.':'Please enter a name for this Dashboard.'}}</p>\r\n\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <vcomply-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 - (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">You have exceeded the maximum character limit of 250 characters.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Who -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\" *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Who can view this dashboard?</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedViewers?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,1)\">\r\n                                            <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\" (click)=\"remove('whoCanView',user)\">&#xe9ae;</i>\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user.member_name}}</span>\r\n                                            <button *ngIf=\"dashboardForm?.selectedViewers?.length > 1 && !groupsEnabled\" class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userList.popover()\" placement=\"left\">+{{dashboardForm?.selectedViewers?.slice(1).length}}</button>\r\n                                        </div>\r\n                                        <app-popover #userList [dontCloseonClick]=\"true\" >\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id) && !groupsEnabled\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i> {{ user?.member_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </ng-container>\r\n\r\n                                    <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\r\n                                        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\r\n                                            <button class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userCount.popover()\" placement=\"left\">{{dashboardForm?.selectedViewers?.length}}</button>\r\n                                        </div>\r\n                                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"dashboardForm?.selectedGroup?.length && dashboardForm?.selectedViewers?.length\">&</span>\r\n                                        <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n                                            <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\r\n                                            <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"groupCount.popover()\" placement=\"right\">{{dashboardForm?.selectedGroup?.length}}</button>\r\n                                        </div>\r\n\r\n                                        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" *ngIf=\"!listDetails.nonRemovableUsersList.includes(data.member_id)\" (click)=\"remove('whoCanView',data)\">&#xe90d;</i> {{data.member_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                              \r\n                                        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n                                          <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                              <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\r\n                                                <div class=\"avatar-card\">\r\n                                                  <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                    <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup',data)\" >&#xe90d;</i> {{data.group_name}}\r\n                                                  </span>\r\n                                                </div>\r\n                                              </li>\r\n                                            </ul>\r\n                                          </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('whoCanView',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Responsibility Center -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\" src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Responsibility Center(s) that you would like<br>displayed in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"  (click)=\"remove('rc',rc)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rc.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCenters?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('rc',rc)\">&#xe90d;</i> {{ rc?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('rcList',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Program -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">PROGRAM</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Program(s) that you would like displayed in the<br>Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{rCategory.item_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">+{{dashboardForm?.selectedResponsibilityCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"rCategory?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i> {{ rCategory?.item_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Risk Category -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\" *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\" src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">RISK CATEGORIES</label>\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && dashboardForm?.selectedResponsibilityCategories?.length==0 && dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the Risk Categories that you would like displayed<br>in the Dashboard, if any.</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,1)\">\r\n                                        <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('riskCategory',riskCategory)\">&#xe9ae;</i>\r\n                                        <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{riskCategory.category_name}}</span>\r\n                                        <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"riskList.popover()\" placement=\"left\">+{{dashboardForm?.selectedRiskCategories?.slice(1).length}}</button>\r\n\r\n                                        <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                            <div class=\"action-list\">\r\n                                                <ul class=\"action-item\">\r\n                                                    <li *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 1; let j = index\">\r\n                                                        <div class=\"avatar-card\">\r\n                                                            <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                                                <i class=\"icons cross-icon\" (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i> {{ riskCategory?.category_name }}\r\n                                                            </span>\r\n                                                        </div>\r\n                                                    </li>\r\n                                                </ul>\r\n                                            </div>\r\n                                        </app-popover>\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"(click)=\"activateSelector('riskCategories',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Display Criteria -->\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Timeframe -->\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be displayed for. If no timeframe is selected, the information will be displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\" placeholder=\"Select Date\" (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\" (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\" [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Email Summary -->\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block\">\r\n                                <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4\">Email Summaries</label>\r\n                                <label class=\"vx-control-panel-sub-label\">If you would like to send a summary of this Dashboard, please select a frequency(By default VComply sends a weekly Summary).</label>\r\n                                <div *ngIf=\"!dashboardForm.frequencyMessage\" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency', true)\">\r\n                                    <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Email Summaries</div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"dashboardForm.frequencyMessage\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\r\n                                    <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"false\" [innerHTML]=\"dashboardForm.frequencyMessage\"></div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage && activeSelector !== 'frequency'\" class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('frequency',true)\">\r\n                                        <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next: Configure Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\" [class.hide]=\"activeSelector && activeSelector!=='name'\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Program or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Program.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\" showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\" (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\"></app-configure-widgets>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animation.css\";@import\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\";::ng-deep .create-dashboard-container{width:100vw;background:#161B2FCC}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #F1F1F1;float:left}@media screen and (max-width: 1200px){::ng-deep .create-dashboard .more-option{width:calc(100vw - 28px)}::ng-deep .create-dashboard .more-option app-user-list .user-list{right:28px}::ng-deep .create-dashboard .more-option app-responsibility-center .responsibility-center{right:28px}::ng-deep .create-dashboard .more-option app-categories .category-list{right:28px}::ng-deep .create-dashboard .more-option app-risk-categories .risk-category-list{right:28px}::ng-deep .create-dashboard .more-option app-frequency .create-frequency{right:28px}}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1200px){::ng-deep .create-dashboard .vx-dialog-container.tablet-width{width:28px}::ng-deep .create-dashboard .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:8px;right:8px;height:32px;width:32px;font-size:16px;color:#161b2f;cursor:pointer;background:transparent;border:none;border-radius:2px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#F1F1F1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1200px){::ng-deep .create-dashboard .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:transparent;position:relative;border-radius:0 0 0 30px;background:transparent}@-moz-document url-prefix(){::ng-deep .form-group .vx-dialog-body-container.hidden-scroll{overflow:hidden}}::ng-deep .form-group .vx-dialog-body-container .form-group-row{display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image{width:36px;min-width:36px;height:36px;margin-left:-36px;margin-right:20px;margin-top:28px;display:flex;align-items:center;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image img{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .image .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input{height:40px;border-radius:4px;border:1px solid #dbdbdb;outline:none;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input+vcomply-editor{margin-top:8px;display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:after{border-left:none;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top:none;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% + 8px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selectbox:hover .custom-input{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;position:relative;transition:all .2s ease-in-out}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .edit{border:1px solid #F1F1F1;border-radius:2px;background:#FFFFFF;outline:none;cursor:pointer;height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left{width:auto;display:flex}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .left.frequency-left{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:calc(100% - 70px)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container{width:auto}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip{border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip i{cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container .chip .value{max-width:100px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .count{border-radius:2px;height:24px;padding:2px 8px;border:1px solid #1E5DD3;cursor:pointer;outline:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count{background:#1e5dd3;border-radius:20px;color:#fff;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .selected .user-group-chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group{display:flex;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group span.counter{background:transparent;color:#161b2f;font-size:9px;font-weight:500;position:absolute;top:0;right:0;border-radius:3px;height:16px;text-align:center;line-height:16px;padding:0 2px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor{width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group marx-editor .editor-container .editable-block.bottom:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group vcomply-editor .editor-container .editable-block.bottom:before{opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-form-group .vx-input-group.vx-input-group{margin-top:8px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container{border-radius:4px;border-color:#dbdbdb}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover{border-color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:focus-within .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container:hover .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container:hover .editor-tools{border-top-color:#1e5dd3!important;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;max-height:90px}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){@supports (-webkit-appearance: none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editable-block:before,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools{border-color:#dbdbdb;border-radius:0 0 2px 2px;transition:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button,::ng-deep .form-group .vx-dialog-body-container .form-group-row .form vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#FFFFFF;outline:none;padding:.1875rem .75rem;line-height:1.25rem;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:12px;width:94%;display:block;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .custom-input.error{border:1px solid #d93b41}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel i{font-size:12px;color:#1e5dd3;margin-left:7px;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;margin-bottom:.5rem;display:block;text-transform:none;width:100%;margin-top:0}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .vx-control-panel-sub-label span.required{color:#eb2424}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel+.vx-control-panel-sub-label{margin-top:-.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.radio{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #DBDBDB;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item svg{position:absolute;top:17px;left:12px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio label.radio-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .radio-group app-cs-radio+app-cs-radio{margin-top:.5rem}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select{position:relative;width:calc(50% - .25rem);overflow:hidden;height:40px}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;width:100%;cursor:pointer}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input::placeholder{color:#747576}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select i{display:flex;justify-content:center;align-items:center;height:39px;width:14px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:14px;pointer-events:none;z-index:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled{pointer-events:none;filter:grayscale(1);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select.disabled input{background:#f1f1f1}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form label.vx-control-panel span.sub-label{color:#747576;font-size:.6875rem;font-weight:400;line-height:1rem;text-transform:none;width:100%}::ng-deep .form-group .vx-dialog-body-container .form-group-row.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active{pointer-events:none;filter:grayscale(0);opacity:1}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image{filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .image:before{display:none}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form{opacity:1;filter:grayscale(0)}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form .custom-input,::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .form input[type=text]{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-group .vx-dialog-body-container .form-group-row.active .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a;pointer-events:none}::ng-deep .form-group .vx-dialog-body-container:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 22%,#ffffff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}::ng-deep .form-group .button-block{position:relative;z-index:2}::ng-deep .form-group .button-block button{font-size:13px!important;letter-spacing:1.3px!important;height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{background:#f1f1f1!important;border-color:#f1f1f1!important;color:#747576!important;opacity:1!important;filter:unset!important}::ng-deep .form-group.disabled{pointer-events:none;z-index:2}::ng-deep .form-group.disabled .image{position:relative;filter:grayscale(1)}::ng-deep .form-group.disabled .image:before{content:\"\";position:absolute;inset:0;background:#FFFFFF;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.global-confirmation-alert{display:block;position:absolute;z-index:9;right:0;bottom:0;left:0;background:#d93b41}.global-confirmation-alert-top{display:flex;align-items:center;justify-content:flex-start;padding:20px 20px 12px}.global-confirmation-alert span.icon-block{height:36px;width:36px;border-radius:50%;background:#FFFFFF;border:1px solid #DCDCDC;display:flex;justify-content:center;align-items:center;margin-right:16px}.global-confirmation-alert span.icon-block i{color:#d93b41;font-size:12px}.global-confirmation-alert p.text{color:#fff;font-size:14px;font-weight:300;margin:0;width:calc(100% - 52px)}.global-confirmation-alert-bottom{display:flex;align-items:center;padding:0 12px 12px 72px;background:#d93b41}.global-confirmation-alert-bottom .button-group{display:flex}.global-confirmation-alert-bottom p.message{font-size:14px;font-weight:500;margin:0;line-height:20px;color:#fff}.global-confirmation-alert button{height:24px;width:64px;border:1px solid #000;border-radius:2px;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}.global-confirmation-alert button+button{margin-left:4px}.global-confirmation-alert button.fill{background:#ffffff;color:#1e5dd3;border-color:#fff}.global-confirmation-alert button.outline{background:transparent;color:#fff;border-color:#fff}::ng-deep marx-modal .popup-modal-background,::ng-deep vcomply-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.error{border-color:#eb2424}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}\n"] }]
         }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
                 type: Input
             }], mode: [{
@@ -4657,15 +4778,14 @@ class FormGroupComponent {
         this.dashboardDescription = {
             placeholder: 'Description (Max limit: 250 characters)',
             mode: 'prime',
-            id: 'description'
+            id: 'description',
         };
         this.fromDatePickerConfig = {
-            min: this.getCurrentDate()
+            min: this.getCurrentDate(),
         };
         this.toDatePickerConfig = {};
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     openFromDatePicker() {
         this.fromDatePicker.api.open();
         this.datePickerOverlay = true;
@@ -4718,7 +4838,9 @@ class FormGroupComponent {
         let allFieldsValid = true;
         this.dashboardNameError = '';
         this.dashboardDescriptionError = '';
-        if (this.dashboardName === null || this.dashboardName === undefined || this.dashboardName === '') {
+        if (this.dashboardName === null ||
+            this.dashboardName === undefined ||
+            this.dashboardName === '') {
             this.dashboardNameError = this.fieldEmptyErrorMessage;
             allFieldsValid = false;
         }
@@ -4726,19 +4848,22 @@ class FormGroupComponent {
             this.dashboardNameError = this.fieldLimitExceededErrorMessage.replace('XYZ', '30');
             allFieldsValid = false;
         }
-        else if (this.dashboardDescriptionText === null || this.dashboardDescriptionText === undefined || this.dashboardDescriptionText === '') {
+        else if (this.dashboardDescriptionText === null ||
+            this.dashboardDescriptionText === undefined ||
+            this.dashboardDescriptionText === '') {
             this.dashboardDescriptionError = this.fieldEmptyErrorMessage;
             allFieldsValid = false;
         }
         else if (this.dashboardDescriptionText.length > 250) {
-            this.dashboardDescriptionError = this.fieldLimitExceededErrorMessage.replace('XYZ', '250');
+            this.dashboardDescriptionError =
+                this.fieldLimitExceededErrorMessage.replace('XYZ', '250');
             allFieldsValid = false;
         }
         return allFieldsValid;
     }
     getCurrentDate() {
         let today = new Date();
-        return today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
+        return (today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear());
     }
     displayCriteriaSelected(event, selection) {
         this.displayCriteria = selection;