vc-create-dashboard 3.0.81 → 3.0.82

package/fesm2022/vc-create-dashboard.mjs

@@ -1,22 +1,22 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, Optional, Directive, Input, HostListener, EventEmitter, Component, ViewChild, Output, ElementRef, forwardRef, NgModule, Inject } from '@angular/core';
+import { Injectable, Pipe, Optional, Directive, Input, HostListener, EventEmitter, Component, ViewChild, Output, ElementRef, forwardRef, NgModule } from '@angular/core';
 import dayjs from 'dayjs';
+import { of, BehaviorSubject, Subject, forkJoin } from 'rxjs';
+import { map, retry, catchError, debounceTime, takeUntil, finalize } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { of, BehaviorSubject, Subject } from 'rxjs';
-import { map, retry, catchError, debounceTime, takeUntil } from 'rxjs/operators';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
-import * as i8 from '@vcomply/editor';
+import * as i7 from '@vcomply/editor';
 import { VcomplyEditorModule } from '@vcomply/editor';
 import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i18 from 'ng2-date-picker';
+import * as i17 from 'ng2-date-picker';
 import { DpDatePickerModule } from 'ng2-date-picker';
 import { nanoid } from 'nanoid';
 import * as i1$2 from '@angular/platform-browser';
-import * as i5$1 from '@angular/router';
+import * as i3 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
 
 let CreateDashboardService$1 = class CreateDashboardService {
@@ -116,6 +116,187 @@ const PROGRAM_LIST_API = {
     categoryList: 'sailsProgramCategories',
 };
 
+/** Shared helpers for custom dashboard create/edit form hydration. */
+function normalizeIdArray(value) {
+    if (value == null || value === '') {
+        return [];
+    }
+    const items = Array.isArray(value) ? value : [value];
+    return items
+        .map((item) => {
+        if (typeof item === 'number' || typeof item === 'string') {
+            return Number(item);
+        }
+        if (typeof item === 'object' && item != null) {
+            const obj = item;
+            return Number(obj['id'] ??
+                obj['programId'] ??
+                obj['rcid'] ??
+                obj['rc_id'] ??
+                obj['rcId'] ??
+                obj['item_id']);
+        }
+        return NaN;
+    })
+        .filter((id) => !Number.isNaN(id));
+}
+function extractProgramIdsFromDashboard(data) {
+    if (!data) {
+        return [];
+    }
+    const direct = normalizeIdArray(data.programs ?? data.programId ?? data.program?.programId ?? data.programIds);
+    if (direct.length) {
+        return direct;
+    }
+    const allPrograms = data.program?.all_programs;
+    if (!Array.isArray(allPrograms) || !allPrograms.length) {
+        return [];
+    }
+    if (typeof allPrograms[0] === 'object') {
+        const fromObjects = [
+            ...new Set(allPrograms
+                .map((item) => Number(item?.programId ?? item?.program_id ?? item?.parentId))
+                .filter((id) => !Number.isNaN(id))),
+        ];
+        if (fromObjects.length) {
+            return fromObjects;
+        }
+        return normalizeIdArray(allPrograms);
+    }
+    return normalizeIdArray(allPrograms);
+}
+function extractCategoryIdsFromDashboard(data) {
+    if (!data) {
+        return [];
+    }
+    return normalizeIdArray(data.responsibility_category ??
+        data.responsibilityCategory ??
+        data.responsibilityCategoryId ??
+        data.compliance_category ??
+        data.categoryId ??
+        data.categoryIds ??
+        []);
+}
+function extractRcIdsFromDashboard(data) {
+    if (!data) {
+        return [];
+    }
+    const fromRcId = normalizeIdArray(data.rcId);
+    if (fromRcId.length) {
+        return fromRcId;
+    }
+    return normalizeIdArray(data.responsibilityCenters ??
+        data.responsibilityCenterId ??
+        data.responsibility_center ??
+        data.responsibility_centers ??
+        data.rcs ??
+        []);
+}
+function hasProgramSelectionInMap(map) {
+    if (!map || typeof map !== 'object' || Array.isArray(map)) {
+        return false;
+    }
+    return Object.keys(map).some((key) => (map[key] ?? []).length > 0);
+}
+function normalizeProgramCategories(categories) {
+    return categories.map((category) => ({
+        ...category,
+        category_id: category.category_id ?? category.id,
+        item_name: category.item_name ?? category.name,
+    }));
+}
+function flattenProgramSelectionMap(selections) {
+    return Object.keys(selections ?? {}).reduce((acc, key) => acc.concat(selections[key] ?? []), []);
+}
+function normalizeProgramSelectionMap(map) {
+    const normalized = {};
+    Object.keys(map ?? {}).forEach((programKey) => {
+        normalized[String(programKey)] = (map[programKey] ?? []).map((cat) => {
+            if (typeof cat === 'number' || typeof cat === 'string') {
+                return {
+                    id: String(cat),
+                    category_id: Number(cat),
+                };
+            }
+            return {
+                ...cat,
+                id: String(cat?.id ?? cat?.category_id),
+                name: cat?.name ?? cat?.item_name,
+            };
+        });
+    });
+    return hasProgramSelectionInMap(normalized) ? normalized : null;
+}
+function resolveCategoryProgramId(cat, complianceCatalog = []) {
+    const direct = cat?.programId ?? cat?.program_id ?? cat?.parentId ?? cat?.program?.id;
+    if (direct != null && direct !== '') {
+        return String(direct);
+    }
+    const catId = Number(cat?.category_id ?? cat?.id);
+    if (!Number.isNaN(catId)) {
+        const found = complianceCatalog.find((c) => Number(c?.category_id ?? c?.id) === catId);
+        if (found) {
+            return String(found?.programId ?? found?.program_id ?? found?.parentId ?? '');
+        }
+    }
+    return '';
+}
+function buildProgramSelectionMapFromCategories(categories, complianceCatalog = []) {
+    const map = {};
+    (categories ?? []).forEach((cat) => {
+        const programKey = resolveCategoryProgramId(cat, complianceCatalog);
+        if (!programKey || programKey === 'undefined' || programKey === 'NaN') {
+            return;
+        }
+        if (!map[programKey]) {
+            map[programKey] = [];
+        }
+        map[programKey].push({
+            ...cat,
+            id: String(cat?.id ?? cat?.category_id),
+            name: cat?.name ?? cat?.item_name,
+        });
+    });
+    return map;
+}
+function parseSailsProgramList(res) {
+    if (Array.isArray(res?.data?.programs)) {
+        return res.data.programs;
+    }
+    if (Array.isArray(res?.programs)) {
+        return res.programs;
+    }
+    return [];
+}
+function getEditDashboardCdid(data, dashboardDetails, dashboardId) {
+    const row = data ?? dashboardDetails ?? {};
+    const core = row?.dashboard_details ?? row?.dashboard ?? row;
+    const cdid = core?.cdid ??
+        core?.cddid ??
+        row?.cdid ??
+        row?.cddid ??
+        dashboardDetails?.cdid ??
+        dashboardDetails?.cddid;
+    if (cdid != null && cdid !== '') {
+        return String(cdid);
+    }
+    const fallback = dashboardId ?? '';
+    if (fallback && !/^\d+$/.test(String(fallback))) {
+        return String(fallback);
+    }
+    return '';
+}
+function getSelectedProgramsMap(data) {
+    const map = data?.program?.selected_programs;
+    if (map && typeof map === 'object' && !Array.isArray(map)) {
+        return map;
+    }
+    return undefined;
+}
+function filterActiveWidgets(widgets) {
+    return (widgets ?? []).filter((w) => !w?.state || w.state === 'ACTIVE');
+}
+
 class Configurations {
     envConfig;
     constructor() {
@@ -259,14 +440,70 @@ class CreateDashboardService {
      * Fetches the Dashboard details for data population to Edit the dashboard
      * @param id
      */
+    /** @deprecated Legacy Global-Dashboard edit fetch; custom dashboards use fetchCustomDashboardById + getWidgets. */
     fetchDashboard(id) {
         return this.http
             .get(this.env.dashboard + id + '?mode=edit', this.httpOptions)
             .pipe(retry(2));
     }
-    updateDashboard(id, payload) {
+    /**
+     * Edit mode only — GET Global-Dashboard/getWidgets?dashboardId={cdid}
+     * @param cdid Custom dashboard id (e.g. 438F8KSK22), not numeric record id
+     */
+    fetchCustomDashboardWidgetDetails(cdid) {
+        return this.http
+            .get(`${this.env.dashboard}getWidgets?dashboardId=${encodeURIComponent(cdid)}`, this.httpOptions)
+            .pipe(map((res) => this.normalizeWidgetDetailsResponse(res)), retry(2));
+    }
+    normalizeWidgetDetailsResponse(res) {
+        const payload = res?.data ?? res;
+        const widgetArr = payload?.widgetArr ?? res?.widgetArr;
+        const allWidgetsArray = payload?.allWidgetsArray ?? res?.allWidgetsArray ?? widgetArr;
+        if (widgetArr || allWidgetsArray) {
+            const normalizedWidgetArr = Array.isArray(widgetArr) ? widgetArr : [];
+            const normalizedAll = Array.isArray(allWidgetsArray)
+                ? allWidgetsArray
+                : normalizedWidgetArr;
+            return {
+                widgetArr: normalizedWidgetArr,
+                allWidgetsArray: normalizedAll,
+                activeWidgetArr: payload?.activeWidgetArr ??
+                    res?.activeWidgetArr ??
+                    normalizedWidgetArr,
+            };
+        }
+        if (Array.isArray(res)) {
+            return { widgetArr: res, allWidgetsArray: res, activeWidgetArr: res };
+        }
+        if (Array.isArray(res?.data)) {
+            return {
+                widgetArr: res.data,
+                allWidgetsArray: res.data,
+                activeWidgetArr: res.data,
+            };
+        }
+        const legacyWidgets = res?.widget_details ?? res?.widgets ?? [];
+        const legacyAll = res?.all_widgets ?? legacyWidgets;
+        return {
+            widgetArr: legacyWidgets,
+            allWidgetsArray: legacyAll,
+            activeWidgetArr: res?.activeWidgetArr ?? legacyWidgets,
+        };
+    }
+    getSailsProgramList() {
+        return this.http
+            .get(this.env.complianceGet + 'sailsProgramList', this.httpOptions)
+            .pipe(retry(2));
+    }
+    getProgramCategories(programId) {
+        return this.http
+            .get(`${this.env.complianceGet}sailsProgramCategories&id=${programId}`, this.httpOptions)
+            .pipe(retry(2));
+    }
+    /** Full custom dashboard payload (includes responsibilityCenterId, programId, etc.). */
+    fetchCustomDashboardById(id) {
         return this.http
-            .put(this.env.dashboard + 'UpdateDashboard/' + id, payload, this.httpOptions)
+            .get(`${this.env.dashboard}customDashboard/${id}`, this.httpOptions)
             .pipe(retry(2));
     }
     getUserInformation() {
@@ -292,11 +529,13 @@ class CreateDashboardService {
     createDashboard(payload) {
         return this.http.post(this.env.dashboard + 'customDashboard', payload, this.httpOptions);
     }
+    updateDashboard(payload, id) {
+        return this.http.put(this.env.dashboard + 'customDashboard/' + id, payload, this.httpOptions);
+    }
     saveWidgetDetails(payload) {
         return this.http.post(this.env.dashboard + 'createWidgets/creator', payload, this.httpOptions);
     }
     buildPayload(payload) {
-        console.log(" build payload =>", payload);
         return {
             dashboard: {
                 name: payload.dashboard_name,
@@ -392,6 +631,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class ToolTipDirective {
+    el;
+    renderer;
+    tooltipTitle;
+    placement;
+    type;
+    tooltipMandatory;
+    showTooltip = true;
+    animate;
+    tooltip;
+    offset = 8;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() { }
+    onMouseEnter() {
+        this.hide();
+        this.show();
+    }
+    onMouseOver() {
+        this.hide();
+        this.show();
+    }
+    onMouseLeave() {
+        this.hide();
+    }
+    onMouseOut() {
+        this.hide();
+    }
+    onClick() {
+        this.hide();
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    show() {
+        if (!this.showTooltip) {
+            return;
+        }
+        this.create();
+        const element = this.el.nativeElement;
+        if (this.tooltipMandatory === true) {
+            this.setPosition();
+            this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
+        }
+        else {
+            if (element.scrollWidth * element.scrollHeight >
+                element.offsetWidth * element.offsetHeight) {
+                this.setPosition();
+                this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
+            }
+        }
+    }
+    hide() {
+        if (document.body.contains(this.tooltip)) {
+            if (this.renderer) {
+                this.renderer.removeChild(document.body, document.getElementById('tooltip'));
+            }
+        }
+    }
+    create() {
+        this.tooltip = this.renderer.createElement('span');
+        this.tooltip.setAttribute('id', 'tooltip');
+        this.tooltip.innerHTML = this.tooltipTitle;
+        this.renderer.appendChild(document.body, this.tooltip);
+        this.renderer.addClass(this.tooltip, 'ng-tooltip');
+        this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
+        this.renderer.addClass(this.tooltip, `${this.type}`);
+        if (this.animate) {
+            this.renderer.addClass(this.tooltip, `animate-${this.placement}`);
+        }
+    }
+    setPosition() {
+        const hostPos = this.el.nativeElement.getBoundingClientRect();
+        const tooltipPos = this.tooltip.getBoundingClientRect();
+        const scrollPos = window.pageYOffset ||
+            document.documentElement.scrollTop ||
+            document.body.scrollTop ||
+            0;
+        const w = window.innerWidth;
+        const h = window.innerHeight;
+        let top;
+        let left;
+        if (this.placement === 'top') {
+            top = hostPos.top - tooltipPos.height - this.offset;
+            left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+        }
+        if (this.placement === 'bottom') {
+            if (hostPos.top + tooltipPos.height > h) {
+                top = hostPos.top - tooltipPos.height;
+                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom`);
+                this.renderer.addClass(this.tooltip, `ng-tooltip-top`);
+            }
+            else {
+                top = hostPos.bottom + this.offset;
+                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+            }
+        }
+        if (this.placement === 'left') {
+            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+            left = hostPos.left - tooltipPos.width - this.offset;
+        }
+        if (this.placement === 'right') {
+            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+            left = hostPos.right + this.offset;
+        }
+        if (this.placement === 'bottom-right') {
+            top = hostPos.bottom + this.offset;
+            left = hostPos.left - (tooltipPos.width - 28);
+        }
+        if (this.placement === 'bottom-left') {
+            if (hostPos.top + tooltipPos.height > h - 30) {
+                top = hostPos.top - tooltipPos.height;
+                console.log('bottom left', hostPos.top - tooltipPos.height);
+                left = hostPos.left;
+                this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom-left`);
+                this.renderer.addClass(this.tooltip, `ng-tooltip-top-left`);
+            }
+            else {
+                top = hostPos.bottom + this.offset;
+                left = hostPos.left;
+            }
+        }
+        this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+        this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolTipDirective, selector: "[arTooltip]", inputs: { tooltipTitle: ["arTooltip", "tooltipTitle"], placement: "placement", type: "type", tooltipMandatory: "tooltipMandatory", showTooltip: "showTooltip", animate: "animate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "mouseout": "onMouseOut()", "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[arTooltip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipTitle: [{
+                type: Input,
+                args: ['arTooltip']
+            }], placement: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], tooltipMandatory: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DialogRef {
+    afterDialogClosed = new Subject();
+    afterClosed = this.afterDialogClosed.asObservable();
+    constructor() { }
+    close(result) {
+        this.afterDialogClosed.next(result);
+        document.body.style.overflow = 'auto';
+    }
+}
+
 class ConfigureWidgetsService {
     http;
     authService;
@@ -599,204 +1014,28 @@ class ConfigureWidgetsService {
     // For dashboard view
     dashBoardWidgetUpdate(widGetJson) {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
-        return this.http
-            .put(this.env.OrganizationPut + 'dashboardWidgets', widGetJson)
-            .pipe(retry(2));
-    }
-    moduleType(identifier) {
-        if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
-            return 'RISK';
-            // } else if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
-            //   return 'COMPLIANCE';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-class ToolTipDirective {
-    el;
-    renderer;
-    tooltipTitle;
-    placement;
-    type;
-    tooltipMandatory;
-    showTooltip = true;
-    animate;
-    tooltip;
-    offset = 8;
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-    }
-    ngOnInit() { }
-    onMouseEnter() {
-        this.hide();
-        this.show();
-    }
-    onMouseOver() {
-        this.hide();
-        this.show();
-    }
-    onMouseLeave() {
-        this.hide();
-    }
-    onMouseOut() {
-        this.hide();
-    }
-    onClick() {
-        this.hide();
-    }
-    ngOnDestroy() {
-        this.hide();
-    }
-    show() {
-        if (!this.showTooltip) {
-            return;
-        }
-        this.create();
-        const element = this.el.nativeElement;
-        if (this.tooltipMandatory === true) {
-            this.setPosition();
-            this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
-        }
-        else {
-            if (element.scrollWidth * element.scrollHeight >
-                element.offsetWidth * element.offsetHeight) {
-                this.setPosition();
-                this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
-            }
-        }
-    }
-    hide() {
-        if (document.body.contains(this.tooltip)) {
-            if (this.renderer) {
-                this.renderer.removeChild(document.body, document.getElementById('tooltip'));
-            }
-        }
-    }
-    create() {
-        this.tooltip = this.renderer.createElement('span');
-        this.tooltip.setAttribute('id', 'tooltip');
-        this.tooltip.innerHTML = this.tooltipTitle;
-        this.renderer.appendChild(document.body, this.tooltip);
-        this.renderer.addClass(this.tooltip, 'ng-tooltip');
-        this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
-        this.renderer.addClass(this.tooltip, `${this.type}`);
-        if (this.animate) {
-            this.renderer.addClass(this.tooltip, `animate-${this.placement}`);
-        }
-    }
-    setPosition() {
-        const hostPos = this.el.nativeElement.getBoundingClientRect();
-        const tooltipPos = this.tooltip.getBoundingClientRect();
-        const scrollPos = window.pageYOffset ||
-            document.documentElement.scrollTop ||
-            document.body.scrollTop ||
-            0;
-        const w = window.innerWidth;
-        const h = window.innerHeight;
-        let top;
-        let left;
-        if (this.placement === 'top') {
-            top = hostPos.top - tooltipPos.height - this.offset;
-            left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-        }
-        if (this.placement === 'bottom') {
-            if (hostPos.top + tooltipPos.height > h) {
-                top = hostPos.top - tooltipPos.height;
-                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-                this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom`);
-                this.renderer.addClass(this.tooltip, `ng-tooltip-top`);
-            }
-            else {
-                top = hostPos.bottom + this.offset;
-                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-            }
-        }
-        if (this.placement === 'left') {
-            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
-            left = hostPos.left - tooltipPos.width - this.offset;
-        }
-        if (this.placement === 'right') {
-            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
-            left = hostPos.right + this.offset;
-        }
-        if (this.placement === 'bottom-right') {
-            top = hostPos.bottom + this.offset;
-            left = hostPos.left - (tooltipPos.width - 28);
-        }
-        if (this.placement === 'bottom-left') {
-            if (hostPos.top + tooltipPos.height > h - 30) {
-                top = hostPos.top - tooltipPos.height;
-                console.log('bottom left', hostPos.top - tooltipPos.height);
-                left = hostPos.left;
-                this.renderer.removeClass(this.tooltip, `ng-tooltip-bottom-left`);
-                this.renderer.addClass(this.tooltip, `ng-tooltip-top-left`);
-            }
-            else {
-                top = hostPos.bottom + this.offset;
-                left = hostPos.left;
-            }
-        }
-        this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
-        this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolTipDirective, selector: "[arTooltip]", inputs: { tooltipTitle: ["arTooltip", "tooltipTitle"], placement: "placement", type: "type", tooltipMandatory: "tooltipMandatory", showTooltip: "showTooltip", animate: "animate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "mouseout": "onMouseOut()", "click": "onClick()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[arTooltip]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipTitle: [{
-                type: Input,
-                args: ['arTooltip']
-            }], placement: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], tooltipMandatory: [{
-                type: Input
-            }], showTooltip: [{
-                type: Input
-            }], animate: [{
-                type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseOver: [{
-                type: HostListener,
-                args: ['mouseover']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], onMouseOut: [{
-                type: HostListener,
-                args: ['mouseout']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-class DialogRef {
-    afterDialogClosed = new Subject();
-    afterClosed = this.afterDialogClosed.asObservable();
-    constructor() { }
-    close(result) {
-        this.afterDialogClosed.next(result);
-        document.body.style.overflow = 'auto';
+        return this.http
+            .put(this.env.OrganizationPut + 'dashboardWidgets', widGetJson)
+            .pipe(retry(2));
+    }
+    moduleType(identifier) {
+        if (JSON.stringify(this.riskWidgetsData).includes(identifier)) {
+            return 'RISK';
+            // } else if (JSON.stringify(this.complianceWidgetsData).includes(identifier)) {
+            //   return 'COMPLIANCE';
+        }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, deps: [{ token: i1.HttpClient }, { token: AuthService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, providedIn: 'root' });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigureWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: AuthService }, { type: Configurations, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 class PopoverComponent {
     popoverService;
@@ -1186,61 +1425,77 @@ class ConfigureWidgetsComponent {
         this.snackBar = snackBar;
     }
     ngOnChanges() {
-        if (this.mode == 'EDIT') {
-            this.setWidgetsVisibilityToFalse();
-            this.riskWidgetsDisplayCount = 0;
-            this.complianceWidgetsDisplayCount = 0;
-            const finalData = [...new Set(this.displayedWidgets)];
-            finalData.forEach((element, index) => {
-                this.widgetsList.COMPLIANCE.forEach((ele) => {
-                    if (ele.id == element.widget_code) {
-                        ele.visibility = true;
-                        if (ele.subWidgets.length > 0) {
-                            const filterData = [];
-                            element.sub_widgets.filter((subwidget) => {
-                                filterData.push(subwidget.widget_code);
-                            });
-                            ele.subWidgets.forEach((subElement, subIndex) => {
-                                if (filterData.includes(subElement.id)) {
-                                    ele.subWidgets[subIndex].visibility = true;
-                                }
-                                else {
-                                    ele.subWidgets[subIndex].visibility = false;
-                                }
-                            });
-                        }
-                        this.complianceWidgetsDisplayCount++;
-                    }
-                });
+        this.selectedWidgets = [];
+        if (this.mode === 'EDIT') {
+            this.applyEditModeWidgetCatalog();
+        }
+        else {
+            this.applyCreateModeWidgetVisibility();
+            this.applySavedWidgetSelection(this.selectedWidgetsData);
+        }
+        this.module = this.showCompliance ? 'COMPLIANCE' : 'RISK';
+        this.setSelectedWidgets();
+    }
+    /** EDIT: show full widget catalog; check items present in getWidgets widgetArr. */
+    applyEditModeWidgetCatalog() {
+        this.widgetsList.COMPLIANCE.forEach((ele) => {
+            ele.value = false;
+            ele.visibility = true;
+            (ele.subWidgets ?? []).forEach((sub) => {
+                sub.value = false;
+                sub.visibility = true;
             });
+        });
+        this.complianceWidgetsDisplayCount = this.widgetsList.COMPLIANCE.filter((w) => w.visibility).length;
+        this.riskWidgetsDisplayCount = 0;
+        this.applySavedWidgetSelection(this.selectedWidgetsData);
+    }
+    /** CREATE: limit visible tiles to displayedWidgets when provided. */
+    applyCreateModeWidgetVisibility() {
+        if (!this.displayedWidgets?.length) {
+            return;
         }
-        const data = [...new Set(this.selectedWidgetsData)];
-        data.forEach((element, index) => {
+        this.setWidgetsVisibilityToFalse();
+        this.riskWidgetsDisplayCount = 0;
+        this.complianceWidgetsDisplayCount = 0;
+        const finalData = [...new Set(this.displayedWidgets)];
+        finalData.forEach((element) => {
             this.widgetsList.COMPLIANCE.forEach((ele) => {
-                if (ele.id == element.widget_code && element.state == 'ACTIVE') {
-                    ele.value = true;
-                    if (ele.subWidgets.length > 0) {
-                        const filterData = [];
-                        element.sub_widgets.filter((subwidget) => {
-                            if (subwidget.state == 'ACTIVE') {
-                                filterData.push(subwidget.widget_code);
-                            }
-                        });
-                        ele.subWidgets.forEach((subElement, subIndex) => {
-                            if (filterData.includes(subElement.id)) {
-                                ele.subWidgets[subIndex].value = true;
-                            }
-                            else {
-                                ele.subWidgets[subIndex].value = false;
-                            }
-                        });
-                    }
-                    this.selectedWidgets.push(ele);
+                if (ele.id !== element.widget_code) {
+                    return;
+                }
+                ele.visibility = true;
+                if (ele.subWidgets.length > 0) {
+                    const visibleSubCodes = (element.sub_widgets ?? []).map((subwidget) => subwidget.widget_code);
+                    ele.subWidgets.forEach((subElement, subIndex) => {
+                        ele.subWidgets[subIndex].visibility = visibleSubCodes.includes(subElement.id);
+                    });
+                }
+                this.complianceWidgetsDisplayCount++;
+            });
+        });
+    }
+    applySavedWidgetSelection(savedWidgets) {
+        const data = [...new Set(savedWidgets ?? [])];
+        data.forEach((element) => {
+            if (element?.state && element.state !== 'ACTIVE') {
+                return;
+            }
+            this.widgetsList.COMPLIANCE.forEach((ele) => {
+                if (ele.id !== element.widget_code) {
+                    return;
+                }
+                ele.value = true;
+                if (ele.subWidgets.length > 0 && element.sub_widgets?.length) {
+                    const activeSubCodes = (element.sub_widgets ?? [])
+                        .filter((subwidget) => subwidget.state === 'ACTIVE')
+                        .map((subwidget) => subwidget.widget_code);
+                    ele.subWidgets.forEach((subElement, subIndex) => {
+                        ele.subWidgets[subIndex].value = activeSubCodes.includes(subElement.id);
+                    });
                 }
             });
         });
-        this.module = this.showCompliance ? 'COMPLIANCE' : 'RISK';
-        this.setSelectedWidgets();
     }
     ngOnInit() { }
     widgetsList = {
@@ -1265,6 +1520,16 @@ class ConfigureWidgetsComponent {
                 module: 'COMPLIANCE',
                 subWidgets: [],
             },
+            {
+                title: 'Responsibilities by Assignee',
+                id: 'responsibilities_by_assignee',
+                description: 'The Responsibilities by Assignee widget shows the performance of responsibilities by users.',
+                widgetImage: ASSETS.responsibilitiesByAssignee,
+                value: false,
+                visibility: true,
+                module: 'COMPLIANCE',
+                subWidgets: [],
+            },
             {
                 title: 'Responsibility Center Overview',
                 id: 'responsibility_center_overview_flag',
@@ -1351,36 +1616,6 @@ class ConfigureWidgetsComponent {
                 module: 'COMPLIANCE',
                 subWidgets: [],
             },
-            {
-                title: 'Workroom Updates',
-                id: 'workroom_alert_flag',
-                description: 'The Responsibility Workroom shows updates from the Responsibility Workrooms. A Responsibility Workroom exists for all responsibilities.',
-                widgetImage: ASSETS.workroomUpdatesWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Recent Activities',
-                id: 'recent_activity_flag',
-                description: 'This is a chronological view of the recent updates of responsibilities.',
-                widgetImage: ASSETS.recentActivitiesWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
-            {
-                title: 'Exception Summary',
-                id: 'exception_summary_flag',
-                description: 'Exceptions Summary show the number of responsibilities that are either not accepted, not completed or deleted.',
-                widgetImage: ASSETS.exceptionSummaryWidget,
-                value: false,
-                visibility: true,
-                module: 'COMPLIANCE',
-                subWidgets: [],
-            },
         ],
     };
     selectWidget(event, module, widgetId, subWidgetId) {
@@ -1715,7 +1950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class CheckSelectedItemsPipe {
     transform(id, selectedItems) {
         if (selectedItems) {
-            const selectedItem = selectedItems?.find((item) => item?.id === id);
+            const selectedItem = selectedItems?.find((item) => String(item?.id) === String(id));
             if (selectedItem) {
                 return true;
             }
@@ -1821,6 +2056,20 @@ class ProgramListComponent {
     ngOnChanges(changes) {
         if (changes['items'] || changes['selectedItems']) {
             this.paginateItems(this.items);
+            this.focusFirstProgramWithSelections();
+        }
+    }
+    focusFirstProgramWithSelections() {
+        if (!this.items?.length || !this.selectedItems) {
+            return;
+        }
+        const programId = Object.keys(this.selectedItems).find((key) => (this.selectedItems[key] ?? []).length > 0);
+        if (!programId) {
+            return;
+        }
+        const program = this.items.find((item) => String(item?.id) === String(programId));
+        if (program && String(this.activeProgram?.id) !== String(program?.id)) {
+            this.viewCategory(program);
         }
     }
     /** Fetch program list from API */
@@ -1853,7 +2102,7 @@ class ProgramListComponent {
             this.selectedItems[selectedObject].push(item);
         }
         else {
-            this.selectedItems[selectedObject] = this.selectedItems[this.activeProgram.id].filter((selected) => selected.id !== item.id);
+            this.selectedItems[selectedObject] = this.selectedItems[this.activeProgram.id].filter((selected) => String(selected?.id) !== String(item?.id));
         }
         this.itemsSelectedChange.emit(this.selectedItems);
     }
@@ -2859,13 +3108,13 @@ class CreateDashboardComponent {
     cdr;
     snackBar;
     popoverService;
-    configureWidgetsService;
     textCount;
     feature;
     activeSelector = '';
     disabled = false;
     mode = 'CREATE';
     dashboardId = '';
+    dashboardDetails = null; // for edit dashboard
     /** API dashboard object from createDashboard response (used when navigating after create). */
     createdDashboard = null;
     close = new EventEmitter();
@@ -2880,9 +3129,8 @@ class CreateDashboardComponent {
     usersList = [];
     vLoader = true;
     userListLoaded = false;
+    groupListLoaded = false;
     rcListLoaded = false;
-    complianceCategoriesListLoaded = false;
-    riskCategoryListLoaded = false;
     hideToDate = false;
     listDetails = {
         selectedUsersList: [],
@@ -2972,7 +3220,6 @@ class CreateDashboardComponent {
         'February, May, August, November',
         'March, June, September, December',
     ];
-    categoryListLoaded = false;
     showRiskWidgets = false;
     showComplianceWidgets = false;
     isManageRisk = false;
@@ -2995,7 +3242,6 @@ class CreateDashboardComponent {
         },
     };
     programListUrl = PROGRAM_LIST_API;
-    programSelections = {};
     fromDatePickerConfig = {
         min: this.getCurrentDate(),
     };
@@ -3010,19 +3256,30 @@ class CreateDashboardComponent {
     openedDatePicker = '';
     selectedPrograms = {};
     allProgamSelected = [];
-    constructor(createDashboardService, paginationService, cdr, snackBar, popoverService, configureWidgetsService, textCount) {
+    pendingEditRcIds = [];
+    pendingEditRcEntries = [];
+    editFormHydrated = false;
+    /** Tracks in-flight EDIT hydration HTTP calls; loader stays on until zero. */
+    editHydrationCount = 0;
+    constructor(createDashboardService, paginationService, cdr, snackBar, popoverService, textCount) {
         this.createDashboardService = createDashboardService;
         this.paginationService = paginationService;
         this.cdr = cdr;
         this.snackBar = snackBar;
         this.popoverService = popoverService;
-        this.configureWidgetsService = configureWidgetsService;
         this.textCount = textCount;
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         if (this.createdBy) {
             this.listDetails.nonRemovableUsersList.push(this.createdBy);
         }
+        if (this.mode === 'EDIT' &&
+            changes['dashboardDetails']?.currentValue &&
+            this.rcListLoaded &&
+            this.userListLoaded &&
+            this.groupListLoaded) {
+            this.hydrateEditForm();
+        }
     }
     onKeydownHandler(event) {
         this.close.emit({ mode: 'discard' });
@@ -3069,7 +3326,8 @@ class CreateDashboardComponent {
             }, 1);
         }
         if (type === 'responsibilityCategories' && event) {
-            this.programSelections = this.getProgramSelectionMap(this.dashboardForm.selectedResponsibilityCategories);
+            this.syncProgramSelectionMapFromForm();
+            this.ensureProgramSelectionMapForList();
         }
         this.activeSelector = event ? type : '';
     }
@@ -3077,13 +3335,9 @@ class CreateDashboardComponent {
         this.selectedPrograms = items;
         this.allProgamSelected = [].concat(...Object.values(items));
     }
-    activeDeselector() {
-        this.programSelections = this.getProgramSelectionMap(this.dashboardForm.selectedResponsibilityCategories);
-        this.activateSelector('', false);
-    }
     selectCategory() {
         this.dashboardForm.selectedResponsibilityCategories =
-            this.normalizeProgramCategories(this.allProgamSelected);
+            normalizeProgramCategories(this.allProgamSelected);
         this.applyResponsibilityCategoryWidgetFilters();
         this.activateSelector('', false);
     }
@@ -3100,21 +3354,92 @@ class CreateDashboardComponent {
             }
         });
     }
-    getProgramSelectionMap(categories) {
-        if (!categories || Array.isArray(categories)) {
-            return {};
+    syncProgramSelectionMapFromForm() {
+        if (hasProgramSelectionInMap(this.selectedPrograms)) {
+            return;
+        }
+        const flat = this.allProgamSelected?.length > 0
+            ? this.allProgamSelected
+            : this.dashboardForm.selectedResponsibilityCategories ?? [];
+        const fromForm = buildProgramSelectionMapFromCategories(flat, this.allComplianceCategories);
+        if (hasProgramSelectionInMap(fromForm)) {
+            this.applyProgramSelectionMap(fromForm);
         }
-        return { ...categories };
     }
-    flattenProgramSelectionMap(selections) {
-        return Object.keys(selections ?? {}).reduce((acc, key) => acc.concat(selections[key] ?? []), []);
+    hydrateProgramsFromDashboardData(data) {
+        if (!data) {
+            return false;
+        }
+        const programsRaw = data?.programs ?? data?.programId ?? data?.programIds;
+        if (Array.isArray(programsRaw) &&
+            programsRaw.length &&
+            typeof programsRaw[0] === 'object') {
+            const chips = programsRaw.map((p) => ({
+                id: p?.id ?? p?.programId,
+                category_id: p?.id ?? p?.programId,
+                name: p?.name ?? p?.item_name,
+                item_name: p?.name ?? p?.item_name,
+                programId: p?.id ?? p?.programId,
+            }));
+            this.allProgamSelected = normalizeProgramCategories(chips);
+            this.dashboardForm.selectedResponsibilityCategories = [
+                ...this.allProgamSelected,
+            ];
+            const map = buildProgramSelectionMapFromCategories(chips, this.allComplianceCategories);
+            if (Object.keys(map).length) {
+                this.selectedPrograms = map;
+            }
+            return true;
+        }
+        const program = data?.program ?? {};
+        const selectedMap = getSelectedProgramsMap(data);
+        if (selectedMap && hasProgramSelectionInMap(selectedMap)) {
+            this.applyProgramSelectionMap(selectedMap);
+            return true;
+        }
+        const allPrograms = program?.all_programs;
+        if (Array.isArray(allPrograms) && allPrograms.length) {
+            if (typeof allPrograms[0] === 'object') {
+                const map = buildProgramSelectionMapFromCategories(allPrograms, this.allComplianceCategories);
+                if (hasProgramSelectionInMap(map)) {
+                    this.applyProgramSelectionMap(map);
+                    return true;
+                }
+                this.allProgamSelected = normalizeProgramCategories(allPrograms);
+                this.dashboardForm.selectedResponsibilityCategories = [
+                    ...this.allProgamSelected,
+                ];
+                return this.allProgamSelected.length > 0;
+            }
+        }
+        const categoryIds = extractCategoryIdsFromDashboard(data);
+        if (categoryIds.length) {
+            const stubs = categoryIds.map((id) => ({
+                category_id: id,
+                id,
+                item_name: `Category ${id}`,
+            }));
+            this.allProgamSelected = normalizeProgramCategories(stubs);
+            this.dashboardForm.selectedResponsibilityCategories = [
+                ...this.allProgamSelected,
+            ];
+            return true;
+        }
+        return false;
     }
-    normalizeProgramCategories(categories) {
-        return categories.map((category) => ({
-            ...category,
-            category_id: category.category_id ?? category.id,
-            item_name: category.item_name ?? category.name,
-        }));
+    applyFlatProgramCategories(categories) {
+        if (!categories?.length) {
+            return;
+        }
+        this.allProgamSelected = normalizeProgramCategories(categories);
+        this.dashboardForm.selectedResponsibilityCategories = [
+            ...this.allProgamSelected,
+        ];
+        const map = buildProgramSelectionMapFromCategories(categories, this.allComplianceCategories);
+        if (hasProgramSelectionInMap(map)) {
+            this.selectedPrograms = map;
+        }
+        this.cdr.detectChanges();
     }
     applyResponsibilityCategoryWidgetFilters() {
         if (this.dashboardForm.selectedResponsibilityCenters.length !== 0) {
@@ -3213,7 +3538,6 @@ class CreateDashboardComponent {
             this.usersList = res;
             this.userListLoaded = true;
             if (this.mode === 'EDIT') {
-                this.vLoader = true;
             }
             else {
                 this.dashboardForm.selectedViewers = this.setList(this.usersList, [this.createdBy], 'member_id');
@@ -3226,9 +3550,8 @@ class CreateDashboardComponent {
         this.createDashboardService.getAllGroups().subscribe((res) => {
             this.totalgroups = res.total_items;
             this.groupList = res.data;
-            this.userListLoaded = true;
+            this.groupListLoaded = true;
             if (this.mode === 'EDIT') {
-                this.vLoader = true;
             }
             else {
                 this.dashboardForm.selectedGroup = this.setList(this.groupList, [this.createdBy], 'group_id');
@@ -3241,12 +3564,10 @@ class CreateDashboardComponent {
      * 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) {
+        // Category trees are no longer eagerly loaded here; these flags were never flipped and blocked EDIT indefinitely.
+        if (this.rcListLoaded && this.userListLoaded && this.groupListLoaded) {
             if (this.mode === 'EDIT') {
-                this.editDashboard();
+                this.hydrateEditForm();
             }
             else {
                 this.vLoader = false;
@@ -3368,11 +3689,16 @@ class CreateDashboardComponent {
     }
     getRCList() {
         this.createDashboardService.getResponsibilityCenterList().subscribe((res) => {
-            this.responsibilityCentersList = res;
+            this.responsibilityCentersList = this.normalizeRcList(res);
             this.rcListLoaded = true;
+            this.applyPendingResponsibilityCenters();
+            if (this.mode === 'EDIT') {
+                this.saveSelectedList('rc', this.dashboardDetails?.responsibilityCenters);
+            }
         }, (err) => {
             console.error(err);
             this.rcListLoaded = true;
+            this.applyPendingResponsibilityCenters();
         });
     }
     /**
@@ -3409,9 +3735,9 @@ class CreateDashboardComponent {
                 break;
             case 'responsibilityCategories':
                 this.dashboardForm.selectedResponsibilityCategories =
-                    this.normalizeProgramCategories(Array.isArray(selectedItems)
+                    normalizeProgramCategories(Array.isArray(selectedItems)
                         ? selectedItems
-                        : this.flattenProgramSelectionMap(selectedItems ?? {}));
+                        : flattenProgramSelectionMap(selectedItems ?? {}));
                 this.applyResponsibilityCategoryWidgetFilters();
                 break;
             case 'riskCategory':
@@ -3487,15 +3813,445 @@ class CreateDashboardComponent {
         }
     }
     setList(list, ids, key) {
+        return this.setListByIds(list, ids, [key]);
+    }
+    setListByIds(list, ids, keys) {
         const data = [];
-        ids.forEach((element) => {
-            const index = list.findIndex((listElement) => listElement[key] == element);
-            if (index !== -1) {
-                data.push(list[index]);
+        if (!Array.isArray(list) || !Array.isArray(ids)) {
+            return data;
+        }
+        ids.forEach((id) => {
+            const targetId = Number(id);
+            if (Number.isNaN(targetId)) {
+                return;
+            }
+            for (const key of keys) {
+                const index = list.findIndex((listElement) => Number(listElement?.[key]) === targetId);
+                if (index !== -1) {
+                    data.push(list[index]);
+                    break;
+                }
             }
         });
         return data;
     }
+    flattenRcTree(nodes) {
+        const flat = [];
+        const walk = (arr) => {
+            (arr ?? []).forEach((node) => {
+                if (!node || typeof node !== 'object') {
+                    return;
+                }
+                flat.push(node);
+                if (Array.isArray(node.children)) {
+                    walk(node.children);
+                }
+                if (Array.isArray(node.items)) {
+                    walk(node.items);
+                }
+            });
+        };
+        if (Array.isArray(nodes)) {
+            walk(nodes);
+            return flat.length ? flat : nodes;
+        }
+        if (Array.isArray(nodes?.data)) {
+            walk(nodes.data);
+            return flat;
+        }
+        return [];
+    }
+    normalizeRcList(list) {
+        const items = this.flattenRcTree(list);
+        return items.map((rc) => ({
+            ...rc,
+            rcid: rc?.rcid ?? rc?.rc_id ?? rc?.item_id,
+            item_id: rc?.item_id ?? rc?.rc_id ?? rc?.rcid,
+            item_name: rc?.item_name ??
+                rc?.item_name_string ??
+                (Array.isArray(rc?.rc_name) ? rc.rc_name.join(' < ') : rc?.rc_name) ??
+                '',
+        }));
+    }
+    resolveRcFromTree(tree, ids) {
+        if (!ids.length || !tree.length) {
+            return [];
+        }
+        const selected = [];
+        const seen = new Set();
+        ids.forEach((id) => {
+            const targetId = Number(id);
+            const match = tree.find((rc) => Number(rc?.item_id) === targetId ||
+                Number(rc?.rc_id) === targetId ||
+                Number(rc?.rcid) === targetId ||
+                Number(rc?.id) === targetId ||
+                rc?.item_child_ids?.some((childId) => Number(childId) === targetId) ||
+                rc?.item_parent_ids?.some((parentId) => Number(parentId) === targetId));
+            if (!match) {
+                return;
+            }
+            const key = Number(match?.item_id ?? match?.rc_id ?? match?.rcid ?? id);
+            if (!seen.has(key)) {
+                seen.add(key);
+                selected.push(match);
+            }
+        });
+        return selected;
+    }
+    applyPreresolvedRcEntries() {
+        if (!this.pendingEditRcEntries?.length) {
+            return false;
+        }
+        const tree = this.responsibilityCentersList ?? [];
+        const selected = this.pendingEditRcEntries.map((entry) => {
+            const rcid = Number(entry?.rcid ?? entry?.rc_id ?? entry?.item_id);
+            const fromTree = tree.find((rc) => Number(rc?.item_id) === rcid) ??
+                tree.find((rc) => Number(rc?.rcid) === rcid) ??
+                tree.find((rc) => Number(rc?.rc_id) === rcid);
+            return fromTree ? { ...fromTree } : { ...entry };
+        });
+        this.dashboardForm.selectedResponsibilityCenters = selected;
+        this.pendingEditRcIds = selected.map((rc) => Number(rc?.rcid ?? rc?.rc_id ?? rc?.item_id));
+        return true;
+    }
+    applyPendingResponsibilityCenters() {
+        if (this.applyPreresolvedRcEntries()) {
+            this.cdr.detectChanges();
+            return;
+        }
+        if (!this.rcListLoaded || !this.pendingEditRcIds.length) {
+            return;
+        }
+        let selected = this.setListByIds(this.responsibilityCentersList, this.pendingEditRcIds, ['item_id', 'rcid', 'rc_id', 'id']);
+        if (selected.length < this.pendingEditRcIds.length) {
+            selected = this.resolveRcFromTree(this.responsibilityCentersList, this.pendingEditRcIds);
+        }
+        if (!selected.length && this.pendingEditRcIds.length) {
+            selected = this.pendingEditRcIds.map((id) => ({
+                item_id: id,
+                rc_id: id,
+                rcid: id,
+                item_name: `Responsibility Center ${id}`,
+            }));
+        }
+        this.dashboardForm.selectedResponsibilityCenters = selected;
+        this.cdr.detectChanges();
+    }
+    beginEditHydration() {
+        if (this.mode !== 'EDIT') {
+            return;
+        }
+        this.editHydrationCount++;
+        this.vLoader = true;
+    }
+    finishEditHydration() {
+        if (this.mode !== 'EDIT') {
+            return;
+        }
+        this.editHydrationCount = Math.max(0, this.editHydrationCount - 1);
+        if (this.editHydrationCount === 0) {
+            this.vLoader = false;
+            this.cdr.detectChanges();
+        }
+    }
+    tryCompleteEditHydration() {
+        if (this.mode === 'EDIT' && this.editHydrationCount === 0) {
+            this.vLoader = false;
+            this.cdr.detectChanges();
+        }
+    }
+    wrapEditRequest(request$, onNext) {
+        if (this.mode === 'EDIT') {
+            this.beginEditHydration();
+        }
+        request$
+            .pipe(finalize(() => this.finishEditHydration()))
+            .subscribe({
+            next: onNext,
+            error: (err) => console.error(err),
+        });
+    }
+    loadCustomDashboardDetailForEdit(recordId, cdid) {
+        const applyResponse = (res) => {
+            if (!res) {
+                return;
+            }
+            const payload = res?.data ?? res;
+            const detail = payload?.dashboard ?? payload;
+            this.mergeEditDashboardDetails(detail);
+            this.cdr.detectChanges();
+        };
+        const fetchDetail$ = (id) => this.createDashboardService.fetchCustomDashboardById(id);
+        let request$ = null;
+        if (recordId != null && recordId !== '') {
+            request$ = fetchDetail$(recordId).pipe(catchError(() => cdid && String(cdid) !== String(recordId)
+                ? fetchDetail$(cdid)
+                : of(null)));
+        }
+        else if (cdid) {
+            request$ = fetchDetail$(cdid).pipe(catchError(() => of(null)));
+        }
+        if (!request$) {
+            return;
+        }
+        this.wrapEditRequest(request$, applyResponse);
+    }
+    mergeEditDashboardDetails(detail) {
+        if (!detail) {
+            return;
+        }
+        this.patchDashboardMetaFromDetail(detail);
+        this.syncProgramsForEdit(detail);
+    }
+    patchDashboardMetaFromDetail(detail) {
+        if (!detail) {
+            return;
+        }
+        if (detail.name) {
+            this.dashboardForm.dashboardName = detail.name;
+        }
+        if (detail.description != null) {
+            const descriptionText = typeof detail.description === 'string'
+                ? detail.description
+                : detail.description?.[0]?.content ?? '';
+            if (descriptionText) {
+                this.dashboardForm.dashboardDescriptionText = descriptionText;
+            }
+        }
+        const rcIds = extractRcIdsFromDashboard(detail);
+        if (rcIds.length) {
+            this.pendingEditRcIds = rcIds;
+            this.applyPendingResponsibilityCenters();
+        }
+    }
+    syncProgramsForEdit(data) {
+        if (!data) {
+            return;
+        }
+        this.hydrateProgramsFromDashboardData(data);
+        this.applyProgramsFromDashboardIds(extractProgramIdsFromDashboard(data), extractCategoryIdsFromDashboard(data), getSelectedProgramsMap(data), data?.program);
+        const categoryIds = extractCategoryIdsFromDashboard(data);
+        if (categoryIds.length) {
+            const fromCompliance = this.setList(this.allComplianceCategories, categoryIds, 'category_id');
+            if (fromCompliance.length && !this.allProgamSelected.length) {
+                this.applyFlatProgramCategories(fromCompliance);
+            }
+        }
+        if (!this.allProgamSelected.length &&
+            this.dashboardForm.selectedResponsibilityCategories.length) {
+            this.allProgamSelected = [
+                ...this.dashboardForm.selectedResponsibilityCategories,
+            ];
+        }
+        this.syncProgramSelectionMapFromForm();
+    }
+    applyProgramsFromDashboardIds(programIds, categoryIds, selectedProgramsMap, programPayload) {
+        if (categoryIds.length) {
+            this.loadProgramsForEdit(programIds, categoryIds, selectedProgramsMap, programPayload);
+            return;
+        }
+        if (programIds.length) {
+            this.resolveProgramIdsForEdit(programIds);
+        }
+    }
+    ensureProgramSelectionMapForList() {
+        if (hasProgramSelectionInMap(this.selectedPrograms)) {
+            return;
+        }
+        const categoryIds = normalizeIdArray(this.dashboardForm.selectedResponsibilityCategories?.map((c) => c?.category_id ?? c?.id) ?? []);
+        const programIds = [
+            ...new Set((this.dashboardForm.selectedResponsibilityCategories ?? []).map((c) => Number(c?.programId ?? c?.program_id ?? c?.parentId))),
+        ].filter((id) => !Number.isNaN(id));
+        if (programIds.length || categoryIds.length) {
+            this.loadProgramsForEdit(programIds, categoryIds);
+        }
+    }
+    applyProgramSelectionMap(map) {
+        const normalized = normalizeProgramSelectionMap(map);
+        if (!normalized) {
+            return;
+        }
+        this.selectedPrograms = normalized;
+        this.allProgamSelected = flattenProgramSelectionMap(this.selectedPrograms);
+        this.dashboardForm.selectedResponsibilityCategories =
+            normalizeProgramCategories(this.allProgamSelected);
+        this.cdr.detectChanges();
+    }
+    categoryMatchesId(cat, categoryIdSet) {
+        const id = Number(cat?.id);
+        const categoryId = Number(cat?.category_id);
+        return ((!Number.isNaN(id) && categoryIdSet.has(id)) ||
+            (!Number.isNaN(categoryId) && categoryIdSet.has(categoryId)));
+    }
+    loadProgramsForEdit(programIds, categoryIds = [], selectedProgramsMap, programPayload) {
+        if (selectedProgramsMap &&
+            typeof selectedProgramsMap === 'object' &&
+            !Array.isArray(selectedProgramsMap) &&
+            hasProgramSelectionInMap(selectedProgramsMap)) {
+            this.applyProgramSelectionMap(selectedProgramsMap);
+            return;
+        }
+        if (programPayload &&
+            this.hydrateProgramsFromDashboardData({ program: programPayload })) {
+            return;
+        }
+        if (!programIds.length && !categoryIds.length) {
+            return;
+        }
+        const completeProgramHydration = () => this.finishEditHydration();
+        if (this.mode === 'EDIT') {
+            this.beginEditHydration();
+        }
+        this.createDashboardService.getSailsProgramList().subscribe({
+            next: (res) => {
+                const programs = parseSailsProgramList(res);
+                const relevantPrograms = programIds.length > 0
+                    ? programs.filter((p) => programIds.includes(Number(p?.id)))
+                    : programs;
+                if (!categoryIds.length) {
+                    if (programIds.length) {
+                        this.resolveProgramIdsForEdit(programIds, programs);
+                    }
+                    completeProgramHydration();
+                    return;
+                }
+                const categoryIdSet = new Set(categoryIds);
+                const programsToFetch = relevantPrograms.length > 0 ? relevantPrograms : programs;
+                if (!programsToFetch.length) {
+                    completeProgramHydration();
+                    return;
+                }
+                const categoryRequests = programsToFetch.map((program) => this.createDashboardService.getProgramCategories(program.id).pipe(map((catRes) => ({
+                    program,
+                    categories: catRes?.data?.categories ?? catRes?.categories ?? [],
+                }))));
+                forkJoin(categoryRequests)
+                    .pipe(finalize(() => completeProgramHydration()))
+                    .subscribe({
+                    next: (rawResults) => {
+                        const results = rawResults;
+                        const map = {};
+                        results.forEach(({ program, categories }) => {
+                            const selected = (categories ?? []).filter((cat) => this.categoryMatchesId(cat, categoryIdSet));
+                            if (selected.length) {
+                                map[String(program.id)] = selected;
+                            }
+                        });
+                        if (hasProgramSelectionInMap(map)) {
+                            this.applyProgramSelectionMap(map);
+                        }
+                        else if (this.allProgamSelected.length) {
+                            this.syncProgramSelectionMapFromForm();
+                        }
+                    },
+                    error: (err) => console.error(err),
+                });
+            },
+            error: (err) => {
+                console.error(err);
+                completeProgramHydration();
+            },
+        });
+    }
+    /** Custom dashboards often store program ids only — resolve names for form chips. */
+    resolveProgramIdsForEdit(programIds, programsFromList) {
+        if (!programIds.length) {
+            return;
+        }
+        const apply = (programs) => {
+            const matched = programs.filter((p) => programIds.includes(Number(p?.id)));
+            if (!matched.length) {
+                return;
+            }
+            const chips = matched.map((p) => ({
+                id: p.id,
+                category_id: p.id,
+                name: p.name,
+                item_name: p.name,
+                programId: p.id,
+            }));
+            this.allProgamSelected = normalizeProgramCategories(chips);
+            this.dashboardForm.selectedResponsibilityCategories = [
+                ...this.allProgamSelected,
+            ];
+            const map = {};
+            matched.forEach((p) => {
+                map[String(p.id)] = [];
+            });
+            this.selectedPrograms = map;
+            this.cdr.detectChanges();
+        };
+        if (programsFromList?.length) {
+            apply(programsFromList);
+            return;
+        }
+        if (this.mode === 'EDIT') {
+            this.beginEditHydration();
+        }
+        this.createDashboardService
+            .getSailsProgramList()
+            .pipe(finalize(() => this.finishEditHydration()))
+            .subscribe({
+            next: (res) => {
+                apply(parseSailsProgramList(res));
+            },
+            error: (err) => console.error(err),
+        });
+    }
+    buildEditDashboardData() {
+        const row = this.dashboardDetails ?? {};
+        const core = row?.dashboard_details ?? row?.dashboard ?? row;
+        const programSource = core?.programs ??
+            core?.programId ??
+            row?.programs ??
+            row?.programId ??
+            core?.program?.all_programs;
+        const rcSource = core?.responsibilityCenters ??
+            core?.responsibilityCenterId ??
+            core?.responsibility_center ??
+            core?.responsibility_centers ??
+            core?.rcs ??
+            row?.responsibilityCenters ??
+            row?.responsibility_center;
+        return {
+            ...row,
+            ...core,
+            cdid: core?.cdid ?? row?.cdid,
+            dashboard_name: core?.name ?? row?.dashboard_name,
+            name: core?.name ?? row?.dashboard_name,
+            description: core?.description ?? row?.description,
+            viewers: core?.viewers ?? row?.viewers,
+            visible_to_users: core?.visible_to_users ?? row?.visible_to_users,
+            visible_to_groups: core?.visible_to_groups ?? row?.visible_to_groups,
+            programs: programSource,
+            programId: extractProgramIdsFromDashboard({
+                programs: programSource,
+                program: core?.program ?? row?.program,
+            }),
+            responsibility_category: core?.responsibility_category ??
+                row?.responsibility_category ??
+                core?.responsibilityCategory ??
+                [],
+            rcId: core.rcId,
+            selectedRcEntries: row?.selectedRcEntries ??
+                core?.selectedRcEntries ??
+                [],
+            responsibilityCenters: rcSource,
+            responsibility_center: rcSource,
+            responsibilityCenterId: core.rcId,
+            program: core?.program ?? row?.program,
+            timeframe: core?.timeframe ??
+                (row?.time_frame_from || row?.time_frame_to
+                    ? { from: row?.time_frame_from, to: row?.time_frame_to }
+                    : undefined),
+            time_frame_from: core?.timeframe?.from ??
+                core?.timeframe?.start_date ??
+                row?.time_frame_from,
+            time_frame_to: core?.timeframe?.to ?? core?.timeframe?.end_date ?? row?.time_frame_to,
+            created_by: core?.createdBy ?? core?.created_by ?? row?.created_by,
+            createdBy: core?.createdBy ?? core?.created_by ?? row?.createdBy,
+        };
+    }
     submitted = false;
     /**
      * Returns id's from a particular list elements
@@ -3536,7 +4292,7 @@ class CreateDashboardComponent {
         return true;
     }
     /**
-     * Makes an api call to create a policy
+     * Makes an api call to create a dashboad
      * @param dashboard contains dashboardForm data
      */
     submitDashboard() {
@@ -3559,7 +4315,7 @@ class CreateDashboardComponent {
             next: (res) => {
                 this.vLoader = false;
                 this.isSmiley = true;
-                this.smileyMessage = 'The dashboard has been created.';
+                this.smileyMessage = this.mode === 'EDIT' ? 'The dashboard has been updated.' : 'The dashboard has been created.';
                 setTimeout(() => {
                     this.isSmiley = false;
                     const cdid = this.getCreatedDashboardCdid();
@@ -3567,6 +4323,8 @@ class CreateDashboardComponent {
                         mode: 'created',
                         id: cdid,
                         cdid,
+                        dashboardBridgeId: this.createdDashboard?.dashboard_bridge_id ??
+                            this.createdDashboard?.dashboardBridgeId,
                         dashboard: this.createdDashboard,
                     });
                 }, 3000);
@@ -3617,7 +4375,11 @@ class CreateDashboardComponent {
         this.saveDashboard(createDashboardPayload);
     }
     saveDashboard(payload) {
-        this.createDashboardService.createDashboard(payload).subscribe({
+        let apiCall = this.createDashboardService.createDashboard(payload);
+        if (this.mode === 'EDIT') {
+            apiCall = this.createDashboardService.updateDashboard(payload, this.dashboardDetails?.recordId);
+        }
+        apiCall.subscribe({
             next: (res) => {
                 this.createdDashboard = res?.data?.dashboard ?? null;
                 this.dashboardId = this.getCreatedDashboardCdid();
@@ -3638,63 +4400,134 @@ class CreateDashboardComponent {
         const cdid = dash?.cddid ??
             dash?.cdid ??
             dash?.cdId ??
+            dash?.dashboard_bridge_id ??
+            dash?.dashboardBridgeId ??
+            dash?.dashboard?.dashboard_bridge_id ??
             this.dashboardId;
         return cdid != null && cdid !== '' ? String(cdid) : '';
     }
-    editDashboard() {
-        if (this.dashboardId) {
-            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
-                        : [];
-                this.populateDashboardForm(data);
-            }, (error) => {
-                console.error(error);
-            });
+    hydrateEditForm() {
+        if (this.editFormHydrated) {
+            return;
+        }
+        this.editFormHydrated = true;
+        this.editDashboard();
+    }
+    applyWidgetsFromGetWidgetsResponse(widgets) {
+        const savedWidgets = filterActiveWidgets(widgets?.widgetArr ?? []);
+        const catalogWidgets = widgets?.allWidgetsArray?.length
+            ? widgets.allWidgetsArray
+            : savedWidgets;
+        this.dashboardForm.configureWidget = savedWidgets;
+        this.selectedWidgets = [...savedWidgets];
+        this.displayedWidgets = [...catalogWidgets];
+    }
+    /** EDIT mode only: GET getWidgets?dashboardId={cdid} */
+    loadEditModeWidgets(cdid) {
+        if (this.mode !== 'EDIT' || !cdid) {
+            return;
         }
+        this.wrapEditRequest(this.createDashboardService.fetchCustomDashboardWidgetDetails(cdid), (widgets) => {
+            this.applyWidgetsFromGetWidgetsResponse(widgets);
+            this.cdr.detectChanges();
+        });
+    }
+    editDashboard() {
+        this.vLoader = true;
+        if (this.mode === 'EDIT') {
+            this.editHydrationCount = 0;
+        }
+        const data = this.buildEditDashboardData();
+        this.pendingEditRcEntries =
+            data?.selectedRcEntries ??
+                this.dashboardDetails?.selectedRcEntries ??
+                [];
+        const editCdid = getEditDashboardCdid(data, this.dashboardDetails, this.dashboardId);
+        this.listDetails.nonRemovableUsersList = [
+            data?.createdBy ?? data?.created_by,
+        ].filter((x) => x != null);
+        this.populateDashboardForm(data);
+        this.loadCustomDashboardDetailForEdit(data?.recordId ?? data?.id, editCdid || data?.cdid);
+        if (this.mode === 'EDIT' && editCdid) {
+            this.loadEditModeWidgets(editCdid);
+        }
+        this.tryCompleteEditHydration();
     }
     populateDashboardForm(data) {
         try {
-            (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'));
+            const descriptionBlock = Array.isArray(data?.description)
+                ? data.description[0]
+                : null;
+            const descriptionText = descriptionBlock?.content ??
+                (typeof data?.description === 'string' ? data.description : '') ??
+                data?.dashboardDescriptionText ??
+                '';
+            const visibleUsers = data?.visible_to_users ?? data?.viewers?.userId ?? [];
+            const visibleUserIds = (visibleUsers ?? []).map((user) => typeof user === 'object'
+                ? user?.member_id ?? user?.id ?? user?.uid
+                : user);
+            const visibleGroups = data?.visible_to_groups ?? data?.viewers?.userGroupId ?? [];
+            const visibleGroupIds = (visibleGroups ?? []).map((group) => typeof group === 'object' ? group?.group_id ?? group?.id ?? group?.ugid : group);
+            this.pendingEditRcEntries =
+                data?.selectedRcEntries ??
+                    this.dashboardDetails?.selectedRcEntries ??
+                    [];
+            this.pendingEditRcIds = extractRcIdsFromDashboard(data);
+            this.applyPreresolvedRcEntries();
+            const riskCategories = data?.risk_category ?? [];
+            const riskCategoryIds = (riskCategories ?? []).map((risk) => typeof risk === 'object' ? risk?.category_id ?? risk?.id : risk);
+            const startDate = data?.timeframe?.start_date ??
+                data?.timeframe?.from ??
+                data?.time_frame_from;
+            const endDate = data?.timeframe?.end_date ??
+                data?.timeframe?.to ??
+                data?.time_frame_to;
+            this.dashboardForm.dashboardName =
+                data?.dashboard_name ?? data?.name ?? '';
+            this.dashboardForm.dashboardDescriptionText = descriptionText;
+            this.dashboardForm.selectedViewers = this.setListByIds(this.usersList, visibleUserIds, ['member_id', 'uid', 'id']);
             this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-            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.dashboardForm.selectedGroup = this.setListByIds(this.groupList, visibleGroupIds, ['group_id', 'ugid', '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.applyPendingResponsibilityCenters();
+            this.syncProgramsForEdit(data);
+            this.dashboardForm.selectedRiskCategories =
+                this.setList(this.allRiskCategories, riskCategoryIds, '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)
+            this.dashboardForm.selectedFromDate = startDate
+                ? new Date(startDate)
                 : undefined;
-            this.dashboardForm.selectedToDate = data?.timeframe?.end_date
-                ? new Date(data?.timeframe?.end_date)
+            this.dashboardForm.selectedToDate = endDate
+                ? new Date(endDate)
                 : 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)] : [];
-            let minToDate = this.setToDate(data?.timeframe?.start_date);
-            this.toDatePickerConfig = { min: minToDate };
+            if (this.mode !== 'EDIT') {
+                this.vLoader = false;
+                const widgetDetailsRaw = data?.widget_details ?? data?.widgets ?? [];
+                const widgetDetails = Array.isArray(widgetDetailsRaw)
+                    ? widgetDetailsRaw
+                    : [];
+                const allWidgetsRaw = data?.all_widgets ?? widgetDetails;
+                const allWidgets = Array.isArray(allWidgetsRaw) ? allWidgetsRaw : [];
+                this.dashboardForm.configureWidget = widgetDetails;
+                this.selectedWidgets =
+                    widgetDetails.length > 0 ? [...new Set(widgetDetails)] : [];
+                this.displayedWidgets =
+                    allWidgets.length > 0 ? [...new Set(allWidgets)] : [];
+            }
+            if (startDate) {
+                const minToDate = this.setToDate(startDate);
+                this.toDatePickerConfig = { min: minToDate };
+            }
             this.hideToDate = true;
             setTimeout(() => {
                 this.hideToDate = false;
             }, 20);
+            this.cdr.detectChanges();
         }
         catch (error) {
             console.error('populate dashboard error =>', error);
+            this.vLoader = false;
         }
     }
     ngAfterViewChecked() {
@@ -3759,18 +4592,20 @@ class CreateDashboardComponent {
             this.datePickerOverlay = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: ConfigureWidgetsService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"></app-user-list>\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\">\n      </app-responsibility-center>\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        (close)=\"activateSelector('', false)\">\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\n              <button\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                {{ allProgamSelected.length }}\n              </button>\n              <span class=\"selected-text\">\n                Program\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                Selected</span>\n            </ng-container>\n          </div>\n          <div class=\"right-side vx-d-flex\">\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n              Next <i class=\"icons\">&#xe91e;</i>\n            </button>\n          </div>\n        </div>\n      </app-list-container>\n\n    </div>\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div class=\"vx-input-group\">\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\n                    dashboardForm.dashboardName.length }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \">\n                  {{\n                  dashboardForm.dashboardName.length > 30\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\n                  : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\n                    250 -\n                    (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \">\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dashboard Display Criteria  -->\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n            Dashboard Display Criteria\n          </span>\n          <app-information-block></app-information-block>\n\n          <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \">\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                        }}</span>\n                      <button *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \">&</span>\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                {{ data.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\n                    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\"\n                    (click)=\"activateSelector('whoCanView', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  CENTER(S)</label>\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                    <button *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                      .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\n                    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\"\n                    (click)=\"activateSelector('rcList', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  allProgamSelected?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <div *ngIf=\"\n                    allProgamSelected?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    allProgamSelected?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rCategory of allProgamSelected?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                      }}</span>\n                    <button *ngIf=\"\n                        allProgamSelected\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                      +{{\n                      allProgamSelected?.slice(\n                      1\n                      ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rCategory of allProgamSelected\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                {{ rCategory?.name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    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\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Risk Category -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\n            *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'riskCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\n                  activeSelector === 'riskCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\n                  activeSelector !== 'riskCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\" *ngIf=\"isManageRisk\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  CATEGORIES</label>\n                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Risk Categories that you would like displayed<br />in\n                    the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('riskCategory', riskCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      riskCategory.category_name }}</span>\n                    <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"riskList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedRiskCategories?.slice(1).length\n                      }}\n                    </button>\n\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let riskCategory of dashboardForm?.selectedRiskCategories\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\"\n                                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('riskCategory', riskCategory)\">&#xe90d;</i>\n                                {{ riskCategory?.category_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'riskCategories'\"\n                    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\"\n                    (click)=\"activateSelector('riskCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <!-- Timeframe -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label>\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly />\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly />\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                </div>\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \">\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  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\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    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\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n        <div class=\"button-block\">\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\">\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div class=\"global-confirmation-alert\" *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \n        \">\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\n\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::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 .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:#fff;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:#fff;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 (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:#fff;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,#fff0,#ffffffbf 22%,#fff);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:#fff;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:#fff;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\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: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i18.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { 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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: TextCountPipe, name: "textCount" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateDashboardComponent, deps: [{ token: CreateDashboardService }, { token: PaginationService }, { token: i0.ChangeDetectorRef }, { token: SnackBarService }, { token: PopoverService }, { token: TextCountPipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateDashboardComponent, selector: "app-create-dashboard", inputs: { feature: "feature", mode: "mode", dashboardId: "dashboardId", dashboardDetails: "dashboardDetails", createdBy: "createdBy", configureWidget: "configureWidget" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)", "document:click": "documentClick($event)" } }, providers: [TextCountPipe], viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }, { propertyName: "fromDatePickerPopup", first: true, predicate: ["fromDatePicker"], descendants: true, read: ElementRef }, { propertyName: "toDatePickerPopup", first: true, predicate: ["toDatePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"></app-user-list>\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\">\n      </app-responsibility-center>\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        (close)=\"activateSelector('', false)\">\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\n              <button\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                {{ allProgamSelected.length }}\n              </button>\n              <span class=\"selected-text\">\n                Program\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                Selected</span>\n            </ng-container>\n          </div>\n          <div class=\"right-side vx-d-flex\">\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n              Next <i class=\"icons\">&#xe91e;</i>\n            </button>\n          </div>\n        </div>\n      </app-list-container>\n\n    </div>\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div class=\"vx-input-group\">\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\n                    dashboardForm.dashboardName.length }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \">\n                  {{\n                  dashboardForm.dashboardName.length > 30\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\n                  : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\n                    250 -\n                    (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \">\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dashboard Display Criteria  -->\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n            Dashboard Display Criteria\n          </span>\n          <app-information-block></app-information-block>\n\n          <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \">\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                        }}</span>\n                      <button *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \">&</span>\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                {{ data.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\n                    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\"\n                    (click)=\"activateSelector('whoCanView', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  CENTER(S)</label>\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                    <button *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                      .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\n                    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\"\n                    (click)=\"activateSelector('rcList', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  allProgamSelected?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <div *ngIf=\"\n                    allProgamSelected?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    allProgamSelected?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rCategory of allProgamSelected?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                      }}</span>\n                    <button *ngIf=\"\n                        allProgamSelected\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                      +{{\n                      allProgamSelected?.slice(\n                      1\n                      ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rCategory of allProgamSelected\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                {{ rCategory?.name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    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\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <!-- Timeframe -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label>\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly />\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly />\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                </div>\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \">\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  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\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    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\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n        <div class=\"button-block\">\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\">\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div class=\"global-confirmation-alert\" *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \n        \">\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\n\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::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 .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:#fff;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:#fff;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 (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:#fff;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,#fff0,#ffffffbf 22%,#fff);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:#fff;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:#fff;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\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: i7.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i17.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "component", type: ProgramListComponent, selector: "app-program-list", inputs: ["items", "selectedItems", "url"], outputs: ["itemSelected", "itemDeselected", "itemsSelectedChange"] }, { kind: "component", type: ListContainerComponent, selector: "app-list-container", inputs: ["heading"], outputs: ["close"] }, { kind: "component", type: InformationBlockComponent, selector: "app-information-block" }, { 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: "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: "16.2.12", ngImport: i0, type: CreateDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"></app-user-list>\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\">\n      </app-responsibility-center>\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        (close)=\"activateSelector('', false)\">\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\n              <button\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                {{ allProgamSelected.length }}\n              </button>\n              <span class=\"selected-text\">\n                Program\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                Selected</span>\n            </ng-container>\n          </div>\n          <div class=\"right-side vx-d-flex\">\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n              Next <i class=\"icons\">&#xe91e;</i>\n            </button>\n          </div>\n        </div>\n      </app-list-container>\n\n    </div>\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div class=\"vx-input-group\">\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\n                    dashboardForm.dashboardName.length }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \">\n                  {{\n                  dashboardForm.dashboardName.length > 30\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\n                  : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\n                    250 -\n                    (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \">\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dashboard Display Criteria  -->\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n            Dashboard Display Criteria\n          </span>\n          <app-information-block></app-information-block>\n\n          <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \">\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                        }}</span>\n                      <button *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \">&</span>\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                {{ data.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\n                    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\"\n                    (click)=\"activateSelector('whoCanView', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  CENTER(S)</label>\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                    <button *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                      .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\n                    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\"\n                    (click)=\"activateSelector('rcList', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  allProgamSelected?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <div *ngIf=\"\n                    allProgamSelected?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    allProgamSelected?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rCategory of allProgamSelected?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                      }}</span>\n                    <button *ngIf=\"\n                        allProgamSelected\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                      +{{\n                      allProgamSelected?.slice(\n                      1\n                      ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rCategory of allProgamSelected\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                {{ rCategory?.name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    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\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Risk Category -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\n            *ngIf=\"showRiskCategory && isManageRisk\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'riskCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length == 0 ||\n                  activeSelector === 'riskCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedRiskCategories?.length > 0 &&\n                  activeSelector !== 'riskCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\" *ngIf=\"isManageRisk\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  CATEGORIES</label>\n                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Risk Categories that you would like displayed<br />in\n                    the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let riskCategory of dashboardForm?.selectedRiskCategories?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('riskCategory', riskCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"riskCategory.category_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      riskCategory.category_name }}</span>\n                    <button *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"riskList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedRiskCategories?.slice(1).length\n                      }}\n                    </button>\n\n                    <app-popover #riskList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let riskCategory of dashboardForm?.selectedRiskCategories\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"riskCategory?.category_name\" placement=\"bottom-left\"\n                                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('riskCategory', riskCategory)\">&#xe90d;</i>\n                                {{ riskCategory?.category_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'riskCategories'\"\n                    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\"\n                    (click)=\"activateSelector('riskCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <!-- Timeframe -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label>\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly />\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly />\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                </div>\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \">\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  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\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    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\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n        <div class=\"button-block\">\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\">\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div class=\"global-confirmation-alert\" *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \n        \">\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\n\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::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 .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:#fff;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:#fff;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 (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:#fff;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,#fff0,#ffffffbf 22%,#fff);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:#fff;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:#fff;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"] }]
-        }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: ConfigureWidgetsService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
+            args: [{ selector: 'app-create-dashboard', providers: [TextCountPipe], template: "<app-snack-bar></app-snack-bar>\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\n  <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\n    <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector !== 'name'\">\n      <app-user-list *ngIf=\"activeSelector === 'whoCanView'\"\n        (saveSelectedUsers)=\"saveSelectedList('whoCanView', $event)\" (closeUserList)=\"activateSelector('', false)\"\n        [totalPages]=\"totalPages\" [totalList]=\"totalList\" [listDetails]=\"listDetails\" [totalgroupscount]=\"totalgroups\"\n        [feature]=\"feature\"></app-user-list>\n      <app-responsibility-center *ngIf=\"activeSelector === 'rcList'\"\n        [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\n        [selectedResponsibilityCenters]=\"\n          dashboardForm.selectedResponsibilityCenters\n        \" [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n        (closeRcList)=\"activateSelector('', false)\">\n      </app-responsibility-center>\n      <!-- <app-categories *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\n        [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\n        (saveSelectedCategory)=\"\n          saveSelectedList('responsibilityCategories', $event)\n        \" (closeCategoriesList)=\"activateSelector('', false)\"></app-categories> -->\n      <app-list-container list *ngIf=\"activeSelector === 'responsibilityCategories'\"\n        (close)=\"activateSelector('', false)\">\n        <app-program-list body (itemsSelectedChange)=\"onProgramSelectionChange($event)\"\n          [selectedItems]=\"selectedPrograms\" [url]=\"programListUrl\"></app-program-list>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\" footer>\n          <div class=\"left-side vx-fs-12 vx-d-flex\">\n            <ng-container *ngIf=\"allProgamSelected?.length > 0\">\n              <button\n                class=\"selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\">\n                {{ allProgamSelected.length }}\n              </button>\n              <span class=\"selected-text\">\n                Program\n                {{ allProgamSelected.length > 1 ? \"Categories\" : \"Category\" }}\n                Selected</span>\n            </ng-container>\n          </div>\n          <div class=\"right-side vx-d-flex\">\n            <button class=\"cancelBtn\" (click)=\"activateSelector('', false)\">Cancel</button>\n            <button class=\"nextBtn\" (click)=\"activateSelector('', false);\">\n              Next <i class=\"icons\">&#xe91e;</i>\n            </button>\n          </div>\n        </div>\n      </app-list-container>\n\n    </div>\n    <div class=\"vx-dialog-container side-dialog\" [class.tablet-width]=\"activeSelector && activeSelector !== 'name'\">\n      <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\n\n      <div class=\"form-group\" [class.disabled]=\"disabled\">\n        <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\"\n          [class.hidden-scroll]=\"popoverService.stopScroll\">\n          <!-- Dashboard Name -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardIcon\" *ngIf=\"\n                  !dashboardForm.dashboardName || activeSelector === 'name'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  Name\n                  <span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div class=\"vx-input-group\">\n                  <input class=\"textField\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n                    [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\n                    (focusin)=\"activateSelector('name', true)\" (focusout)=\"activateSelector('name', false)\" />\n\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{ 30 -\n                    dashboardForm.dashboardName.length }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardName?.length > 30 ||\n                      !dashboardForm?.dashboardName)\n                  \">\n                  {{\n                  dashboardForm.dashboardName.length > 30\n                  ? \"You have exceeded the maximum character limit of 30 characters.\"\n                  : \"Please enter a name for this Dashboard.\"\n                  }}\n                </p>\n\n                <div class=\"vx-input-group vx-mt-2\">\n                  <vcomply-editor [editorConfig]=\"dashboardDescription\"\n                    [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></vcomply-editor>\n                  <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{\n                    250 -\n                    (dashboardForm?.dashboardDescriptionText | textCount)\n                    }}</span>\n                </div>\n\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    (dashboardForm?.dashboardDescriptionText | textCount) > 250\n                  \">\n                  You have exceeded the maximum character limit of 250\n                  characters.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Dashboard Display Criteria  -->\n          <span class=\"head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4\">\n            Dashboard Display Criteria\n          </span>\n          <app-information-block></app-information-block>\n\n          <!-- Who -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'whoCanView' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img [ngSrc]=\"ASSETS.dashBoardUsersIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length == 0 ||\n                  activeSelector === 'whoCanView'\n                \" alt=\"\" width=\"36\" height=\"36\" />\n              <svg class=\"checkIcon\" *ngIf=\"\n                  dashboardForm?.selectedViewers?.length > 0 &&\n                  activeSelector !== 'whoCanView'\n                \" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\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\n                  can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length == 0\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('whoCanView', true)\">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Who can view this dashboard?\n                  </div>\n                </div>\n\n                <div *ngIf=\"dashboardForm?.selectedViewers?.length > 0\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <ng-container *ngIf=\"!groupsEnabled\" id=\"onlyuserslist\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                        let user of dashboardForm?.selectedViewers?.slice(0, 1)\n                      \">\n                      <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" *ngIf=\"\n                          !listDetails.nonRemovableUsersList.includes(\n                            user.member_id\n                          )\n                        \" (click)=\"remove('whoCanView', user)\">&#xe9ae;</i>\n                      <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"user.member_name\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ user.member_name\n                        }}</span>\n                      <button *ngIf=\"\n                          dashboardForm?.selectedViewers?.length > 1 &&\n                          !groupsEnabled\n                        \"\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userList.popover()\" placement=\"left\">\n                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}\n                      </button>\n                    </div>\n                    <app-popover #userList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let user of dashboardForm?.selectedViewers\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"user?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      user.member_id\n                                    ) && !groupsEnabled\n                                  \" (click)=\"remove('whoCanView', user)\">&#xe90d;</i>\n                                {{ user?.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n\n                  <div *ngIf=\"groupsEnabled\" class=\"vx-d-flex vx-align-center\">\n                    <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER(S)</span>\n                      <button\n                        class=\"countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"userCount.popover()\" placement=\"left\">\n                        {{ dashboardForm?.selectedViewers?.length }}\n                      </button>\n                    </div>\n                    <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                        dashboardForm?.selectedGroup?.length &&\n                        dashboardForm?.selectedViewers?.length\n                      \">&</span>\n                    <div *ngIf=\"dashboardForm?.selectedGroup?.length\" id=\"usersandgroups\"\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                      <span class=\"chipName vx-fs-11 vx-label-txt\">USER GROUP(S)</span>\n                      <button\n                        class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                        appPopover (click)=\"groupCount.popover()\" placement=\"right\">\n                        {{ dashboardForm?.selectedGroup?.length }}\n                      </button>\n                    </div>\n\n                    <app-popover #userCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedViewers\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.member_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" *ngIf=\"\n                                    !listDetails.nonRemovableUsersList.includes(\n                                      data.member_id\n                                    )\n                                  \" (click)=\"remove('whoCanView', data)\">&#xe90d;</i>\n                                {{ data.member_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n\n                    <app-popover #groupCount [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let data of dashboardForm?.selectedGroup\">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"data.group_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('whoCanViewGroup', data)\">&#xe90d;</i>\n                                {{ data.group_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'whoCanView'\"\n                    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\"\n                    (click)=\"activateSelector('whoCanView', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Responsibility Center -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'rcList' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||\n                  activeSelector === 'rcList'\n                \" [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&\n                  activeSelector !== 'rcList'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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\n                  CENTER(S)</label>\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('rcList', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Responsibility Center(s) that you would like<br />displayed\n                    in the Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    dashboardForm?.selectedResponsibilityCenters?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                      delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n                    <button *ngIf=\"\n                        dashboardForm?.selectedResponsibilityCenters?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rcList.popover()\" placement=\"left\">\n                      +{{\n                      dashboardForm?.selectedResponsibilityCenters?.slice(1)\n                      .length\n                      }}\n                    </button>\n\n                    <app-popover #rcList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rc of dashboardForm?.selectedResponsibilityCenters\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rc?.item_name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                                {{ rc?.item_name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'rcList'\"\n                    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\"\n                    (click)=\"activateSelector('rcList', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Program -->\n          <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\" [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'responsibilityCategories' &&\n              activeSelector !== 'name'\n            \">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  allProgamSelected?.length ==\n                    0 || activeSelector === 'responsibilityCategories'\n                \" [ngSrc]=\"ASSETS.dashBoardProgramIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  allProgamSelected?.length > 0 &&\n                  activeSelector !== 'responsibilityCategories'\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <div *ngIf=\"\n                    allProgamSelected?.length == 0\n                  \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"\n                    submitted &&\n                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&\n                    allProgamSelected?.length ==\n                      0 &&\n                    dashboardForm?.selectedRiskCategories?.length == 0\n                  \">\n                  <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                    Select the Program(s) that you would like displayed in\n                    the<br />Dashboard, if any.\n                  </div>\n                </div>\n\n                <div *ngIf=\"\n                    allProgamSelected?.length > 0\n                  \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngFor=\"\n                      let rCategory of allProgamSelected?.slice(\n                        0,\n                        1\n                      )\n                    \">\n                    <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n                      (click)=\"remove('responsibilityCategories', rCategory)\">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [arTooltip]=\"rCategory.item_name\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rCategory.name\n                      }}</span>\n                    <button *ngIf=\"\n                        allProgamSelected\n                          ?.length > 1\n                      \"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"rCategoryList.popover()\" placement=\"left\">\n                      +{{\n                      allProgamSelected?.slice(\n                      1\n                      ).length\n                      }}\n                    </button>\n\n                    <app-popover #rCategoryList [dontCloseonClick]=\"true\">\n                      <div class=\"action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                              let rCategory of allProgamSelected\n                                | slice : 1;\n                              let j = index\n                            \">\n                            <div class=\"avatar-card\">\n                              <span class=\"value\" [arTooltip]=\"rCategory?.name\" placement=\"bottom-left\" delay=\"0\"\n                                type=\"black\" [tooltipMandatory]=\"false\">\n                                <i class=\"icons cross-icon\" (click)=\"\n                                    remove(\n                                      'responsibilityCategories',\n                                      rCategory\n                                    )\n                                  \">&#xe90d;</i>\n                                {{ rCategory?.name }}\n                              </span>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n\n                  <button *ngIf=\"activeSelector !== 'responsibilityCategories'\"\n                    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\"\n                    (click)=\"activateSelector('responsibilityCategories', true)\">\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <!-- Timeframe -->\n          <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n            <div class=\"image\">\n              <img *ngIf=\"\n                  !dashboardForm?.selectedFromDate ||\n                  !dashboardForm?.selectedToDate\n                \" [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\" alt=\"\" width=\"36\" height=\"36\" />\n              <svg *ngIf=\"\n                  dashboardForm?.selectedFromDate &&\n                  dashboardForm?.selectedToDate\n                \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block vx-mb-4\">\n                <label\n                  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>\n                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information selected to be\n                  displayed for. If no timeframe is selected, the information\n                  will be displayed permanently.</label>\n                <div class=\"input-group vx-d-flex vx-justify-between\">\n                  <div class=\"date-select\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"from_date\" [value]=\"\n                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly />\n                    <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\n                      placeholder=\"Select Date\" (onSelect)=\"\n                        closeFromDatePicker(); datePickerOverlay = false\n                      \" [config]=\"fromDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                  <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate\">\n                    <i class=\"icons\">&#xe92d;</i>\n                    <input type=\"text\" id=\"to_date\" [value]=\"\n                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'\n                      \" [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly />\n                    <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\" placeholder=\"Select Date\"\n                      (onSelect)=\"\n                        closeToDatePicker(); datePickerOverlay = false\n                      \" [config]=\"toDatePickerConfig\"></dp-date-picker>\n                    <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\n                  </div>\n                </div>\n                <p class=\"vx-txt-error\" [appScrollInView]=\"true\" *ngIf=\"\n                    submitted &&\n                    dashboardForm.selectedFromDate &&\n                    !dashboardForm.selectedToDate\n                  \">\n                  Select a time-frame.\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Email Summary -->\n          <!-- <div\n            class=\"form-group-row\"\n            [class.active]=\"activeSelector === 'frequency'\"\n            [class.disabled]=\"\n              activeSelector &&\n              activeSelector !== 'frequency' &&\n              activeSelector !== 'name'\n            \"\n          >\n            <div class=\"image\">\n              <img\n                *ngIf=\"!dashboardForm.frequencyMessage\"\n                [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n                alt=\"\"\n                width=\"36\"\n                height=\"36\"\n              />\n              <svg\n                *ngIf=\"dashboardForm.frequencyMessage\"\n                class=\"checkIcon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 52 52\"\n              >\n                <circle\n                  class=\"checkIcon__circle\"\n                  cx=\"26\"\n                  cy=\"26\"\n                  r=\"25\"\n                  fill=\"none\"\n                />\n                <path\n                  class=\"checkIcon__check\"\n                  fill=\"none\"\n                  d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n                />\n              </svg>\n            </div>\n            <div class=\"form\">\n              <div class=\"vx-form-group vx-d-block\">\n                <label\n                  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\"\n                  >Email Summaries</label\n                >\n                <label class=\"vx-control-panel-sub-label\"\n                  >If you would like to send a summary of this Dashboard, please\n                  select a frequency(By default VComply sends a weekly\n                  Summary).</label\n                >\n                <div\n                  *ngIf=\"!dashboardForm.frequencyMessage\"\n                  class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n                  (click)=\"activateSelector('frequency', true)\"\n                >\n                  <div\n                    class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n                  >\n                    Email Summaries\n                  </div>\n                </div>\n\n                <div\n                  *ngIf=\"dashboardForm.frequencyMessage\"\n                  class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n                >\n                  <div\n                    class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n                    [arTooltip]=\"dashboardForm.frequencyMessage\"\n                    placement=\"bottom-left\"\n                    type=\"black\"\n                    delay=\"0\"\n                    [tooltipMandatory]=\"false\"\n                    [innerHTML]=\"dashboardForm.frequencyMessage\"\n                  ></div>\n\n                  <button\n                    *ngIf=\"\n                      dashboardForm.frequencyMessage &&\n                      activeSelector !== 'frequency'\n                    \"\n                    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\"\n                    (click)=\"activateSelector('frequency', true)\"\n                  >\n                    <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n        <div class=\"button-block\">\n          <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n            (click)=\"configureDashboard()\">\n            Next: Configure Widgets\n          </button>\n        </div>\n      </div>\n\n      <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\"\n        (click)=\"close.emit({ mode: 'discard' })\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\"\n        [tooltipMandatory]=\"true\" [class.hide]=\"activeSelector && activeSelector !== 'name'\">\n        <i class=\"icons\">&#xe93f;</i>\n      </button>\n      <div class=\"global-confirmation-alert\" *ngIf=\"\n          submitted &&\n          dashboardForm?.selectedResponsibilityCenters?.length == 0 \n        \">\n        <div class=\"global-confirmation-alert-top\">\n          <span class=\"icon-block\">\n            <i class=\"icons\">&#xe930;</i>\n          </span>\n          <p class=\"text\" *ngIf=\"showRiskCategory\">\n            Select a Responsibility Center or Risk Category.\n          </p>\n          <p class=\"text\" *ngIf=\"!showRiskCategory\">\n            Select a Responsibility Center.\n          </p>\n        </div>\n        <div class=\"global-confirmation-alert-bottom\">\n          <p class=\"message\"></p>\n          <div class=\"button-group\">\n            <button class=\"fill\" type=\"button\" (click)=\"submitted = false\">\n              OKAY\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<app-smiley-dialog *ngIf=\"isSmiley\" [message]=\"smileyMessage\"></app-smiley-dialog>\n\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\n  [showRisk]=\"showRiskWidgets\" [showCompliance]=\"!showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\n  (widgetsDataModified)=\"setSelectedWidgets($event)\"\n  (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-container .vx-dialog-container{background-color:#fff;border:none;position:relative}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width{width:28px!important}::ng-deep .create-dashboard-container .vx-dialog-container.tablet-width .form-group .vx-dialog-body-container{overflow:hidden}}::ng-deep .create-dashboard-container .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-container .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}@media screen and (max-width: 1280px){::ng-deep .create-dashboard-container .vx-dialog-container button.close-dialog.hide{display:none}}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}@media screen and (max-width: 1280px){::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 .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:#fff;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:#fff;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 (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:#fff;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,#fff0,#ffffffbf 22%,#fff);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:#fff;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:#fff;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:#fff;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:#fff;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}::ng-deep .cdk-overlay-pane{inset:0!important;align-items:center;justify-content:center}::ng-deep .cdk-overlay-pane .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:transparent!important;border:none!important;box-shadow:unset!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .cdk-overlay-pane .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .cdk-overlay-pane .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}.left-side{color:#707070}.right-side button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}.right-side button i{margin-left:8px;font-size:11px}.right-side button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}.right-side button.cancelBtn{background:transparent!important;color:#eb2424!important}.selected-count-box{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem;position:relative}.selected-text{color:#707070;font-size:11px;font-weight:500;position:fixed;padding-left:2.5rem}::ng-deep .vc-divider{border-top:.5px solid #dbdbdb;width:100%}::ng-deep .vc-cf-container{border-bottom:1px solid #E3E3E9}::ng-deep .vc-cf-container:first-of-type,::ng-deep .vc-cf-container:only-child{border-top:1px solid #E3E3E9}::ng-deep .vc-cf-container .cf-name{width:9.25rem}::ng-deep .vc-cf-container .cf-value{width:calc(100% - 9.75rem)}::ng-deep .vc-cf-container .cf-value input{height:24px!important;border:1px solid #CDCED6!important;padding:0 .5rem!important;color:#565a6f!important;font-size:11px!important}::ng-deep .vc-cf-container .cf-value input::placeholder{color:#a9aab6!important}::ng-deep .vc-cf-container .cf-value input:hover{border-color:#343952!important}::ng-deep .vc-cf-container .cf-value input:focus{outline:none;border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd31a}.head-label{background:#565a6f;border-radius:.125rem;height:1rem;position:relative}.head-label:before{background:#e3e3e9;content:\"\";position:absolute;top:7px;left:-40px;width:500px;height:1px;z-index:-1}\n"] }]
+        }], ctorParameters: function () { return [{ type: CreateDashboardService }, { type: PaginationService }, { type: i0.ChangeDetectorRef }, { type: SnackBarService }, { type: PopoverService }, { type: TextCountPipe }]; }, propDecorators: { feature: [{
                 type: Input
             }], mode: [{
                 type: Input
             }], dashboardId: [{
                 type: Input
+            }], dashboardDetails: [{
+                type: Input
             }], close: [{
                 type: Output
             }], createdBy: [{
@@ -4950,16 +5785,13 @@ class DialogComponent {
         this.onDialogClose.next(data);
         document.body.style.overflow = 'auto';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: 'router' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: DialogRef }, { token: DialogConfig }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "app-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: InsertionDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InsertionDirective, selector: "[appInsertion]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dialog', template: "<div\n  class=\"overlay\"\n  (click)=\"onOverlayClicked($event)\"\n  [ngClass]=\"{\n    top: position === 'TOP',\n    right: position === 'RIGHT',\n    bottom: position === 'BOTTOM',\n    left: position === 'LEFT',\n    center: position === 'CENTER',\n    black: background === 'black'\n  }\" [class.pointer-none]=\"pointer === 'none'\"\n>\n  <div\n    class=\"dialog\"\n    [class.animate]=\"animation\"\n    (click)=\"onDialogClicked($event)\"\n    [ngClass]=\"{\n      top: position === 'TOP',\n      right: position === 'RIGHT',\n      bottom: position === 'BOTTOM',\n      left: position === 'LEFT',\n      center: position === 'CENTER'\n    }\"\n  >\n    <ng-template appInsertion></ng-template>\n  </div>\n</div>\n", styles: [".overlay{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;z-index:9}.overlay.low{z-index:1}.overlay.black{background:#000000b3}.overlay.top{align-items:flex-start}.overlay.right{justify-content:flex-end}.overlay.bottom{align-items:flex-end}.overlay.left{justify-content:flex-start}.dialog{position:relative}.dialog.animate.top{animation:animate-top .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-top{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.dialog.animate.right{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.pointer-none{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i5$1.Router, decorators: [{
-                    type: Inject,
-                    args: ['router']
-                }] }]; }, propDecorators: { insertionPoint: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: DialogRef }, { type: DialogConfig }, { type: i3.Router }]; }, propDecorators: { insertionPoint: [{
                 type: ViewChild,
                 args: [InsertionDirective, { static: true }]
             }] } });
@@ -5162,7 +5994,7 @@ class FormGroupComponent {
         this.displayCriteria = selection;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormGroupComponent, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></label\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">PROGRAM</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">TIMEFRAME</label>\n          <label class=\"vx-control-panel-sub-label\"\n            >Select how long you would like the information selected to be\n            displayed for. If no timeframe is selected, the information will be\n            displayed permanently.</label\n          >\n          <div class=\"input-group vx-d-flex vx-justify-between\">\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\n                [config]=\"toDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeToDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></label\n          >\n          <label class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </label>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\n  </div>\n</div>\n", 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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 (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:#fff;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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ 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: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i18.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormGroupComponent, selector: "app-form-group", inputs: { disabled: "disabled" }, outputs: { openCategoryList: "openCategoryList", openResponsibilityCenterList: "openResponsibilityCenterList", openWhoCanViewThis: "openWhoCanViewThis", closeCreateDashboard: "closeCreateDashboard", openFrequency: "openFrequency" }, viewQueries: [{ propertyName: "fromDatePicker", first: true, predicate: ["fromDatePicker"], descendants: true }, { propertyName: "toDatePicker", first: true, predicate: ["toDatePicker"], descendants: true }], ngImport: i0, template: "<!-- <p>form-group works!</p> -->\n<div class=\"form-group\" [class.disabled]=\"disabled\">\n  <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Dashboard Name<span class=\"required\">*</span></label\n          >\n          <div class=\"vx-input-group\">\n            <input\n              type=\"text\"\n              placeholder=\"Add dashboard name (Max limit: 30 characters).\"\n              [(ngModel)]=\"dashboardName\"\n            />\n            <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{\n              30 - dashboardName?.length\n            }}</span>\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardNameError }}</p>\n          <div class=\"vx-input-group\">\n            <vcomply-editor\n              [editorConfig]=\"dashboardDescription\"\n              [(ngModel)]=\"dashboardDescriptionText\"\n            ></vcomply-editor>\n            <span\n              class=\"counter\"\n              *ngIf=\"dashboardDescriptionText?.length > 0\"\n              >{{ 250 - dashboardDescriptionText?.length }}</span\n            >\n          </div>\n          <p class=\"vx-txt-error\">{{ dashboardDescriptionError }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\"\n            >Who can view this dashboard?<span class=\"required\">*</span></label\n          >\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Who can view this dashboard?\"\n              readonly\n              (click)=\"selectWhoCanViewThis()\"\n            />\n          </div>\n          <div class=\"selected\">\n            <div class=\"left\">\n              <div class=\"chip-container\">\n                <span class=\"chip\">\n                  <span class=\"value\">Samantha Jones</span>\n                </span>\n                <span class=\"chip\">\n                  <i class=\"icons\">&#xe90d;</i>\n                  <span class=\"value\">Angel Kleven</span>\n                </span>\n              </div>\n              <button class=\"count\">+10</button>\n            </div>\n            <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRcIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectResponsibilityCenter()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardProgramIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">PROGRAM</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Program that this responsibility relates to.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img [ngSrc]=\"ASSETS.dashBoardRiskIcon\" alt=\"\" width=\"36\" height=\"36\" />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RISK CATEGORIES</label>\n          <div class=\"selectbox\">\n            <div\n              class=\"custom-input\"\n              aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\n              (click)=\"selectCategories()\"\n            ></div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardUsersIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\n          <div class=\"radio-group\">\n            <app-cs-radio\n              (checkedEvent)=\"\n                displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\n              \"\n              >Those responsibilities that have been assigned to both the\n              selected Responsibility Center(s) and the selected\n              Categories.</app-cs-radio\n            >\n            <app-cs-radio\n              (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\"\n              >Those responsibilities that have been assigned to either the\n              selected Responsibility Center(s) or the selected\n              Categories.</app-cs-radio\n            >\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardTimeFrameIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">TIMEFRAME</label>\n          <label class=\"vx-control-panel-sub-label\"\n            >Select how long you would like the information selected to be\n            displayed for. If no timeframe is selected, the information will be\n            displayed permanently.</label\n          >\n          <div class=\"input-group vx-d-flex vx-justify-between\">\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedFromDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'From'\"\n                (click)=\"openFromDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #fromDatePicker\n                [(ngModel)]=\"selectedFromDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\n                [config]=\"fromDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeFromDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n            <div class=\"date-select\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                [value]=\"selectedToDate | date : 'dd MMM yyyy'\"\n                [placeholder]=\"'To'\"\n                (click)=\"openToDatePicker()\"\n                readonly\n              />\n              <dp-date-picker\n                #toDatePicker\n                [(ngModel)]=\"selectedToDate\"\n                placeholder=\"Select Date\"\n                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\n                [config]=\"toDatePickerConfig\"\n              ></dp-date-picker>\n              <div\n                class=\"overlay\"\n                (click)=\"closeToDatePicker()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group-row\">\n      <!--active class will appear on open list-->\n      <div class=\"image\">\n        <img\n          [ngSrc]=\"ASSETS.dashBoardEmailSummariesIcon\"\n          alt=\"\"\n          width=\"36\"\n          height=\"36\"\n        />\n      </div>\n      <div class=\"form\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Email Summaries\n            <i\n              class=\"icons\"\n              [arTooltip]=\"'This is a test tooltip'\"\n              placement=\"bottom-left\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            ></label\n          >\n          <label class=\"vx-control-panel-sub-label\">\n            If you would like to send a summary of this Dashboard, please select\n            a frequency(By default VComply sends a weekly Summary).\n          </label>\n          <div class=\"selectbox\">\n            <input\n              type=\"text\"\n              placeholder=\"Email Summaries\"\n              readonly\n              (click)=\"selectFrequency()\"\n            />\n          </div>\n          <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"button-block\">\n    <button\n      class=\"vx-btn block primary\"\n      [disabled]=\"disabled\"\n      (click)=\"configureDashboard()\"\n    >\n      Next: Configure Widgets\n    </button>\n  </div>\n</div>\n", 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\";@import\"https://cdn.v-comply.com/design-system/css/forms/forms.css\";::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}::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:40px;height:40px;margin-left:-38px;margin-right:20px;margin-top:28px}::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 .form{width:100%}::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 .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 .left{width:auto;display:flex}::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 .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 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.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 (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:#fff;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 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)}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form .date-select input{padding-left:36px!important}::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 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.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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(to bottom,#fff0,#ffffffbf 22%,#fff);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{height:50px;line-height:48px!important}::ng-deep .form-group .button-block button:disabled{opacity:.3}::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:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.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: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i17.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "directive", type: i1$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "src", "srcset"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,