vc-create-dashboard 2.4.1 → 2.4.2

package/create-dashboard.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CreateDashboardService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"CreateDashboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"app-create-dashboard","providers":[{"__symbolic":"reference","name":"ɵa"}],"template":"<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\"></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n                                    limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <marx-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div> \r\n                                <app-popover #userList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                        {{ user?.member_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                        {{ rc?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput\"\r\n                                        aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                        {{ rCategory?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                        {{ riskCategory?.category_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\"\r\n                                            [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n    *ngIf=\"isSmiley\"\r\n    [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:#0000;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:initial;position:relative;border-radius:0 0 0 30px;background:#0000}@-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 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{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:1px solid #707070;border-top:none;border-left: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{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 .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:#0000;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{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{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{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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 marx-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 marx-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{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:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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{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{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{height:22px;width:22px}::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{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{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 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:.3}::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:unset;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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(180deg,#fff0 0,#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;top:0;right:0;bottom:0;left: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:#0000;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:#0000;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:#0000;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:5px}.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:#0000;color:#fff;border-color:#fff}"]}]}],"members":{"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"dashboardId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"createdBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"fromDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["fromDatePicker"]}]}],"toDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":3},"arguments":["toDatePicker"]}]}],"configureWidget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":148,"character":17},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵa"}]}],"ngOnChanges":[{"__symbolic":"method"}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":161,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"activateSelector":[{"__symbolic":"method"}],"openFromDatePicker":[{"__symbolic":"method"}],"openToDatePicker":[{"__symbolic":"method"}],"closeFromDatePicker":[{"__symbolic":"method"}],"closeToDatePicker":[{"__symbolic":"method"}],"animateImage":[{"__symbolic":"method"}],"saveFrequency":[{"__symbolic":"method"}],"getCurrentDate":[{"__symbolic":"method"}],"setToDate":[{"__symbolic":"method"}],"getFromDate":[{"__symbolic":"method"}],"configureDashboard":[{"__symbolic":"method"}],"getOrganizationUsersCount":[{"__symbolic":"method"}],"getUsersList":[{"__symbolic":"method"}],"getComplianceCategoryList":[{"__symbolic":"method"}],"saveSelectedCategory":[{"__symbolic":"method"}],"getCategoryList":[{"__symbolic":"method"}],"checkWhetherAllListsLoaded":[{"__symbolic":"method"}],"setSelectedWidgets":[{"__symbolic":"method"}],"closeConfigureWidgets":[{"__symbolic":"method"}],"paginationFilter":[{"__symbolic":"method"}],"getRCList":[{"__symbolic":"method"}],"saveSelectedList":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"returnIds":[{"__symbolic":"method"}],"validateDashboard":[{"__symbolic":"method"}],"submitDashboard":[{"__symbolic":"method"}],"editDashboard":[{"__symbolic":"method"}],"populateDashboardForm":[{"__symbolic":"method"}],"setFrequency":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}]}},"CreateDashboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":32,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CreateDashboardComponent"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":45,"character":4},{"__symbolic":"reference","module":"vcomply-editor","name":"MarxEditorModule","line":46,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","module":"ng2-date-picker","name":"DpDatePickerModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":49,"character":4},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbl"},{"__symbolic":"reference","name":"ɵbq"},{"__symbolic":"reference","name":"ɵbs"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵbu"},{"__symbolic":"reference","name":"ɵbn"},{"__symbolic":"reference","name":"ɵcb"},{"__symbolic":"reference","name":"ɵce"},{"__symbolic":"reference","name":"ɵbz"},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵcg"}],"exports":[{"__symbolic":"reference","name":"CreateDashboardComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["environmentConfig"],"value":{"ngModule":{"__symbolic":"reference","name":"CreateDashboardModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵd"},"useValue":{"__symbolic":"reference","name":"environmentConfig"}}]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"textCount"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":18,"character":39}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":17,"character":28},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}]}],"getOrganizationUsers":[{"__symbolic":"method"}],"getOrganizationUsersCount":[{"__symbolic":"method"}],"getCategoryList":[{"__symbolic":"method"}],"getAllUsers":[{"__symbolic":"method"}],"getResponsibilityCenterList":[{"__symbolic":"method"}],"getComplianceCategoriesList":[{"__symbolic":"method"}],"submitDashboard":[{"__symbolic":"method"}],"fetchDashboard":[{"__symbolic":"method"}],"updateDashboard":[{"__symbolic":"method"}],"getUserInformation":[{"__symbolic":"method"}],"_ID":[{"__symbolic":"method"}],"checkDuplicateDashboardName":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":13,"character":41}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":13,"character":28},{"__symbolic":"reference","name":"ɵd"}]}],"getAuthorizationToken":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵd":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setCurrentState":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"show":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":20,"character":6}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":18,"character":18},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}]}],"dashBoardWidgetUpdate":[{"__symbolic":"method"}],"moduleType":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-user-list","template":"<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"Search User(s) who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"!searchValue\">\r\n            <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-list-body-top\">\r\n            <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n            </app-cs-checkbox>\r\n            <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n            </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"list-of-user\">\r\n            <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1\">\r\n                <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                        (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                        delay=\"0\" [tooltipMandatory]=\"true\"\r\n                        > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                </li>\r\n                <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n            </ul>\r\n\r\n            <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n            </app-no-data>\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n        </div>\r\n       \r\n\r\n    </div>\r\n    <div class=\"user-list-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .user-list{background:#fff}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 20px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 270px)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 20px 0;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}"]}]}],"members":{"closeUserList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"saveSelectedUsers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"selectionType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"listDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"totalPages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"totalList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"cancelChanges":[{"__symbolic":"method"}],"removeElement":[{"__symbolic":"method"}],"submitChanges":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"selectAllUsers":[{"__symbolic":"method"}],"selectElement":[{"__symbolic":"method"}],"setSearchValue":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"paginationFilter":[{"__symbolic":"method"}],"getUsersList":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-form-group","template":"<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n    <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/what.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                    <div class=\"vx-input-group\">\r\n                        <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardName\">\r\n                        <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{30 - dashboardName?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardNameError}}</p>\r\n                    <div class=\"vx-input-group\">\r\n                        <marx-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardDescriptionText\"></marx-editor>\r\n                        <span class=\"counter\" *ngIf=\"dashboardDescriptionText?.length > 0\">{{250 - dashboardDescriptionText?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardDescriptionError}}</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who can view this dashboard?<span class=\"required\">*</span></label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                            (click)=\"selectWhoCanViewThis()\">\r\n                    </div>\r\n                    <div class=\"selected\">\r\n                        <div class=\"left\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"chip\">\r\n                                    <span class=\"value\">Samantha Jones</span>\r\n                                </span>\r\n                                <span class=\"chip\">\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                    <span class=\"value\">Angel Kleven</span>\r\n                                </span>\r\n                            </div>\r\n                            <button class=\"count\">+10</button>\r\n                        </div>\r\n                        <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n                    <div class=\"selectbox\">\r\n                        <div class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                            (click)=\"selectResponsibilityCenter()\">\r\n                        </div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/category.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n                    <div class=\"selectbox\">\r\n                        <div class=\"custom-input\"\r\n                            aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\"\r\n                            (click)=\"selectCategories()\"></div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/category.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n                    <div class=\"selectbox\">\r\n                        <div class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                            (click)=\"selectCategories()\"></div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n                    <div class=\"radio-group\">\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\">Those responsibilities that have been assigned to both the selected\r\n                            Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\">Those responsibilities that have been assigned to either the selected\r\n                            Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/when.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                    <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                        selected to be displayed for. If no timeframe is selected, the information will be\r\n                        displayed permanently.</label>\r\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\"\r\n                                (click)=\"openFromDatePicker()\" readonly>\r\n                            <dp-date-picker #fromDatePicker [(ngModel)]=\"selectedFromDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\"\r\n                                (click)=\"openToDatePicker()\" readonly>\r\n                            <dp-date-picker #toDatePicker [(ngModel)]=\"selectedToDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"  [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <!--active class will appear on open list-->\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Email Summaries <i class=\"icons\" [arTooltip]=\"'This is a test tooltip'\" placement=\"bottom-left\"\r\n                            type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                    <label class=\"vx-control-panel-sub-label\">\r\n                        If you would like to send a summary of this Dashboard,\r\n                        please select a frequency(By default VComply sends a weekly Summary).\r\n                    </label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Email Summaries\" readonly (click)=\"selectFrequency()\">\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"button-block\">\r\n        <button class=\"vx-btn block primary\" [disabled]=\"disabled\" (click)=\"configureDashboard()\">Next: Configure\r\n            Widgets</button>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"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:initial;position:relative;border-radius:0 0 0 30px;background:#0000}::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{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:1px solid #707070;border-top:none;border-left: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{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:#0000;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{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{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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 marx-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 marx-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{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:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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{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{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{height:22px;width:22px}::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{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{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(180deg,#fff0 0,#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;top:0;right:0;bottom:0;left:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}"]}]}],"members":{"openCategoryList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"openResponsibilityCenterList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"openWhoCanViewThis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"closeCreateDashboard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"openFrequency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"fromDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["fromDatePicker"]}]}],"toDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":20,"character":3},"arguments":["toDatePicker"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵk"}]}],"ngOnInit":[{"__symbolic":"method"}],"openFromDatePicker":[{"__symbolic":"method"}],"openToDatePicker":[{"__symbolic":"method"}],"closeFromDatePicker":[{"__symbolic":"method"}],"closeToDatePicker":[{"__symbolic":"method"}],"animateImage":[{"__symbolic":"method"}],"selectWhoCanViewThis":[{"__symbolic":"method"}],"selectResponsibilityCenter":[{"__symbolic":"method"}],"selectCategories":[{"__symbolic":"method"}],"selectFrequency":[{"__symbolic":"method"}],"configureDashboard":[{"__symbolic":"method"}],"verifyFields":[{"__symbolic":"method"}],"getCurrentDate":[{"__symbolic":"method"}],"displayCriteriaSelected":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":{"__symbolic":"reference","name":"ɵl"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":13,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":13,"character":90},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":13,"character":124}]}],"open":[{"__symbolic":"method"}],"appendDialogComponentToBody":[{"__symbolic":"method"}],"removeDialogComponentFromBody":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"declarations":[{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"}],"entryComponents":[{"__symbolic":"reference","name":"ɵm"}],"providers":[{"__symbolic":"reference","name":"ɵo"}]}]}],"members":{}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-dialog","template":"<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n","styles":[".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right: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:translateX(100%)}to{transform:translateX(0)}}.pointer-none{pointer-events:none}"]}]}],"members":{"insertionPoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":17,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵn"},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":27,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":28,"character":16},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":31,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"routeAction":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onOverlayClicked":[{"__symbolic":"method"}],"onDialogClicked":[{"__symbolic":"method"}],"loadChildComponent":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[appInsertion]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":6,"character":39}]}]}},"ɵo":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"close":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","arity":1,"members":{}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-responsibility-center","template":"<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"responsibility-center-head\">\r\n        <h3>Select Responsibility Center(s)</h3>\r\n    </div>\r\n    <div class=\"responsibility-center-body\">\r\n        <div class=\"responsibility-center-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n        </div>\r\n        <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\r\n            <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n                <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                    <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n\r\n                <li\r\n                    *ngFor=\"let rc of searchList; let i = index\">\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n                        <ul class=\"responsibility-center-list-name\">\r\n                            <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\"\r\n                                    delay=\"0\">\r\n                                <i class=\"icons\"  *ngIf=\"j !== 0\">&#xe910;</i>\r\n                                {{entity}}\r\n                                <!-- <span class=\"name\">{{entity}}</span> -->\r\n                                </li> \r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n                \r\n            </ul>\r\n            <app-no-data  *ngIf=\"searchList.length == 0\"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n            </app-no-data>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"responsibility-center-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeRcList.emit()\"\r\n         (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n         (submitEvent)=\"save()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .responsibility-center{background:#fff}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:8px;color:#747576;position:relative;top:-1px}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:14px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}"]}]}],"members":{"saveSelectedList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"closeRcList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"responsibilityCentersList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"selectedResponsibilityCenters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"rcIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"radioSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectRc":[{"__symbolic":"method"}],"deleteEvent":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"closeResponsibilityCenterList":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-categories","template":"<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Responsibility Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n                <div class=\"left\">\r\n                  <label>REGULATIONS</label>\r\n                  <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n                    {{categoryList?.regulations?.selectedList?.length}}\r\n                    {{(categoryList?.regulations?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n                <div class=\"left\">\r\n                  <label>STANDARDS</label>\r\n                  <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n                    {{categoryList?.standards?.selectedList?.length}}\r\n                    {{(categoryList?.standards?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n                (click)=\"activeTab = 'internalControls'\">\r\n                <div class=\"left\">\r\n                  <label>INTERNAL CONTROLS</label>\r\n                  <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n                    {{categoryList?.internalControls?.selectedList?.length}}\r\n                    {{(categoryList?.internalControls?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Category\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                            <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n                                {{entity}}\r\n                            </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .category-list{background:#fff}::ng-deep .category-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:#0000;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#fff;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}"]}]}],"members":{"categoryList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"allCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"categoryIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"selectedCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"saveSelectedCategory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"closeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"closeCategoriesList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectCategory":[{"__symbolic":"method"}],"deleteEvent":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"setActiveTab":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-risk-categories","template":"<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n                <div class=\"left\">\r\n                  <label>strategic</label>\r\n                  <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n                    {{categoryList?.strategic?.selectedList?.length}}\r\n                    {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n                <div class=\"left\">\r\n                  <label>operational</label>\r\n                  <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n                    {{categoryList?.operational?.selectedList?.length}}\r\n                    {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n                (click)=\"activeTab = 'compliance'\">\r\n                <div class=\"left\">\r\n                  <label>compliance</label>\r\n                  <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n                    {{categoryList?.compliance?.selectedList?.length}}\r\n                    {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                          <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .category-list{background:#fff}::ng-deep .category-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:#0000;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#fff;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}"]}]}],"members":{"categoryList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"allCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"categoryIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"selectedCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"saveSelectedCategory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"closeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"closeCategoriesList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectCategory":[{"__symbolic":"method"}],"deleteEvent":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"setActiveTab":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"app-frequency","template":"<div class=\"frequency\">\r\n    <div class=\"frequency-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <h3 class=\"frequency-title\">Select a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n            <div class=\"frequency-tab-head\">\r\n                <ul class=\"navigation\">\r\n                    <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"frequency-tab-body\" >\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let day of dayNames; let dayIndex = index\" (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n                    <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                        <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"day-counter\"\r\n                            onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                    </div>\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let month of monthNames; let monthIndex = index\" (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n                    <ng-container *ngIf=\"showRadio\">\r\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                            <span>Day <input type=\"number\"  (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"day-counter\"\r\n                                onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                        </div>\r\n                        <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                            <app-cs-radio *ngFor = \"let quarter of quarters, let quarterIndex = index\" (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n                        </div>\r\n                    </ng-container>                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails]=\"footerDetails\"\r\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n         (submitEvent)=\"submitFrequency()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");::ng-deep .frequency{background:#fff}::ng-deep .frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0;padding:0 12px}::ng-deep .frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}::ng-deep .frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}::ng-deep .frequency-tab{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px #1e5dd31a;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}::ng-deep .frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul{padding:0;margin:0}::ng-deep .frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul.navigation li{list-style:none;width:auto;padding:0 28px;display:flex;justify-content:center}::ng-deep .frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:#0000;border:none;white-space:nowrap;cursor:pointer;padding:0}::ng-deep .frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}::ng-deep .frequency-tab-head ul.navigation li button.active{color:#1e5dd3}::ng-deep .frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}::ng-deep .frequency-tab-body{background:#fff}::ng-deep .frequency-tab-body .checkbox-list{border-top:1px solid #f1f1f1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top{padding:12px 24px;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}::ng-deep .frequency-tab-body .checkbox-list .frequency-top .day-counter{-webkit-appearance:textfield;-moz-appearance:textfield;width:40px;margin:6px 8px 0;padding:0 4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;font-size:14px}::ng-deep .frequency-tab-body .checkbox-list .frequency-checkbox{padding:24px}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#747576!important;font-weight:400!important}::ng-deep .frequency-tab-body .checkbox-list.month app-cs-checkbox{width:calc(100% / 6);padding:4px 0}"]}]}],"members":{"savedFrequencyTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"savedFrequencies":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"closeFrequencyPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"saveFrequency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"closeFrequency":[{"__symbolic":"method"}],"daySelectionChange":[{"__symbolic":"method"}],"monthSelectionChange":[{"__symbolic":"method"}],"quarterSelectionChange":[{"__symbolic":"method"}],"changeTab":[{"__symbolic":"method"}],"setToDefaultValues":[{"__symbolic":"method"}],"submitFrequency":[{"__symbolic":"method"}],"checkDateValidity":[{"__symbolic":"method"}],"checkFrequencyValidity":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"filter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":24,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":24,"character":26},{"__symbolic":"reference","name":"ɵbe"}],"exports":[{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbc"}]}]}],"members":{}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-checkbox","template":"<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n  <span class=\"checkbox\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n","styles":["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"ngValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-radio","template":"<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n  <span class=\"radio\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n","styles":["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio],label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"checkedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-switch","template":"<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n  <!-- [class.large]=\"large\" -->\r\n  <span class=\"value\">\r\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n        <i class=\"vc-icons\">&#xe9f3;</i>\r\n      </span> -->\r\n  </span>\r\n  <!-- [class.last]=\"last\" -->\r\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n  <span\r\n    class=\"switch\"\r\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n    [arTooltip]=\"tooltipMessage\"\r\n    placement=\"bottom-right\"\r\n    delay=\"0\"\r\n    type=\"black\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n</label>\r\n","styles":["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #fff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"ngValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"tooltipMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-radio-group","template":"<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-select","template":"<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n  <label *ngIf=\"dropdownLabel != undefined\">\r\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n  >\r\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n    <input\r\n      type=\"text\"\r\n      [class.line]=\"stylex\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"selectedValue | pascal\"\r\n      readonly\r\n      (click)=\"openDropdown($event)\"\r\n      (keyup.enter)=\"openDropdown($event)\"\r\n      (keyup.arrowup)=\"openDropdown($event)\"\r\n      (keyup.arrowdown)=\"openDropdown($event)\"\r\n      *ngIf=\"!colorProperty\"\r\n    />\r\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\r\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\r\n    </span>\r\n    <span class=\"arrow\" [class.line]=\"stylex\">\r\n      <i class=\"risk-icons\">&#xe919;</i>\r\n    </span>\r\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && !colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label>\r\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\r\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\r\n        </label>\r\n      </li>\r\n    </ul>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label class=\"colors\">\r\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"displayProperty && displayProperty !== ''\"\r\n            class=\"value\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data[displayProperty] }}</span\r\n          >\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"!displayProperty || displayProperty === ''\"\r\n            class=\"value\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data }}</span\r\n          >\r\n        </label>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n","styles":[".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group .show-label,.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group .show-label.line,.input-group input[type=text].line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box .input,.input-group .custom-select-box input[type=text]{cursor:pointer;padding-right:30px}.input-group .custom-select-box .input.line,.input-group .custom-select-box input[type=text].line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #fff;border-left:2px solid #fff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}"]}]}],"members":{"dataList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"dropdownLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"selectedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"isRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"dropdownSubLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":15,"character":3},"arguments":["option"]}]}],"selectedData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"selectedValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"stylex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"valueKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"multipleSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"colorProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"colorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["optionList"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"pascal"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"searchMultiSelect"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":6,"character":34}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":7,"character":3},"arguments":["clickOutside"]}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":9,"character":3},"arguments":["document:click",["$event.target"]]}]}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵbf"}]}]}],"members":{}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[arTooltip]"}]}],"members":{"tooltipTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3},"arguments":["arTooltip"]}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"tooltipMandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":15,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":15,"character":56}]}],"ngOnInit":[{"__symbolic":"method"}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":17,"character":3},"arguments":["mouseenter"]}]}],"onMouseOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":21,"character":3},"arguments":["mouseover"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":26,"character":3},"arguments":["mouseleave"]}]}],"onMouseOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":29,"character":3},"arguments":["mouseout"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":32,"character":3},"arguments":["click"]}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbk"}],"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":25}],"exports":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"}]}]}],"members":{}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"cs-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":12,"character":15},"useExisting":{"__symbolic":"reference","name":"ɵbh"},"multi":true}],"template":"<div class=\"selection-wrap\">\r\n  <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\r\n    {{ dropdownLabel }}\r\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\r\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\r\n  </label>\r\n  <div class=\"input-group\">\r\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\r\n  </div>\r\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\r\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\r\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\r\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\r\n    <ng-content select=\"cs-option\"></ng-content>\r\n  </div>\r\n</div>","styles":["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid #0000;border-left:4px solid #0000;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}"]}]}],"members":{"dropdownLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownSubLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"isRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":["optionList"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}},"ɵbi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"cs-option","template":"<div class=\"list\">\r\n  <label>\r\n    <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\r\n    <span class=\"value\" #options>\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </label>\r\n</div>\r\n","styles":[".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["options"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbj"}]}],"ngOnInit":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}]}},"ɵbj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵbk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"safeHtml"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":7,"character":32}]}],"transform":[{"__symbolic":"method"}]}},"ɵbl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbm"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵbn"}],"exports":[{"__symbolic":"reference","name":"ɵbm"}]}]}],"members":{}},"ɵbm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-dashboard-footer","template":"<div class=\"floating-bar-container\">\r\n    <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n        [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n        [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n        </div>\r\n\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n            <span\r\n                class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n                <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n                    (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n                <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n            </span>\r\n            <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n                class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n                appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n                1}}</span>\r\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n                <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n                    {{footerDetails.singularText}}</span>\r\n                <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n                    {{footerDetails.pluralText}}</span>\r\n            </ng-container>\r\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n                <div class=\"floating-bar-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n                            <div class=\"chip-item\">\r\n                                <i class=\"icons\"\r\n                                    *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n                                    (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n                                <span>{{element[footerDetails.displayElementKey]}}</span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n        <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"cancelFloatingBar()\">Cancel</button>\r\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"submitFloatingBar()\">Update</button> -->\r\n            <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n                (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n        </div>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");.floating-bar{width:100%;background:#fff;position:relative}.floating-bar,.floating-bar .left span.select-item{box-shadow:0 2px 6px #4681ef20;border-radius:2px}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-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}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:#0000;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:#0000;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:#0000;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}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}"]}]}],"members":{"cancelEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"submitEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"deleteEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"footerDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"cancelFloatingBar":[{"__symbolic":"method"}],"submitFloatingBar":[{"__symbolic":"method"}],"deleteSelected":[{"__symbolic":"method"}]}},"ɵbn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbo"},{"__symbolic":"reference","name":"ɵbp"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵbo"},{"__symbolic":"reference","name":"ɵbp"}],"providers":[{"__symbolic":"reference","name":"ɵg"}]}]}],"members":{}},"ɵbo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-popover","template":"<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\r\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\r\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n","styles":[".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:auto;position:fixed;top:0;right:0;bottom:0;left:0}"]}]}],"members":{"dontCloseonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"popoverRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":11,"character":3},"arguments":["popoverRatio"]}]}],"popoverContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["popoverContent"]}]}],"closedOnOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵg"}]}],"ngOnInit":[{"__symbolic":"method"}],"popover":[{"__symbolic":"method"}],"popoverEvent":[{"__symbolic":"method"}],"closePopover":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clickedPopover":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}},"ɵbp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[appPopover]"}]}],"members":{"refrence":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":29},{"__symbolic":"reference","name":"ɵg"}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":13,"character":3},"arguments":["click"]}]}],"getPosition":[{"__symbolic":"method"}]}},"ɵbq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵbr"}]}]}],"members":{}},"ɵbr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-pagination","template":"<div class=\"pagination-box\">\r\n        <ul>\r\n            <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><</button></li>\r\n            <li *ngFor=\"let page of paginationArray\">\r\n                <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n                    <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}</button></li>\r\n\r\n            <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\">></button></li>\r\n        </ul>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none}.pagination-box ul li button.disable{pointer-events:none}"]}]}],"members":{"totalPages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"totalList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"paginationFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"rebuildPagination":[{"__symbolic":"method"}],"changePage":[{"__symbolic":"method"}]}},"ɵbs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbt"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵbn"}],"exports":[{"__symbolic":"reference","name":"ɵbt"}]}]}],"members":{}},"ɵbt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"floating-bar","template":"<div class=\"floating-bar-container\">\r\n    <div class=\"floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been\r\n                completed.</span>\r\n        </div>\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n        </div>\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n            <span\r\n                class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\"><i\r\n                    class=\"icons vx-mr-2\">&#xe90d;</i> {{singleCategory}}</span>\r\n        </div>\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n            <span\r\n                class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n                <i *ngIf=\"selectedData.length\" (click)=\"deleteSelected(selectedData[0])\"\r\n                    class=\"icons vx-mr-2\">&#xe90d;</i>{{selectedData[0]?.title}}</span>\r\n            <span\r\n                *ngIf=\"selectedData?.length > 1\"\r\n                class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n                appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{selectedData?.length - 1}}\r\n            </span>\r\n            <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n            <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n                <div class=\"floating-bar-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n                            <div class=\"chip-item\">\r\n                                <i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i>\r\n                                <span>{{data?.title}}</span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n        <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"cancelFloatingBar()\">Cancel</button>\r\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"submitFloatingBar()\">Update</button> -->\r\n            <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n                (click)=\"submitFloatingBar()\">Save</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");.floating-bar{width:100%;background:#fff;position:relative}.floating-bar,.floating-bar .left span.select-item{box-shadow:0 2px 6px #4681ef20;border-radius:2px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-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}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:#0000;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:#0000;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:#0000;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}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.selectedWidgets{font-size:12px}"]}]}],"members":{"cancelEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"submitEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"deleteEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"frequencyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"singleCategory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"selectedData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"ngOnInit":[{"__symbolic":"method"}],"cancelFloatingBar":[{"__symbolic":"method"}],"submitFloatingBar":[{"__symbolic":"method"}],"deleteSelected":[{"__symbolic":"method"}]}},"ɵbu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbv"},{"__symbolic":"reference","name":"ɵbw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","name":"ɵbs"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵbz"}],"exports":[{"__symbolic":"reference","name":"ɵbv"}]}]}],"members":{}},"ɵbv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-configure-widgets","template":"<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#fff}::ng-deep .configure-widgets-head{height:44px;background:#fbfbfb;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:#0000;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:#0000;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:#0000;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}"]}]}],"members":{"widgetsDataModified":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"closeConfigureWidgets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"selectedWidgetsData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"displayedWidgets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"showRisk":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"showCompliance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵf"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectWidget":[{"__symbolic":"method"}],"setSelectedWidgets":[{"__symbolic":"method"}],"removeWidget":[{"__symbolic":"method"}],"onNextClick":[{"__symbolic":"method"}],"closeConfigureDashboard":[{"__symbolic":"method"}],"setWidgetsVisibilityToFalse":[{"__symbolic":"method"}]}},"ɵbw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"search"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵby"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵby"}]}]}],"members":{}},"ɵby":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[appScrollInView]"}]}],"members":{"appScrollInView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":1}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":7,"character":26}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"scroll":[{"__symbolic":"method"}]}},"ɵbz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵca"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵca"}]}]}],"members":{}},"ɵca":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-no-data","template":"<div class=\"no-data-wrapper\">\r\n    <div class=\"no-data-container\">\r\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n        <div class=\"button-row\" *ngFor=\"let button of action\">\r\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n                    [class.small]=\"smallButton\"></button>\r\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n                    <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n                        [innerHTML]=\"button?.buttonText\"></span>\r\n                </button>\r\n        </div>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:300px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:17px;font-weight:400;line-height:24px;margin-bottom:25px;color:#161b2f;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}"]}]}],"members":{"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"noDataImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"noDataText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"noDataButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"noDataSecButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"altText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"buttonAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"smallButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"buttonIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"actionEmitter":[{"__symbolic":"method"}]}},"ɵcb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcc"},{"__symbolic":"reference","name":"ɵcd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵcc"},{"__symbolic":"reference","name":"ɵcd"}]}]}],"members":{}},"ɵcc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-loader","template":"<!-- <p>loader works!</p> -->\r\n<div class=\"main-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div>\r\n","styles":[".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;background:#0000;z-index:9;top:0;right:0;bottom:0;left:0}.demo-loader{position:relative;width:60px;height:60px;margin-left:0;padding:2px;border-radius:20px;box-sizing:border-box}.demo-loader-inner{display:flex;align-items:center;justify-content:center;height:56px}.demo-loader-inner svg{position:relative}.demo-loader-colored-blocks{overflow:hidden;margin-left:0;padding:2px;border-radius:20px;perspective:1000px;animation:demoAnim 4s ease-in-out infinite,contAnim 4s infinite}.demo-loader-colored-blocks,.demo-loader-colored-blocks-rotater{position:absolute;left:0;top:0;width:60px;height:60px;box-sizing:border-box}.demo-loader-colored-blocks-rotater{border-radius:inherit}.demo-loader-colored-blocks-inner{overflow:hidden;position:relative;height:100%;background:#fff;border-radius:inherit;box-sizing:border-box}.demo-loader-colored-block{position:absolute;left:50%;top:50%;width:300%;height:300%;box-sizing:border-box;transform-origin:0 0}.demo-loader-colored-block:first-child{transform:rotate(45deg) skewX(37deg);background-color:#4681ef}.demo-loader-colored-block:nth-child(2){transform:rotate(97deg) skewX(32deg);background-color:#66bf72}.demo-loader-colored-block:nth-child(3){transform:rotate(154deg) skewX(26deg);background-color:#8c81f5}.demo-loader-colored-block:nth-child(4){transform:rotate(-22deg) skewX(22deg);background-color:#e75151}.demo-loader-colored-block:nth-child(5){transform:rotate(218deg) skewX(24deg);background-color:#f5a05b}.demo-loader-colored-block:nth-child(6){transform:rotate(282deg) skewX(33deg);background-color:#f4c84a}@keyframes contAnim{15%,to{margin-left:0;width:60px}25%,90%{margin-left:0;width:60px}}@keyframes demoAnim{15%{border-radius:20px;transform:rotate(0)}30%,43%{border-radius:50%;transform:rotate(1turn)}52%,65%{border-radius:0;transform:rotate(2turn)}78%,90%{border-radius:50%;transform:rotate(3turn)}to{border-radius:20px;transform:rotate(4turn)}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵcd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-loader-inline","template":"<!-- <p>loader-inline works!</p> -->\r\n<div class=\"inline-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div>\r\n","styles":[".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;background:#0000;z-index:9;top:0;right:0;bottom:0;left:0}.demo-loader{position:relative;width:60px;height:60px;margin-left:0;padding:2px;border-radius:20px;box-sizing:border-box}.demo-loader-inner{display:flex;align-items:center;justify-content:center;height:56px}.demo-loader-inner svg{position:relative}.demo-loader-colored-blocks{overflow:hidden;margin-left:0;padding:2px;border-radius:20px;perspective:1000px;animation:demoAnim 4s ease-in-out infinite,contAnim 4s infinite}.demo-loader-colored-blocks,.demo-loader-colored-blocks-rotater{position:absolute;left:0;top:0;width:60px;height:60px;box-sizing:border-box}.demo-loader-colored-blocks-rotater{border-radius:inherit}.demo-loader-colored-blocks-inner{overflow:hidden;position:relative;height:100%;background:#fff;border-radius:inherit;box-sizing:border-box}.demo-loader-colored-block{position:absolute;left:50%;top:50%;width:300%;height:300%;box-sizing:border-box;transform-origin:0 0}.demo-loader-colored-block:first-child{transform:rotate(45deg) skewX(37deg);background-color:#4681ef}.demo-loader-colored-block:nth-child(2){transform:rotate(97deg) skewX(32deg);background-color:#66bf72}.demo-loader-colored-block:nth-child(3){transform:rotate(154deg) skewX(26deg);background-color:#8c81f5}.demo-loader-colored-block:nth-child(4){transform:rotate(-22deg) skewX(22deg);background-color:#e75151}.demo-loader-colored-block:nth-child(5){transform:rotate(218deg) skewX(24deg);background-color:#f5a05b}.demo-loader-colored-block:nth-child(6){transform:rotate(282deg) skewX(33deg);background-color:#f4c84a}@keyframes contAnim{15%,to{margin-left:0;width:60px}25%,90%{margin-left:0;width:60px}}@keyframes demoAnim{15%{border-radius:20px;transform:rotate(0)}30%,43%{border-radius:50%;transform:rotate(1turn)}52%,65%{border-radius:0;transform:rotate(2turn)}78%,90%{border-radius:50%;transform:rotate(3turn)}to{border-radius:20px;transform:rotate(4turn)}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵce":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵcf"}]}]}],"members":{}},"ɵcf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-snack-bar","template":"<div class=\"snakebar\" *ngIf=\"show\">\r\n  <div class=\"snakebar-inner\">\r\n    <div class=\"snakebarText\">\r\n      <!-- &#xe914; -->\r\n      <i class=\"icons\" [innerHTML]=\"icon\"></i> \r\n      <span [innerHTML]=\"message\">{{ message }}</span>\r\n    </div>\r\n    <button (click)=\"close()\">[ Close ]</button>\r\n  </div>\r\n</div>\r\n","styles":[".snakebar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snakebar.white{background-color:#fff;color:#000;z-index:20}.snakebar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snakebar .snakebar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snakebar .snakebar-inner .snakebarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snakebar .snakebar-inner .snakebarText i{background:#f1f1f1;color:#f6882f;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snakebar .snakebar-inner button{background:#0000;border:none;font-size:11px;padding:0;position:relative;color:#f6882f;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snakebar .snakebar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵcg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵch"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵch"}]}]}],"members":{}},"ɵch":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-smiley-dialog","template":"<!-- active -->\r\n<div class=\"smiley-popup active\">\r\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n    <i class=\"icons\">&#xe93f;</i>\r\n  </button>\r\n  <div class=\"smiley-container\">\r\n    <div class=\"smiley\">\r\n      <!-- active deactive -->\r\n      <div class=\"smiley-circle active\">\r\n        <div class=\"smiley-circle-inner\">\r\n          <div class=\"eyes\">\r\n            <div class=\"eye\"></div>\r\n            <div class=\"eye\"></div>\r\n          </div>\r\n          <div class=\"mouth\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <h3>{{ message }}</h3>\r\n    <div class=\"successSmilyButton\">\r\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\r\n        {{ button?.buttonText }}\r\n      </button>\r\n    </div>\r\n    <!-- <div class=\"successSmilyButton\"> -->\r\n    <!-- <button>White Button</button>\r\n            <button class=\"blue-btn\">Blue Button</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</div>\r\n","styles":[".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;top:0;right:0;bottom:0;left:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:#0000;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px 0 #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0deg);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:0;border-bottom-right-radius:0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;height:10%;width:40%;bottom:25%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:100px;border-bottom-right-radius:100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translateX(0)}20%{transform:translateX(-20%)}40%{transform:translateX(15%)}60%{transform:translateX(-10%)}80%{transform:translateX(5%)}to{transform:translateX(0)}}"]}]}],"members":{"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"autoClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"actionButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"closeSmiley":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":14,"character":3},"arguments":["window:keyup",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"actionEmitter":[{"__symbolic":"method"}],"smileyCloseEmitter":[{"__symbolic":"method"}]}}},"origins":{"CreateDashboardService":"./lib/create-dashboard.service","CreateDashboardComponent":"./lib/create-dashboard-container/create-dashboard.component","CreateDashboardModule":"./lib/create-dashboard-container/create-dashboard.module","ɵa":"./lib/create-dashboard-container/pipes/text-count.pipe","ɵb":"./lib/create-dashboard-container/services/create-dashboard.service","ɵc":"./lib/create-dashboard-container/services/auth.service","ɵd":"./lib/configurations","ɵe":"./lib/create-dashboard-container/services/pagination.service","ɵf":"./lib/ui-kit/snack-bar/snack-bar.service","ɵg":"./lib/ui-kit/popover/popover.service","ɵh":"./lib/create-dashboard-container/services/configure-widgets.service","ɵi":"./lib/create-dashboard-container/user-list/user-list.component","ɵj":"./lib/create-dashboard-container/form-group/form-group.component","ɵk":"./lib/ui-kit/dialog/dialog.service","ɵl":"./lib/ui-kit/dialog/dialog.module","ɵm":"./lib/ui-kit/dialog/dialog.component","ɵn":"./lib/ui-kit/dialog/insertion.directive","ɵo":"./lib/ui-kit/dialog/dialog-ref","ɵp":"./lib/ui-kit/dialog/dialog-config","ɵq":"./lib/create-dashboard-container/responsibility-center/responsibility-center.component","ɵr":"./lib/create-dashboard-container/categories/categories.component","ɵs":"./lib/create-dashboard-container/risk-categories/risk-categories.component","ɵt":"./lib/create-dashboard-container/frequency/frequency.component","ɵu":"./lib/create-dashboard-container/pipes/filter.pipe","ɵv":"./lib/ui-kit/formgroup/formgroup.module","ɵw":"./lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component","ɵx":"./lib/ui-kit/formgroup/cs-radio/cs-radio.component","ɵy":"./lib/ui-kit/formgroup/cs-switch/cs-switch.component","ɵz":"./lib/ui-kit/formgroup/cs-radio-group/cs-radio-group.component","ɵba":"./lib/ui-kit/formgroup/cs-select/cs-select.component","ɵbb":"./lib/ui-kit/formgroup/pipes/pascal.pipe","ɵbc":"./lib/ui-kit/formgroup/pipes/searchMultiSelect.pipe","ɵbd":"./lib/ui-kit/formgroup/click-outside.directive","ɵbe":"./lib/ui-kit/tooltip/tooltip.module","ɵbf":"./lib/ui-kit/tooltip/tooltip.directive","ɵbg":"./lib/ui-kit/select/select.module","ɵbh":"./lib/ui-kit/select/cs-select/cs-select.component","ɵbi":"./lib/ui-kit/select/cs-option/cs-option.component","ɵbj":"./lib/ui-kit/services/cs-select.service","ɵbk":"./lib/ui-kit/select/safe-html.pipe","ɵbl":"./lib/ui-kit/dashboard-footer/dashboard-footer.module","ɵbm":"./lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component","ɵbn":"./lib/ui-kit/popover/popover.module","ɵbo":"./lib/ui-kit/popover/popover.component","ɵbp":"./lib/ui-kit/popover/popover.directive","ɵbq":"./lib/ui-kit/pagination/pagination.module","ɵbr":"./lib/ui-kit/pagination/pagination.component","ɵbs":"./lib/ui-kit/floating-bar/floating-bar.module","ɵbt":"./lib/ui-kit/floating-bar/floating-bar.component","ɵbu":"./lib/create-dashboard-container/configure-widgets/configure-widgets.module","ɵbv":"./lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component","ɵbw":"./lib/create-dashboard-container/pipes/search.pipe","ɵbx":"./lib/create-dashboard-container/directives/directives.module","ɵby":"./lib/create-dashboard-container/directives/scroll-in-view.directive","ɵbz":"./lib/ui-kit/no-data/no-data.module","ɵca":"./lib/ui-kit/no-data/no-data.component","ɵcb":"./lib/ui-kit/v-loader/v-loader.module","ɵcc":"./lib/ui-kit/v-loader/loader/loader.component","ɵcd":"./lib/ui-kit/v-loader/loader-inline/loader-inline.component","ɵce":"./lib/ui-kit/snack-bar/snack-bar.module","ɵcf":"./lib/ui-kit/snack-bar/snack-bar/snack-bar.component","ɵcg":"./lib/ui-kit/smiley-dialog/smiley-dialog.module","ɵch":"./lib/ui-kit/smiley-dialog/smiley-dialog.component"},"importAs":"create-dashboard"}
+{"__symbolic":"module","version":4,"metadata":{"CreateDashboardService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"CreateDashboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"app-create-dashboard","providers":[{"__symbolic":"reference","name":"ɵa"}],"template":"<app-snack-bar></app-snack-bar>\r\n<div class=\"create-dashboard\" *ngIf=\"!openConfigureWidgets\">\r\n    <div class=\"create-dashboard-container vx-d-flex vx-justify-end\" [class.animate-slideInRight]=\"animation\">\r\n        <div class=\"more-option\" *ngIf=\"activeSelector && activeSelector!=='name'\">\r\n            <app-user-list *ngIf=\"activeSelector==='whoCanView'\"\r\n                (saveSelectedUsers)=\"saveSelectedList('whoCanView',$event)\"\r\n                (closeUserList)=\"activateSelector('', false)\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"\r\n                [listDetails]=\"listDetails\"></app-user-list>\r\n            <app-responsibility-center *ngIf=\"activeSelector==='rcList'\"\r\n                [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"false\"\r\n                [selectedResponsibilityCenters]=\"dashboardForm.selectedResponsibilityCenters\" [rcIdKey]=\"'item_id'\"\r\n                (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activateSelector('', false)\">\r\n            </app-responsibility-center>\r\n            <app-categories *ngIf=\"activeSelector==='responsibilityCategories'\"\r\n                [categoryList]=\"responsibilityCategoriesTree\" [allCategories]=\"allComplianceCategories\"\r\n                [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"dashboardForm.selectedResponsibilityCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('responsibilityCategories',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-categories>\r\n            <app-risk-categories *ngIf=\"activeSelector==='riskCategories'\" [categoryList]=\"riskCategoryList\"\r\n                [allCategories]=\"allRiskCategories\" [categoryIdKey]=\"'category_id'\"\r\n                [selectedCategories]=\"dashboardForm.selectedRiskCategories\"\r\n                (saveSelectedCategory)=\"saveSelectedList('riskCategory',$event)\"\r\n                (closeCategoriesList)=\"activateSelector('', false)\"></app-risk-categories>\r\n\r\n            <app-frequency *ngIf=\"activeSelector==='frequency'\" (closeFrequencyPopup)=\"activateSelector('', false)\"\r\n                (saveFrequency)=\"saveFrequency($event)\" [savedFrequencyTab]=\"dashboardForm.selectedFrequencyType\"\r\n                [selectedDate]=\"dashboardForm.frequencyDate\" [savedFrequencies]=\"dashboardForm.selectedFrequencies\">\r\n            </app-frequency>\r\n        </div>\r\n        <div class=\"vx-dialog-container side-dialog\">\r\n\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n            <div class=\"form-group\" [class.disabled]=\"disabled\">\r\n                <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\" [class.hidden-scroll]=\"popoverService.stopScroll\">\r\n                    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/what.svg\"\r\n                                *ngIf=\"!dashboardForm.dashboardName || activeSelector === 'name'\" alt=\"\">\r\n                            <svg class=\"checkIcon\" *ngIf=\"dashboardForm.dashboardName && activeSelector !== 'name'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-16 vx-d-block vx-tt-uppercase vx-mt-1 vx-mb-1 vx-w-100 vx-text-left\">Dashboard Name<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardName\" (keydown)=\"activeSelector = 'name'\"\r\n                                        (focusin)=\"activateSelector('name',true)\"\r\n                                        (focusout)=\"activateSelector('name',false)\">\r\n                                    <span class=\"counter\" *ngIf=\"dashboardForm?.dashboardName?.length > 0\">{{30 -\r\n                                        dashboardForm.dashboardName.length}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted &&( dashboardForm?.dashboardName?.length>30 || !dashboardForm?.dashboardName)\">\r\n                                    {{(dashboardForm.dashboardName.length>30)?'You have exceeded the maximum character\r\n                                    limit of 30 characters.':'Please enter a name for this Dashboard.'}} </p>\r\n                                <div class=\"vx-input-group vx-mt-2\">\r\n                                    <marx-editor [editorConfig]=\"dashboardDescription\"\r\n                                        [(ngModel)]=\"dashboardForm.dashboardDescriptionText\"></marx-editor>\r\n                                    <span class=\"counter\"\r\n                                        *ngIf=\"dashboardForm?.dashboardDescriptionText?.length > 0\">{{250 -\r\n                                        (dashboardForm?.dashboardDescriptionText | textCount)}}</span>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\" [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm?.dashboardDescriptionText | textCount) > 250\">\r\n                                    You have exceeded the maximum character limit of 250 characters.\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'whoCanView'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'whoCanView' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img src=\"./assets/images/who.svg\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length==0 || activeSelector === 'whoCanView'\"\r\n                                alt=\"\">\r\n                            <svg class=\"checkIcon\"\r\n                                *ngIf=\"dashboardForm?.selectedViewers?.length>0 && activeSelector !== 'whoCanView'\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">Who can view this dashboard?<span class=\"require vx-txt-red vx-fs-16 vx-fw-400\">*</span></label>\r\n                                <div class=\"selectbox vx-fs-13 vx-fw-400 vx-paragraph-txt\" *ngIf=\"dashboardForm?.selectedViewers?.length==0\">\r\n                                    <input class=\"vx-fs-13 vx-fw-400 vx-lh-20 vx-pt-1 vx-pb-1 vx-pl-3 vx-pr-3 vx-bg-white vx-w-100 vx-paragraph-txt\" type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                                        (click)=\"activateSelector('whoCanView', true)\">\r\n                                </div>\r\n                                 <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedViewers?.length>0\"> \r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let user of dashboardForm?.selectedViewers?.slice(0,2)\"><i\r\n                                                    *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                <span class=\"value \">{{user.member_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedViewers?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"userList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedViewers?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'whoCanView'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('whoCanView',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div> \r\n                                <app-popover #userList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li *ngFor=\"let user of dashboardForm?.selectedViewers | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            *ngIf=\"!listDetails.nonRemovableUsersList.includes(user.member_id)\"\r\n                                                            (click)=\"remove('whoCanView',user)\">&#xe90d;</i>\r\n                                                        {{ user?.member_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rcList'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'rcList' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0 || activeSelector === 'rcList'\"\r\n                                src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0 && activeSelector !== 'rcList'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CENTER(S)</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('rcList', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rc.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCenters?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rcList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCenters?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'rcList'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('rcList',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rcList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rc of dashboardForm?.selectedResponsibilityCenters | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                                        {{ rc?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'responsibilityCategories'\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'responsibilityCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0 || activeSelector === 'responsibilityCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0 && activeSelector !== 'responsibilityCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RESPONSIBILITY CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txtnput\"\r\n                                        aria-placeholder=\"Select the Responsibility Category or Categories that this responsibility relates to.\"\r\n                                        (click)=\"activateSelector('responsibilityCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{rCategory.item_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\"\r\n                                            *ngIf=\"dashboardForm?.selectedResponsibilityCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"rCategoryList.popover()\"\r\n                                            placement=\"right\">+\r\n                                            {{dashboardForm?.selectedResponsibilityCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'responsibilityCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\"\r\n                                        type=\"button\" (click)=\"activateSelector('responsibilityCategories',true)\">\r\n                                        <i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #rCategoryList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let rCategory of dashboardForm?.selectedResponsibilityCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('responsibilityCategories',rCategory)\">&#xe90d;</i>\r\n                                                        {{ rCategory?.item_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'riskCategories'\"\r\n                        *ngIf=\"showRiskCategory && isManageRisk\"\r\n                        [class.disabled]=\" activeSelector && activeSelector !== 'riskCategories' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0 || activeSelector === 'riskCategories'\"\r\n                                src=\"./assets/images/category.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0 && activeSelector !== 'riskCategories'\"\r\n                                class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\" *ngIf=\"isManageRisk\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">RISK CATEGORIES</label>\r\n                                <div class=\"selectbox\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length==0\">\r\n                                    <div class=\"custom-input vx-bg-white vx-fs-13 vx-fw-400 vx-paragraph-txt\"\r\n                                        aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                                        (click)=\"activateSelector('riskCategories', true)\" [class.error]=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                                    dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                                     dashboardForm?.selectedRiskCategories?.length==0\"></div>\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-13 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5        \" *ngIf=\"dashboardForm?.selectedRiskCategories?.length>0\">\r\n                                    <div class=\"left\">\r\n                                        <div class=\"chip-container vx-d-flex vx-align-center\">\r\n                                            <span class=\"chip vx-txt-blue vx-fs-12 vx-fw-400 vx-w-100 vx-pl-2 vx-pr-2 vx-bg-white vx-d-flex\"\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories?.slice(0,2)\"><i\r\n                                                    class=\"icons vx-fs-10 vx-fw-400 vx-mr-2\"\r\n                                                    (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                <span class=\"value\">{{riskCategory.category_name}}</span></span>\r\n\r\n                                        </div>\r\n                                        <button class=\"count vx-txt-white vx-fw-500 vx-ml-1 vx-lh-5 vx-bg-blue\" *ngIf=\"dashboardForm?.selectedRiskCategories?.length > 2\"\r\n                                            type=\"button\" appPopover (click)=\"riskList.popover()\" placement=\"right\">+\r\n                                            {{dashboardForm?.selectedRiskCategories?.slice(2).length}}</button>\r\n                                    </div>\r\n                                    <button *ngIf=\"activeSelector !== 'riskCategories'\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('riskCategories',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n\r\n                                </div>\r\n                                <app-popover #riskList [dontCloseonClick]=\"true\">\r\n                                    <div class=\"action-list\">\r\n                                        <ul class=\"action-item\">\r\n                                            <li\r\n                                                *ngFor=\"let riskCategory of dashboardForm?.selectedRiskCategories | slice: 2; let j = index\">\r\n                                                <div class=\"avatar-card\">\r\n                                                    <span class=\"value\">\r\n                                                        <i class=\"icons\"\r\n                                                            (click)=\"remove('riskCategory',riskCategory)\">&#xe90d;</i>\r\n                                                        {{ riskCategory?.category_name }}\r\n                                                    </span>\r\n                                                </div>\r\n                                            </li>\r\n                                        </ul>\r\n                                    </div>\r\n                                </app-popover>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\"  [class.disabled]=\" activeSelector && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"dashboardForm?.displayCriteria?.length==0\" src=\"./assets/images/who.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm?.displayCriteria?.length>0 \" class=\"checkIcon\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">DISPLAY CRITERIA</label>\r\n                                <div class=\"radio-group\" *ngIf=\"showCriteria\" >\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='or'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='or'\">\r\n                                    Those Items that have been assigned to either the selected Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n\r\n                                    <app-cs-radio [checked]=\"dashboardForm.displayCriteria=='and'\"\r\n                                    (checkedEvent)=\"dashboardForm.displayCriteria='and'\">\r\n                                    Those Items that have been assigned to both the selected Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                                   \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" \r\n                    [class.disabled]=\" activeSelector  && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img  *ngIf=\"!dashboardForm?.selectedFromDate || !dashboardForm?.selectedToDate\" src=\"./assets/images/when.svg\" alt=\"\">\r\n                            <svg  *ngIf=\"dashboardForm?.selectedFromDate && dashboardForm?.selectedToDate\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">TIMEFRAME</label>\r\n                                <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                                    selected to be displayed for. If no timeframe is selected, the information will be\r\n                                    displayed permanently.</label>\r\n                                <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                                    <div class=\"date-select\">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\"\r\n                                            [value]=\"dashboardForm?.selectedFromDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'From'\" (click)=\"openFromDatePicker()\" readonly>\r\n                                        <dp-date-picker #fromDatePicker [(ngModel)]=\"dashboardForm.selectedFromDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"date-select\" *ngIf=\"!hideToDate\" [class.disabled]=\"!dashboardForm?.selectedFromDate \">\r\n                                        <i class=\"icons\">&#xe92d;</i>\r\n                                        <input type=\"text\" [value]=\"dashboardForm?.selectedToDate | date: 'dd MMM yyyy'\"\r\n                                            [placeholder]=\"'To'\" (click)=\"openToDatePicker()\" readonly>\r\n                                        <dp-date-picker #toDatePicker [(ngModel)]=\"dashboardForm.selectedToDate\"\r\n                                            placeholder=\"Select Date\"\r\n                                            (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"\r\n                                            [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                                        <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\">\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <p class=\"vx-txt-error\"  [appScrollInView]=\"true\"\r\n                                    *ngIf=\"submitted && (dashboardForm.selectedFromDate && (!dashboardForm.selectedToDate))\">\r\n                                    Select a time-frame.</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" \r\n                    [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && activeSelector !== 'name'\">\r\n                        <div class=\"image\">\r\n                            <img *ngIf=\"!dashboardForm.frequencyMessage\" src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n                            <svg *ngIf=\"dashboardForm.frequencyMessage\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"form\">\r\n                            <div class=\"vx-form-group vx-d-block vx-mb-4\">\r\n                                <label class=\"vx-control-panel vx-fs-11 vx-fw-500 vx-lh-4 vx-d-block vx-mb-2 vx-tt-uppercase vx-w-100 vx-text-left vx-label-txt vx-mt-1\">\r\n                                    Email Summaries </label>\r\n                                <label class=\"vx-control-panel-sub-label\">\r\n                                    If you would like to send a summary of this Dashboard,\r\n                                    please select a frequency(By default VComply sends a weekly Summary).\r\n                                </label>\r\n                                <div class=\"selectbox\" *ngIf=\"!dashboardForm.frequencyMessage\">\r\n                                    <input type=\"text\" placeholder=\"Email Summaries\" readonly\r\n                                        (click)=\"activateSelector('frequency', true)\">\r\n                                </div>\r\n                                <div class=\"selected vx-p-2 vx-fs-14 vx-fw-400 vx-w-100 vx-d-flex vx-text-center vx-justify-between vx-paragraph-txt vx-lh-5\" *ngIf=\"dashboardForm.frequencyMessage\">\r\n                                    <div class=\"left frequency-left vx-text-left \" [innerHTML]=\"dashboardForm.frequencyMessage\"  [arTooltip]=\"dashboardForm.frequencyMessage\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                                    </div>\r\n\r\n                                    <button *ngIf=\"dashboardForm.frequencyMessage\" class=\"edit vx-tt-uppercase vx-fs-11 vx-fw-500 vx-pt-0 vx-pb-0 vx-pl-1 vx-pr-1 vx-d-block vx-txt-blue vx-d-block\" type=\"button\"\r\n                                        (click)=\"activateSelector('frequency',true)\"><i class=\"icons vx-fs-8 vx-fw-400 vx-mr-1\">&#xe9ba;</i>\r\n                                        Edit</button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"button-block\">\r\n                    <button class=\"vx-btn block primary\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"configureDashboard()\">Next:\r\n                        Configure\r\n                        Widgets</button>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <button class=\"close-dialog\" type=\"button\" [disabled]=\"activeSelector && activeSelector !== 'name'\" (click)=\"close.emit({mode:'discard'})\" [arTooltip]=\"'[Esc] to close'\" placement=\"left\" type=\"black\" delay=\"0\" [tooltipMandatory] =\"true\">\r\n                <i class=\"icons\">&#xe93f;</i>\r\n            </button>\r\n            <div class=\"global-confirmation-alert\" *ngIf=\"submitted && dashboardForm?.selectedResponsibilityCenters?.length==0 && \r\n                dashboardForm?.selectedResponsibilityCategories?.length==0 &&\r\n                 dashboardForm?.selectedRiskCategories?.length==0\">\r\n                <div class=\"global-confirmation-alert-top\">\r\n                    <span class=\"icon-block\">\r\n                        <i class=\"icons\">&#xe930;</i>\r\n                    </span>\r\n                    <p class=\"text\" *ngIf=\"showRiskCategory\">Select a Responsibility Center, Responsibility Category or Risk Category.</p>\r\n                    <p class=\"text\" *ngIf=\"!showRiskCategory\">Select a Responsibility Center or Responsibility Category.</p>\r\n\r\n                </div>\r\n                <div class=\"global-confirmation-alert-bottom\">\r\n                    <p class=\"message\"></p>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"fill\" type=\"button\" (click)=\"submitted=false\">OKAY</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-smiley-dialog \r\n    *ngIf=\"isSmiley\"\r\n    [message]=\"smileyMessage\">\r\n</app-smiley-dialog>\r\n\r\n<app-configure-widgets *ngIf=\"openConfigureWidgets\" [mode]=\"mode\" [displayedWidgets]=\"displayedWidgets\"\r\n [showRisk]=\"showRiskWidgets\" [showCompliance]=\"showComplianceWidgets\" [selectedWidgetsData]=\"selectedWidgets\"\r\n    (widgetsDataModified)=\"setSelectedWidgets($event)\" (closeConfigureWidgets)=\"closeConfigureWidgets($event)\">\r\n</app-configure-widgets>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");::ng-deep .create-dashboard-container{width:100vw;background:#161b2fcc}::ng-deep .create-dashboard .more-option{width:calc(100% - 500px);border-right:1px solid #f1f1f1;float:left}::ng-deep .create-dashboard .vx-dialog-container{background-color:#fff;border:none;position:relative}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog{display:flex;position:absolute;top:0;right:0;height:36px;width:36px;font-size:18px;color:#161b2f;cursor:pointer;background:#0000;border:none;border-radius:4px;z-index:2;align-items:center;justify-content:center}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:hover{background:#f1f1f1}::ng-deep .create-dashboard .vx-dialog-container button.close-dialog:disabled{pointer-events:none;filter:grayscale(1);opacity:.3}::ng-deep .form-group{position:relative}::ng-deep .form-group .vx-dialog-body-container{padding:36px 28px 0 40px!important;height:calc(100vh - 50px);overflow:auto;margin-left:-22px;background-color:initial;position:relative;border-radius:0 0 0 30px;background:#0000}@-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 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{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:1px solid #707070;border-top:none;border-left: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{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 .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:#0000;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{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{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{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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 marx-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 marx-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{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:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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{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{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{height:22px;width:22px}::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{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{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 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:.3}::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:unset;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:after{content:\"\";width:100%;display:block;height:30px;position:sticky;right:0;bottom:0;left:0;z-index:6;background:linear-gradient(180deg,#fff0 0,#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;top:0;right:0;bottom:0;left: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:#0000;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:#0000;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:#0000;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:5px}.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:#0000;color:#fff;border-color:#fff}"]}]}],"members":{"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"dashboardId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"createdBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"fromDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["fromDatePicker"]}]}],"toDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":3},"arguments":["toDatePicker"]}]}],"configureWidget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":149,"character":17},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵa"}]}],"ngOnChanges":[{"__symbolic":"method"}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":162,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"activateSelector":[{"__symbolic":"method"}],"openFromDatePicker":[{"__symbolic":"method"}],"openToDatePicker":[{"__symbolic":"method"}],"closeFromDatePicker":[{"__symbolic":"method"}],"closeToDatePicker":[{"__symbolic":"method"}],"animateImage":[{"__symbolic":"method"}],"saveFrequency":[{"__symbolic":"method"}],"getCurrentDate":[{"__symbolic":"method"}],"setToDate":[{"__symbolic":"method"}],"getFromDate":[{"__symbolic":"method"}],"configureDashboard":[{"__symbolic":"method"}],"getOrganizationUsersCount":[{"__symbolic":"method"}],"getUsersList":[{"__symbolic":"method"}],"getComplianceCategoryList":[{"__symbolic":"method"}],"saveSelectedCategory":[{"__symbolic":"method"}],"getCategoryList":[{"__symbolic":"method"}],"checkWhetherAllListsLoaded":[{"__symbolic":"method"}],"setSelectedWidgets":[{"__symbolic":"method"}],"closeConfigureWidgets":[{"__symbolic":"method"}],"paginationFilter":[{"__symbolic":"method"}],"getRCList":[{"__symbolic":"method"}],"saveSelectedList":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"returnIds":[{"__symbolic":"method"}],"validateDashboard":[{"__symbolic":"method"}],"submitDashboard":[{"__symbolic":"method"}],"editDashboard":[{"__symbolic":"method"}],"populateDashboardForm":[{"__symbolic":"method"}],"setFrequency":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"setPermission":[{"__symbolic":"method"}]}},"CreateDashboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":32,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CreateDashboardComponent"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":45,"character":4},{"__symbolic":"reference","module":"vcomply-editor","name":"MarxEditorModule","line":46,"character":4},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","module":"ng2-date-picker","name":"DpDatePickerModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":49,"character":4},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbl"},{"__symbolic":"reference","name":"ɵbq"},{"__symbolic":"reference","name":"ɵbs"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵbu"},{"__symbolic":"reference","name":"ɵbn"},{"__symbolic":"reference","name":"ɵcb"},{"__symbolic":"reference","name":"ɵce"},{"__symbolic":"reference","name":"ɵbz"},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵcg"}],"exports":[{"__symbolic":"reference","name":"CreateDashboardComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["environmentConfig"],"value":{"ngModule":{"__symbolic":"reference","name":"CreateDashboardModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵd"},"useValue":{"__symbolic":"reference","name":"environmentConfig"}}]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"textCount"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":18,"character":39}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":17,"character":28},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}]}],"getOrganizationUsers":[{"__symbolic":"method"}],"getOrganizationUsersCount":[{"__symbolic":"method"}],"getCategoryList":[{"__symbolic":"method"}],"getAllUsers":[{"__symbolic":"method"}],"getResponsibilityCenterList":[{"__symbolic":"method"}],"getComplianceCategoriesList":[{"__symbolic":"method"}],"submitDashboard":[{"__symbolic":"method"}],"fetchDashboard":[{"__symbolic":"method"}],"updateDashboard":[{"__symbolic":"method"}],"getUserInformation":[{"__symbolic":"method"}],"_ID":[{"__symbolic":"method"}],"checkDuplicateDashboardName":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":13,"character":41}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":13,"character":28},{"__symbolic":"reference","name":"ɵd"}]}],"getAuthorizationToken":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵd":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setCurrentState":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"show":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":20,"character":6}}]],"parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":18,"character":18},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}]}],"dashBoardWidgetUpdate":[{"__symbolic":"method"}],"moduleType":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-user-list","template":"<div class=\"user-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"user-list-head\">\r\n        <h3>Who can view this dashboard?</h3>\r\n    </div>\r\n    <div class=\"user-list-body\">\r\n        <div class=\"user-list-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\"  placeholder=\"Search User(s) who can view this dashboard\" (keyup.enter)=\"setSearchValue()\" (focusout)=\"setSearchValue()\">\r\n        </div>\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-end\" *ngIf=\"!searchValue\">\r\n            <div class=\"pagination-box\" *ngIf=\"totalPages>1 && searchList.length>1\">             \r\n                <app-pagination  (paginationFilter)=\"paginationFilter($event)\" [limit]=\"limit\" [totalPages]=\"totalPages\" [totalList]=\"totalList\"></app-pagination>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-list-body-top\">\r\n            <app-cs-checkbox *ngIf=\"!searchValue && searchList.length>1\" [ngValue]=\"selectedList.length == totalList\" (ngValueChange)=\"selectAllUsers($event)\">\r\n                <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n            </app-cs-checkbox>\r\n            <app-cs-checkbox *ngIf=\"searchValue && searchList.length>1\" [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                <strong>{{((selectedList.length == totalList) ? 'Deselect All':'Select All')}}</strong>\r\n            </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"list-of-user\">\r\n            <ul class=\"selection-list\" [class.with-pagination]=\"totalPages>1\">\r\n                <li *ngFor=\"let data of searchList; let i = index\">\r\n                    <app-cs-checkbox [disabled]=\"listDetails.nonRemovableUsersList.includes(data[listDetails.elementIdKey])\" [ngValue]=\"selectedList.length>0 && selectedIds.includes(data[listDetails.elementIdKey])\"\r\n                        (ngValueChange)=\"selectElement(data)\" [arTooltip]=\"data[listDetails.tooltipKey]\" placement=\"bottom-left\"\r\n                        delay=\"0\" [tooltipMandatory]=\"true\"\r\n                        > {{data[listDetails.displayElementKey]}}</app-cs-checkbox>\r\n                </li>\r\n                <!-- appTooltip=\"{{data[listDetails.tooltipKey]}}\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"false\" -->\r\n            </ul>\r\n\r\n            <app-no-data  *ngIf=\"!vLoader && searchList.length == 0\"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n            </app-no-data>\r\n            <app-loader-inline *ngIf=\"vLoader\"></app-loader-inline>\r\n\r\n        </div>\r\n       \r\n\r\n    </div>\r\n    <div class=\"user-list-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeUserList.emit()\"\r\n         (deleteEvent) =\"selectElement($event)\"\r\n         (submitEvent)=\"onSubmit()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n\r\n</div>\r\n\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .user-list{background:#fff}::ng-deep .user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .user-list-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px);position:relative}::ng-deep .user-list-body-top{display:flex;justify-content:space-between;padding:0 0 20px}::ng-deep .user-list-body-top app-cs-checkbox{display:flex}::ng-deep .user-list-body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .user-list-body ul.selection-list{padding:0;display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);overflow:auto;margin:0}::ng-deep .user-list-body ul.selection-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-list-body ul.selection-list.with-pagination{max-height:calc(100vh - 270px)}::ng-deep .user-list-body ul.selection-list li{width:50%;padding:0 20px 20px 0;list-style:none}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox,::ng-deep .user-list-body ul.selection-list li app-cs-radio{display:flex}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label,::ng-deep .user-list-body ul.selection-list li app-cs-radio label{width:100%}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.name,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.manager{background:#d4e2fc;color:#4681ef}::ng-deep .user-list-body ul.selection-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .user-list-body ul.selection-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .user-list-footer{height:70px}::ng-deep .user-list-search{position:relative;margin-bottom:8px}::ng-deep .user-list-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-list-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}"]}]}],"members":{"closeUserList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"saveSelectedUsers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"selectionType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"listDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"totalPages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"totalList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"cancelChanges":[{"__symbolic":"method"}],"removeElement":[{"__symbolic":"method"}],"submitChanges":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"selectAllUsers":[{"__symbolic":"method"}],"selectElement":[{"__symbolic":"method"}],"setSearchValue":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"paginationFilter":[{"__symbolic":"method"}],"getUsersList":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"app-form-group","template":"<!-- <p>form-group works!</p> -->\r\n<div class=\"form-group\" [class.disabled]=\"disabled\">\r\n    <div class=\"vx-dialog-body-container\" (scroll)=\"animateImage()\">\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/what.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Dashboard Name<span class=\"required\">*</span></label>\r\n                    <div class=\"vx-input-group\">\r\n                        <input type=\"text\" placeholder=\"Add dashboard name (Max limit: 30 characters).\" [(ngModel)]=\"dashboardName\">\r\n                        <span class=\"counter\" *ngIf=\"dashboardName?.length > 0\">{{30 - dashboardName?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardNameError}}</p>\r\n                    <div class=\"vx-input-group\">\r\n                        <marx-editor [editorConfig]=\"dashboardDescription\" [(ngModel)]=\"dashboardDescriptionText\"></marx-editor>\r\n                        <span class=\"counter\" *ngIf=\"dashboardDescriptionText?.length > 0\">{{250 - dashboardDescriptionText?.length}}</span>\r\n                    </div>\r\n                    <p class=\"vx-txt-error\">{{dashboardDescriptionError}}</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who can view this dashboard?<span class=\"required\">*</span></label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Who can view this dashboard?\" readonly\r\n                            (click)=\"selectWhoCanViewThis()\">\r\n                    </div>\r\n                    <div class=\"selected\">\r\n                        <div class=\"left\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"chip\">\r\n                                    <span class=\"value\">Samantha Jones</span>\r\n                                </span>\r\n                                <span class=\"chip\">\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                    <span class=\"value\">Angel Kleven</span>\r\n                                </span>\r\n                            </div>\r\n                            <button class=\"count\">+10</button>\r\n                        </div>\r\n                        <button class=\"edit\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/responsibility-center.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">RESPONSIBILITY CENTER(S)</label>\r\n                    <div class=\"selectbox\">\r\n                        <div class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Responsibility Center(s) that you would like displayed in the Dashboard, if any.\"\r\n                            (click)=\"selectResponsibilityCenter()\">\r\n                        </div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/category.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">RESPONSIBILITY CATEGORIES</label>\r\n                    <div class=\"selectbox\">\r\n                        <div class=\"custom-input\"\r\n                            aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\"\r\n                            (click)=\"selectCategories()\"></div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/category.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">RISK CATEGORIES</label>\r\n                    <div class=\"selectbox\">\r\n                        <div class=\"custom-input\"\r\n                            aria-placeholder=\"Select the Risk Categories that you would like displayed in the Dashboard, if any.\"\r\n                            (click)=\"selectCategories()\"></div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/who.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">DISPLAY CRITERIA</label>\r\n                    <div class=\"radio-group\">\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'BOTH_RC_AND_CATEGORY')\">Those responsibilities that have been assigned to both the selected\r\n                            Responsibility Center(s) and the selected Categories.</app-cs-radio>\r\n                        <app-cs-radio (checkedEvent)=\"displayCriteriaSelected($event, 'RC_OR_CATEGORY')\">Those responsibilities that have been assigned to either the selected\r\n                            Responsibility Center(s) or the selected Categories.</app-cs-radio>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/when.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">TIMEFRAME</label>\r\n                    <label class=\"vx-control-panel-sub-label\">Select how long you would like the information\r\n                        selected to be displayed for. If no timeframe is selected, the information will be\r\n                        displayed permanently.</label>\r\n                    <div class=\"input-group vx-d-flex vx-justify-between\">\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedFromDate | date: 'dd MMM yyyy'\" [placeholder]=\"'From'\"\r\n                                (click)=\"openFromDatePicker()\" readonly>\r\n                            <dp-date-picker #fromDatePicker [(ngModel)]=\"selectedFromDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeFromDatePicker(); datePickerOverlay = false\" [config]=\"fromDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeFromDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                        <div class=\"date-select\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" [value]=\"selectedToDate | date: 'dd MMM yyyy'\" [placeholder]=\"'To'\"\r\n                                (click)=\"openToDatePicker()\" readonly>\r\n                            <dp-date-picker #toDatePicker [(ngModel)]=\"selectedToDate\" placeholder=\"Select Date\"\r\n                                (onSelect)=\"closeToDatePicker(); datePickerOverlay = false\"  [config]=\"toDatePickerConfig\"></dp-date-picker>\r\n                            <div class=\"overlay\" (click)=\"closeToDatePicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\">\r\n            <!--active class will appear on open list-->\r\n            <div class=\"image\">\r\n                <img src=\"./assets/images/send-resolution.svg\" alt=\"\">\r\n            </div>\r\n            <div class=\"form\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Email Summaries <i class=\"icons\" [arTooltip]=\"'This is a test tooltip'\" placement=\"bottom-left\"\r\n                            type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n                    <label class=\"vx-control-panel-sub-label\">\r\n                        If you would like to send a summary of this Dashboard,\r\n                        please select a frequency(By default VComply sends a weekly Summary).\r\n                    </label>\r\n                    <div class=\"selectbox\">\r\n                        <input type=\"text\" placeholder=\"Email Summaries\" readonly (click)=\"selectFrequency()\">\r\n                    </div>\r\n                    <!-- <p class=\"vx-txt-error\">Enter a value for this input box.</p> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"button-block\">\r\n        <button class=\"vx-btn block primary\" [disabled]=\"disabled\" (click)=\"configureDashboard()\">Next: Configure\r\n            Widgets</button>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/dialog/dialog.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"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:initial;position:relative;border-radius:0 0 0 30px;background:#0000}::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{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:1px solid #707070;border-top:none;border-left: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{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:#0000;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{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{display:block}::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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 marx-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 marx-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{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:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .form-group .vx-dialog-body-container .form-group-row .form marx-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{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{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{height:22px;width:22px}::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{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{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(180deg,#fff0 0,#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;top:0;right:0;bottom:0;left:0;background:#fff;opacity:.7}::ng-deep .form-group.disabled .form{opacity:.3;filter:grayscale(1)}"]}]}],"members":{"openCategoryList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"openResponsibilityCenterList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"openWhoCanViewThis":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"closeCreateDashboard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"openFrequency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"fromDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["fromDatePicker"]}]}],"toDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":20,"character":3},"arguments":["toDatePicker"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵk"}]}],"ngOnInit":[{"__symbolic":"method"}],"openFromDatePicker":[{"__symbolic":"method"}],"openToDatePicker":[{"__symbolic":"method"}],"closeFromDatePicker":[{"__symbolic":"method"}],"closeToDatePicker":[{"__symbolic":"method"}],"animateImage":[{"__symbolic":"method"}],"selectWhoCanViewThis":[{"__symbolic":"method"}],"selectResponsibilityCenter":[{"__symbolic":"method"}],"selectCategories":[{"__symbolic":"method"}],"selectFrequency":[{"__symbolic":"method"}],"configureDashboard":[{"__symbolic":"method"}],"verifyFields":[{"__symbolic":"method"}],"getCurrentDate":[{"__symbolic":"method"}],"displayCriteriaSelected":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":{"__symbolic":"reference","name":"ɵl"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":13,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":13,"character":90},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":13,"character":124}]}],"open":[{"__symbolic":"method"}],"appendDialogComponentToBody":[{"__symbolic":"method"}],"removeDialogComponentFromBody":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"declarations":[{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"}],"entryComponents":[{"__symbolic":"reference","name":"ɵm"}],"providers":[{"__symbolic":"reference","name":"ɵo"}]}]}],"members":{}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"app-dialog","template":"<div\r\n  class=\"overlay\"\r\n  (click)=\"onOverlayClicked($event)\"\r\n  [ngClass]=\"{\r\n    top: position === 'TOP',\r\n    right: position === 'RIGHT',\r\n    bottom: position === 'BOTTOM',\r\n    left: position === 'LEFT',\r\n    center: position === 'CENTER',\r\n    black: background === 'black'\r\n  }\" [class.pointer-none]=\"pointer === 'none'\"\r\n>\r\n  <div\r\n    class=\"dialog\"\r\n    [class.animate]=\"animation\"\r\n    (click)=\"onDialogClicked($event)\"\r\n    [ngClass]=\"{\r\n      top: position === 'TOP',\r\n      right: position === 'RIGHT',\r\n      bottom: position === 'BOTTOM',\r\n      left: position === 'LEFT',\r\n      center: position === 'CENTER'\r\n    }\"\r\n  >\r\n    <ng-template appInsertion></ng-template>\r\n  </div>\r\n</div>\r\n","styles":[".overlay{display:flex;position:fixed;top:0;bottom:0;left:0;right: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:translateX(100%)}to{transform:translateX(0)}}.pointer-none{pointer-events:none}"]}]}],"members":{"insertionPoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":17,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵn"},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":27,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":28,"character":16},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":31,"character":20}]}],"ngOnInit":[{"__symbolic":"method"}],"routeAction":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onOverlayClicked":[{"__symbolic":"method"}],"onDialogClicked":[{"__symbolic":"method"}],"loadChildComponent":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[appInsertion]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":6,"character":39}]}]}},"ɵo":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"close":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","arity":1,"members":{}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-responsibility-center","template":"<div class=\"responsibility-center\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"responsibility-center-head\">\r\n        <h3>Select Responsibility Center(s)</h3>\r\n    </div>\r\n    <div class=\"responsibility-center-body\">\r\n        <div class=\"responsibility-center-search\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Center\">\r\n        </div>\r\n        <ng-container *ngIf=\"(responsibilityCentersList | filter:search) as searchList\">\r\n\r\n            <div class=\"select-all\" *ngIf=\"searchList.length>1\">\r\n                <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                    <strong>{{checkSelectAll() ? 'Deselect All' : 'Select All'}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <ul class=\"responsibility-center-list\" *ngIf=\"searchList.length > 0\">\r\n\r\n                <li\r\n                    *ngFor=\"let rc of searchList; let i = index\">\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(rc.item_id)\" (ngValueChange)=\"selectRc(rc.item_id,$event)\">\r\n                        <ul class=\"responsibility-center-list-name\">\r\n                            <li *ngFor=\"let entity of rc.rc_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\"\r\n                                    delay=\"0\">\r\n                                <i class=\"icons\"  *ngIf=\"j !== 0\">&#xe910;</i>\r\n                                {{entity}}\r\n                                <!-- <span class=\"name\">{{entity}}</span> -->\r\n                                </li> \r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n                \r\n            </ul>\r\n            <app-no-data  *ngIf=\"searchList.length == 0\"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n            </app-no-data>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"responsibility-center-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails] =\"footerDetails\"\r\n        (cancelEvent)=\"closeRcList.emit()\"\r\n         (deleteEvent) =\"selectRc($event.item_id,false)\"\r\n         (submitEvent)=\"save()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .responsibility-center{background:#fff}::ng-deep .responsibility-center-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f1f1;border-right:none}::ng-deep .responsibility-center-head h3{color:#161b2f;font-size:15px;font-weight:500;margin:0;padding:0;line-height:21px}::ng-deep .responsibility-center-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .responsibility-center-body .select-all{display:flex;padding-bottom:20px}::ng-deep .responsibility-center-body .select-all app-cs-checkbox{display:flex}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value{font-weight:600!important;max-width:unset!important}::ng-deep .responsibility-center-body .select-all app-cs-checkbox label span.value strong{color:#161b2f!important;font-weight:600!important}::ng-deep .responsibility-center-body ul{padding:0;margin:0}::ng-deep .responsibility-center-body ul.responsibility-center-list{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 230px);min-height:calc(100vh - 230px);overflow:auto}::ng-deep .responsibility-center-body ul.responsibility-center-list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .responsibility-center-body ul.responsibility-center-list li{width:100%;padding:0 0 20px;list-style:none}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio{display:flex}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label{width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox label span.value,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;width:auto;padding:0 8px 0 0;max-width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li i,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li i{font-size:8px;padding-right:8px;color:#747576;position:relative;top:-1px}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li span.name,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li span.name{list-style:none;color:#747576;font-size:14px;font-weight:400;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:auto;min-width:calc(100% - 20px);padding:0}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:first-child,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-checkbox ul.responsibility-center-list-name li:last-of-type,::ng-deep .responsibility-center-body ul.responsibility-center-list li app-cs-radio ul.responsibility-center-list-name li:last-of-type{color:#66bf72}::ng-deep .responsibility-center-footer{height:70px}::ng-deep .responsibility-center-search{position:relative;margin-bottom:8px}::ng-deep .responsibility-center-search i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#dbdbdb}::ng-deep .responsibility-center-search input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .responsibility-center-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.pagination-box{margin-bottom:20px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:6px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}"]}]}],"members":{"saveSelectedList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"closeRcList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"responsibilityCentersList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"selectedResponsibilityCenters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"rcIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"radioSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectRc":[{"__symbolic":"method"}],"deleteEvent":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"closeResponsibilityCenterList":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-categories","template":"<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Responsibility Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n                <div class=\"left\">\r\n                  <label>REGULATIONS</label>\r\n                  <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n                    {{categoryList?.regulations?.selectedList?.length}}\r\n                    {{(categoryList?.regulations?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n                <div class=\"left\">\r\n                  <label>STANDARDS</label>\r\n                  <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n                    {{categoryList?.standards?.selectedList?.length}}\r\n                    {{(categoryList?.standards?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n                (click)=\"activeTab = 'internalControls'\">\r\n                <div class=\"left\">\r\n                  <label>INTERNAL CONTROLS</label>\r\n                  <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n                    {{categoryList?.internalControls?.selectedList?.length}}\r\n                    {{(categoryList?.internalControls?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Category\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                            <li *ngFor=\"let entity of category.category_name; let j = index\" [arTooltip]=\"entity\" placement=\"bottom-left\" delay=\"0\">\r\n                                {{entity}}\r\n                            </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .category-list{background:#fff}::ng-deep .category-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:#0000;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#fff;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value{max-width:unset!important}::ng-deep .category-list-mid .select-all app-cs-checkbox .checkbox-item .value strong{font-weight:600;color:#161b2f}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}"]}]}],"members":{"categoryList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"allCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"categoryIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"selectedCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"saveSelectedCategory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"closeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"closeCategoriesList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectCategory":[{"__symbolic":"method"}],"deleteEvent":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"setActiveTab":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-risk-categories","template":"<div class=\"category-list\" [class.animate-slideInRight]=\"animation\">\r\n    <div class=\"category-list-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <span class=\"vx-fw-500 vx-label-txt vx-lh-5\">Select Risk Category(s)</span>\r\n        <!-- <button class=\"vx-d-flex vx-align-center vx-label-txt vx-tt-uppercase vx-fw-500 vx-p-0\"><i class=\"icons\">&#xeb29;</i> Back</button> -->\r\n    </div>\r\n    <div class=\"category-list-mid\">\r\n        <!-- <div class=\"category-list-tab\">\r\n            <ul>\r\n                <li class=\"active\"><button>Compliance<span>98</span></button></li>\r\n                <li><button>Risks<span>120</span></button></li>\r\n                <li><button>Audit<span>28</span></button></li>\r\n                <li><button>Policy<span>45</span></button></li>\r\n            </ul>\r\n        </div> -->\r\n        \r\n        <div class=\"vx-d-flex vx-mb-2\">\r\n        \r\n            <div class=\"category-list-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n                <div class=\"left\">\r\n                  <label>strategic</label>\r\n                  <p *ngIf=\"categoryList?.strategic?.selectedList?.length != 0\">\r\n                    {{categoryList?.strategic?.selectedList?.length}}\r\n                    {{(categoryList?.strategic?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.strategic?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n                <div class=\"left\">\r\n                  <label>operational</label>\r\n                  <p *ngIf=\"categoryList?.operational?.selectedList?.length != 0\">\r\n                    {{categoryList?.operational?.selectedList?.length}}\r\n                    {{(categoryList?.operational?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.operational?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'compliance'\"\r\n                (click)=\"activeTab = 'compliance'\">\r\n                <div class=\"left\">\r\n                  <label>compliance</label>\r\n                  <p *ngIf=\"categoryList?.compliance?.selectedList?.length != 0\">\r\n                    {{categoryList?.compliance?.selectedList?.length}}\r\n                    {{(categoryList?.compliance?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.compliance?.list?.length}}</span>\r\n              </div>\r\n              <div class=\"category-list-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n                <div class=\"left\">\r\n                  <label>OTHERS</label>\r\n                  <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n                    {{categoryList?.others?.selectedList?.length}}\r\n                    {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n                  </p>\r\n                </div>\r\n                <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n              </div>\r\n        </div>\r\n        \r\n        <div class=\"search\">\r\n          <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n          <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n        </div>\r\n\r\n    <ng-container *ngIf=\"(categoryList[activeTab]?.list | filter: search) as searchList\">\r\n        <div class=\"select-all\" *ngIf=\"searchList.length > 1\">\r\n            <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n                <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n              </app-cs-checkbox>\r\n        </div>\r\n        <div class=\"category-list-item\" *ngIf=\"searchList.length > 0\">\r\n            <ul class=\"category-list-item-ul vx-m-0 vx-p-0\">\r\n                <li class=\"vx-mb-5\" *ngFor=\"let category of searchList\" >\r\n                    <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n                    (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n                        <ul class=\"categories\">\r\n                          <li [arTooltip]=\"category.category_name\" placement=\"bottom-left\" delay=\"0\">{{category.category_name}}</li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <app-no-data  *ngIf=\"searchList.length == 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </ng-container>\r\n    </div>\r\n    <app-dashboard-footer \r\n    [footerDetails] =\"footerDetails\"\r\n    (cancelEvent)=\"close()\"\r\n     (deleteEvent) =\"deleteEvent($event)\"\r\n     (submitEvent)=\"save()\"\r\n      ></app-dashboard-footer>\r\n</div>\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .category-list{background:#fff}::ng-deep .category-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .category-list-head span{font-size:14px}::ng-deep .category-list-head button{background:#0000;border-radius:0;border:none}::ng-deep .category-list-head button i{margin:-1px 4px 0 0}::ng-deep .category-list-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 12px 12px 16px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-card .left{display:flex;flex-wrap:wrap;pointer-events:none}::ng-deep .category-list-card .left label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%}::ng-deep .category-list-card .left p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;line-height:32px;justify-content:center;align-items:center;padding:0 5px;pointer-events:none}::ng-deep .category-list-card.active{box-shadow:0 3px 6px #1e5dd326}::ng-deep .category-list-card+.category-list-card{margin-left:4px}::ng-deep .category-list-mid{background:#fff;height:calc(100vh - 112px);border-radius:0 0 1px 1px;padding:24px 36px 4px;overflow-y:auto}::ng-deep .category-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-mid .category-card .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .category-list-mid .search{position:relative;margin-bottom:8px}::ng-deep .category-list-mid .search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .category-list-mid .search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .category-list-mid .search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .category-list-mid .pagination-box{margin-bottom:16px}::ng-deep .category-list-mid .pagination-box ul{display:flex;align-items:center;padding:0;margin:0}::ng-deep .category-list-mid .pagination-box ul li{list-style:none;display:flex}::ng-deep .category-list-mid .pagination-box ul li:first-child{margin-right:4px;height:24px}::ng-deep .category-list-mid .pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li:last-child{margin-left:6px!important;height:24px}::ng-deep .category-list-mid .pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}::ng-deep .category-list-mid .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;margin-left:4px;font-size:13px}::ng-deep .category-list-mid .pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .category-list-mid .select-all{display:flex;padding-bottom:20px}::ng-deep .category-list-mid .select-all app-cs-checkbox{display:flex}::ng-deep .category-list-item ul.category-list-item-ul{list-style-type:none;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 295px);min-height:calc(100vh - 295px);overflow:auto;padding:16px 0 0}::ng-deep .category-list-item ul.category-list-item-ul::-webkit-scrollbar-track{background-color:#fff}::ng-deep .category-list-item ul.category-list-item-ul li{list-style:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio{display:flex}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label{width:100%}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value{width:auto;justify-content:flex-start}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories{display:flex;max-width:100%;padding:0;margin:0;justify-content:flex-start;width:auto}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li{display:block;padding:0 8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#747576}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:after{content:\">\";position:absolute;top:0;right:0;color:#747576;font-size:13px}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type{color:#34aa44}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:last-of-type:after,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:last-of-type:after{display:none}::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-checkbox label.radio-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.checkbox-item span.value ul.categories li:first-of-type,::ng-deep .category-list-item ul.category-list-item-ul li app-cs-radio label.radio-item span.value ul.categories li:first-of-type{padding-left:0;color:#1e5dd3}"]}]}],"members":{"categoryList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"allCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"categoryIdKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"selectedCategories":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"saveSelectedCategory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"closeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"closeCategoriesList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectCategory":[{"__symbolic":"method"}],"deleteEvent":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"setList":[{"__symbolic":"method"}],"setActiveTab":[{"__symbolic":"method"}],"checkSelectAll":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"app-frequency","template":"<div class=\"frequency\">\r\n    <div class=\"frequency-head vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <h3 class=\"frequency-title\">Select a Frequency</h3>\r\n    </div>\r\n    <div class=\"frequency-body\">\r\n        <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n            <div class=\"frequency-tab-head\">\r\n                <ul class=\"navigation\">\r\n                    <li><button [class.active]=\"frequencyTab == 'weekly'\" (click)=\"changeTab('weekly')\">Weekly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'monthly'\" (click)=\"changeTab('monthly')\">Monthly</button></li>\r\n                    <li><button [class.active]=\"frequencyTab == 'quarterly'\" (click)=\"changeTab('quarterly')\">Quarterly</button></li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"frequency-tab-body\" >\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'weekly'\">\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let day of dayNames; let dayIndex = index\" (ngValueChange)=\"daySelectionChange($event, dayIndex)\" [ngValue]=\"selectedDays.includes(dayIndex)\">{{day}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list month\" *ngSwitchCase=\"'monthly'\">\r\n                    <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                        <span>Day <input type=\"number\" (focusout)=\"checkDateValidity(monthlyDate,'monthly')\" [(ngModel)]=\"monthlyDate\" class=\"day-counter\"\r\n                            onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                    </div>\r\n                    <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                        <app-cs-checkbox *ngFor = \"let month of monthNames; let monthIndex = index\" (ngValueChange)=\"monthSelectionChange($event, monthIndex)\" [ngValue]=\"selectedMonths.includes(monthIndex)\">{{month}}</app-cs-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class=\"checkbox-list\" *ngSwitchCase=\"'quarterly'\">\r\n                    <ng-container *ngIf=\"showRadio\">\r\n                        <div class=\"frequency-top vx-d-flex vx-align-center\">\r\n                            <span>Day <input type=\"number\"  (focusout)=\"checkDateValidity(quarterlyDate,'quarterly')\" [(ngModel)]=\"quarterlyDate\" class=\"day-counter\"\r\n                                onkeydown=\"return event.keyCode !== 190\" min=\"1\" oninput=\"this.value = Math.abs(this.value)\"> of</span>\r\n                        </div>\r\n                        <div class=\"frequency-checkbox vx-d-flex vx-justify-between vx-flex-wrap\">\r\n                            <app-cs-radio *ngFor = \"let quarter of quarters, let quarterIndex = index\" (checkedEvent)=\"quarterSelectionChange($event, quarterIndex)\" [checked]=\"selectedQuarter === quarterIndex\">{{quarter}}</app-cs-radio>\r\n                        </div>\r\n                    </ng-container>                    \r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-footer\">\r\n        <app-dashboard-footer \r\n        [footerDetails]=\"footerDetails\"\r\n        (cancelEvent)=\"closeFrequencyPopup.emit()\"\r\n         (submitEvent)=\"submitFrequency()\"\r\n          ></app-dashboard-footer>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animation.css\");@import url(\"https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css\");::ng-deep .frequency{background:#fff}::ng-deep .frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0;padding:0 12px}::ng-deep .frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}::ng-deep .frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}::ng-deep .frequency-tab{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px #1e5dd31a;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}::ng-deep .frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul{padding:0;margin:0}::ng-deep .frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}::ng-deep .frequency-tab-head ul.navigation li{list-style:none;width:auto;padding:0 28px;display:flex;justify-content:center}::ng-deep .frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:#0000;border:none;white-space:nowrap;cursor:pointer;padding:0}::ng-deep .frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}::ng-deep .frequency-tab-head ul.navigation li button.active{color:#1e5dd3}::ng-deep .frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}::ng-deep .frequency-tab-body{background:#fff}::ng-deep .frequency-tab-body .checkbox-list{border-top:1px solid #f1f1f1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top{padding:12px 24px;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-tab-body .checkbox-list .frequency-top span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}::ng-deep .frequency-tab-body .checkbox-list .frequency-top .day-counter{-webkit-appearance:textfield;-moz-appearance:textfield;width:40px;margin:6px 8px 0;padding:0 4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;font-size:14px}::ng-deep .frequency-tab-body .checkbox-list .frequency-checkbox{padding:24px}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio{display:flex}::ng-deep .frequency-tab-body .checkbox-list app-cs-checkbox label span.value,::ng-deep .frequency-tab-body .checkbox-list app-cs-radio label span.value{font-size:12px!important;color:#747576!important;font-weight:400!important}::ng-deep .frequency-tab-body .checkbox-list.month app-cs-checkbox{width:calc(100% / 6);padding:4px 0}"]}]}],"members":{"savedFrequencyTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"savedFrequencies":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"selectedDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"closeFrequencyPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"saveFrequency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"closeFrequency":[{"__symbolic":"method"}],"daySelectionChange":[{"__symbolic":"method"}],"monthSelectionChange":[{"__symbolic":"method"}],"quarterSelectionChange":[{"__symbolic":"method"}],"changeTab":[{"__symbolic":"method"}],"setToDefaultValues":[{"__symbolic":"method"}],"submitFrequency":[{"__symbolic":"method"}],"checkDateValidity":[{"__symbolic":"method"}],"checkFrequencyValidity":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"filter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":24,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":24,"character":26},{"__symbolic":"reference","name":"ɵbe"}],"exports":[{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbc"}]}]}],"members":{}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-checkbox","template":"<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n  <span class=\"checkbox\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n","styles":["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"ngValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-radio","template":"<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n  <span class=\"radio\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n","styles":["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio],label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"checkedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-switch","template":"<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n  <!-- [class.large]=\"large\" -->\r\n  <span class=\"value\">\r\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [arTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n        <i class=\"vc-icons\">&#xe9f3;</i>\r\n      </span> -->\r\n  </span>\r\n  <!-- [class.last]=\"last\" -->\r\n  <span class=\"switch\" *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n  <span\r\n    class=\"switch\"\r\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n    [arTooltip]=\"tooltipMessage\"\r\n    placement=\"bottom-right\"\r\n    delay=\"0\"\r\n    type=\"black\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <input type=\"checkbox\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" [disabled]=\"disabled\" />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n</label>\r\n","styles":["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #fff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"ngValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"tooltipMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-radio-group","template":"<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-cs-select","template":"<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n  <label *ngIf=\"dropdownLabel != undefined\">\r\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span> <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n  >\r\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n    <input\r\n      type=\"text\"\r\n      [class.line]=\"stylex\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"selectedValue | pascal\"\r\n      readonly\r\n      (click)=\"openDropdown($event)\"\r\n      (keyup.enter)=\"openDropdown($event)\"\r\n      (keyup.arrowup)=\"openDropdown($event)\"\r\n      (keyup.arrowdown)=\"openDropdown($event)\"\r\n      *ngIf=\"!colorProperty\"\r\n    />\r\n    <span class=\"show-label\" *ngIf=\"colorProperty\" (click)=\"openDropdown($event)\">\r\n      <span class=\"label\" [innerHTML]=\"selectedValue\" [style.backgroundColor]=\"colorSelected + '1A'\" [style.color]=\"colorSelected\"></span>\r\n    </span>\r\n    <span class=\"arrow\" [class.line]=\"stylex\">\r\n      <i class=\"risk-icons\">&#xe919;</i>\r\n    </span>\r\n    <div class=\"overlay active\" *ngIf=\"dropdownOption === true\" (click)=\"closeDropdown()\"></div>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && !colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label>\r\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (change)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"displayProperty && displayProperty !== ''\" class=\"value\">{{ data[displayProperty] }}</span>\r\n          <span (click)=\"closeDropdown(); selectOption(data)\" *ngIf=\"!displayProperty || displayProperty === ''\" class=\"value\">{{ data }}</span>\r\n        </label>\r\n      </li>\r\n    </ul>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label class=\"colors\">\r\n          <input type=\"radio\" [value]=\"data[valueKey]\" name=\"sliceLabel\" (click)=\"selectOption(data)\" #option (keyup.enter)=\"closeDropdown()\" class=\"pointer-none\" />\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"displayProperty && displayProperty !== ''\"\r\n            class=\"value\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data[displayProperty] }}</span\r\n          >\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"!displayProperty || displayProperty === ''\"\r\n            class=\"value\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data }}</span\r\n          >\r\n        </label>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n","styles":[".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group .show-label,.input-group input[type=text]{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group .show-label.line,.input-group input[type=text].line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{position:relative}.input-group .custom-select-box .input,.input-group .custom-select-box input[type=text]{cursor:pointer;padding-right:30px}.input-group .custom-select-box .input.line,.input-group .custom-select-box input[type=text].line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #fff;border-left:2px solid #fff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}"]}]}],"members":{"dataList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"dropdownLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"displayProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"selectedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"isRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"dropdownSubLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":15,"character":3},"arguments":["option"]}]}],"selectedData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"selectedValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"stylex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"valueKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"multipleSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"colorProperty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"colorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["optionList"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"pascal"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"searchMultiSelect"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[clickOutside]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":6,"character":34}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":7,"character":3},"arguments":["clickOutside"]}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":9,"character":3},"arguments":["document:click",["$event.target"]]}]}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵbf"}]}]}],"members":{}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[arTooltip]"}]}],"members":{"tooltipTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3},"arguments":["arTooltip"]}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"tooltipMandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"showTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":15,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":15,"character":56}]}],"ngOnInit":[{"__symbolic":"method"}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":17,"character":3},"arguments":["mouseenter"]}]}],"onMouseOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":21,"character":3},"arguments":["mouseover"]}]}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":26,"character":3},"arguments":["mouseleave"]}]}],"onMouseOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":29,"character":3},"arguments":["mouseout"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":32,"character":3},"arguments":["click"]}]}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbk"}],"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":25}],"exports":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"}]}]}],"members":{}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"cs-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":12,"character":15},"useExisting":{"__symbolic":"reference","name":"ɵbh"},"multi":true}],"template":"<div class=\"selection-wrap\">\r\n  <label class=\"label\" *ngIf=\"dropdownLabel != undefined\">\r\n    {{ dropdownLabel }}\r\n    <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\r\n    <span class=\"required\" *ngIf=\"isRequired\">*</span>\r\n  </label>\r\n  <div class=\"input-group\">\r\n    <span class=\"value\" (click)=\"openDropdown($event)\" (keyup.enter)=\"openDropdown($event)\" tabindex=\"0\" [attr.aria-placeholder]=\"placeholder\" [innerHTML]=\"valuePlaceholder | safeHtml\"></span>\r\n  </div>\r\n  <div class=\"overlay\" *ngIf=\"dropdownToggle === true\" (click)=\"closeDropdown()\"></div>\r\n  <div class=\"select-options\" *ngIf=\"dropdownToggle === true\" #optionList (keyup.Escape)=\"closeDropdown()\"\r\n    (keyup.enter)=\"closeDropdown()\" (click)=\"closeDropdown()\" [style.top.px]=\"getTop\" [style.left.px]=\"getLeft\"\r\n    [style.width.px]=\"getWidth\" [class.active]=\"showOptions\">\r\n    <ng-content select=\"cs-option\"></ng-content>\r\n  </div>\r\n</div>","styles":["::ng-deep .selection-wrap{display:block}::ng-deep .selection-wrap *{box-sizing:border-box}::ng-deep .selection-wrap label.label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .selection-wrap label.label span.required{color:#eb2424;font-size:14px}::ng-deep .selection-wrap label.label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}::ng-deep .selection-wrap .input-group{display:flex;position:relative}::ng-deep .selection-wrap .input-group .value{height:40px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:12px 20px 12px 13px;display:block;outline:none;cursor:pointer}::ng-deep .selection-wrap .input-group .value:empty:before{content:attr(aria-placeholder);line-height:16px;width:94%;display:block;pointer-events:none;position:absolute;top:calc(50% - 8px)}::ng-deep .selection-wrap .input-group .value *{pointer-events:none}::ng-deep .selection-wrap .input-group:after{content:\"\";border-top:4px solid #707070;border-right:4px solid #0000;border-left:4px solid #0000;position:absolute;right:16px;top:calc(50% - 2px)}::ng-deep .selection-wrap .overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000;z-index:9}::ng-deep .selection-wrap .select-options{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}::ng-deep .selection-wrap .select-options.hidden{opacity:0}::ng-deep .selection-wrap .select-options.active{opacity:1}::ng-deep .selection-wrap .select-options.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}::ng-deep .selection-wrap .select-options cs-option .list label span.value span{display:flex;border-radius:2px;padding:0 12px;font-size:12px}"]}]}],"members":{"dropdownLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownSubLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"isRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":["optionList"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}},"ɵbi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"cs-option","template":"<div class=\"list\">\r\n  <label>\r\n    <input type=\"radio\" tabindex=\"0\" [value]=\"value\" [name]=\"csSelect.name\" (click)=\"change($event)\" [checked]=\"csSelect.val === this.value\" />\r\n    <span class=\"value\" #options>\r\n      <ng-content></ng-content>\r\n    </span>\r\n  </label>\r\n</div>\r\n","styles":[".list label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}.list label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}.list label input[type=radio]:checked+span,.list label input[type=radio]:hover+span{background:#dcdcdc}.list label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["options"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbj"}]}],"ngOnInit":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}]}},"ɵbj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵbk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"safeHtml"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":7,"character":32}]}],"transform":[{"__symbolic":"method"}]}},"ɵbl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbm"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵbn"}],"exports":[{"__symbolic":"reference","name":"ɵbm"}]}]}],"members":{}},"ɵbm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-dashboard-footer","template":"<div class=\"floating-bar-container\">\r\n    <div class=\"floating-bar vx-d-flex vx-align-center vx-p-3\"\r\n        [class.vx-justify-end]=\"!(footerDetails.showFrequency || footerDetails.selectedData.length>0)\"\r\n        [class.vx-justify-between]=\"footerDetails.showFrequency || footerDetails.selectedData.length>0\">\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.showFrequency\">\r\n            <span class=\"value\" [innerHTML]=\"footerDetails.frequencyText\"></span>\r\n        </div>\r\n\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"footerDetails.selectedData.length>0\">\r\n            <span\r\n                class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n                <i *ngIf=\"!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])\"\r\n                    (click)=\"deleteSelected(footerDetails.selectedData[0])\" class=\"icons vx-mr-2\">&#xe90d;</i>\r\n                <span>{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>\r\n            </span>\r\n            <span *ngIf=\"footerDetails.selectedData.length > 1\"\r\n                class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n                appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{footerDetails.selectedData.length -\r\n                1}}</span>\r\n            <ng-container *ngIf=\"footerDetails?.selectedData?.length>1\">\r\n                <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length === 1\">\r\n                    {{footerDetails.singularText}}</span>\r\n                <span class=\"value\" *ngIf=\"footerDetails?.selectedData?.slice(1).length > 1\">\r\n                    {{footerDetails.pluralText}}</span>\r\n            </ng-container>\r\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n                <div class=\"floating-bar-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let element of footerDetails.selectedData.slice(1); let j = index\">\r\n                            <div class=\"chip-item\">\r\n                                <i class=\"icons\"\r\n                                    *ngIf=\"!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])\"\r\n                                    (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n                                <span>{{element[footerDetails.displayElementKey]}}</span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n        <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"cancelFloatingBar()\">Cancel</button>\r\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"submitFloatingBar()\">Update</button> -->\r\n            <button [class.disabled]=\"footerDetails.isDisabled\" class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n                (click)=\"submitFloatingBar()\">Next <i class=\"icons vx-ml-1\">&#xe91e;</i></button>\r\n        </div>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");.floating-bar{width:100%;background:#fff;position:relative}.floating-bar,.floating-bar .left span.select-item{box-shadow:0 2px 6px #4681ef20;border-radius:2px}.floating-bar .left span.select-item span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;max-width:200px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-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}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:#0000;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:#0000;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:#0000;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}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.disabled{pointer-events:none;opacity:.5}"]}]}],"members":{"cancelEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"submitEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"deleteEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"footerDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"cancelFloatingBar":[{"__symbolic":"method"}],"submitFloatingBar":[{"__symbolic":"method"}],"deleteSelected":[{"__symbolic":"method"}]}},"ɵbn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbo"},{"__symbolic":"reference","name":"ɵbp"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵbo"},{"__symbolic":"reference","name":"ɵbp"}],"providers":[{"__symbolic":"reference","name":"ɵg"}]}]}],"members":{}},"ɵbo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-popover","template":"<div class=\"popover-overlay\" *ngIf=\"popoverContainer\" (click)=\"closePopover('top');this.closedOnOverlay.emit();\"></div>\r\n<div class=\"action\" [class.active]=\"showPopover\" *ngIf=\"popoverContainer\" [style.top.px]=\"positionY\" [style.left.px]=\"positionX\" #popoverRatio id=\"popoverRatio\">\r\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n","styles":[".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.popover-overlay{z-index:12;cursor:auto;position:fixed;top:0;right:0;bottom:0;left:0}"]}]}],"members":{"dontCloseonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"popoverRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":11,"character":3},"arguments":["popoverRatio"]}]}],"popoverContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":12,"character":3},"arguments":["popoverContent"]}]}],"closedOnOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵg"}]}],"ngOnInit":[{"__symbolic":"method"}],"popover":[{"__symbolic":"method"}],"popoverEvent":[{"__symbolic":"method"}],"closePopover":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clickedPopover":[{"__symbolic":"method"}],"getPosition":[{"__symbolic":"method"}]}},"ɵbp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[appPopover]"}]}],"members":{"refrence":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":29},{"__symbolic":"reference","name":"ɵg"}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":13,"character":3},"arguments":["click"]}]}],"getPosition":[{"__symbolic":"method"}]}},"ɵbq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵbr"}]}]}],"members":{}},"ɵbr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"app-pagination","template":"<div class=\"pagination-box\">\r\n        <ul>\r\n            <li><button [class.disabled]=\"currentPage==1\" (click)=\"changePage('prev',0,'')\"><</button></li>\r\n            <li *ngFor=\"let page of paginationArray\">\r\n                <button [disabled]=\"page=='...'\" [class.disable]=\"page=='...'\" [class.active]=\"currentPage==page\" (click)=\"changePage('',page,'')\">\r\n                    <i *ngIf=\"page=='...'\" class=\"icons\">&#xe911;</i>{{page!='...'?page : ''}}</button></li>\r\n\r\n            <li><button [class.disabled]=\"currentPage==totalCount\" (click)=\"changePage('',0,'next')\">></button></li>\r\n        </ul>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.pagination-box{margin-bottom:12px}.pagination-box ul{display:flex;align-items:center;padding:0;margin:0}.pagination-box ul li{list-style:none;display:flex}.pagination-box ul li+li{margin-left:4px}.pagination-box ul li:first-child{margin-right:4px;height:24px}.pagination-box ul li:first-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li:last-child{margin-left:8px!important;height:24px}.pagination-box ul li:last-child button{color:#1e5dd3;font-size:17px}.pagination-box ul li button{border:1px solid #dbdbdb;background:#fff;border-radius:2px;color:#161b2f;font-weight:400;height:24px;min-width:24px;padding:0 5px;display:inline-flex;justify-content:center;align-items:center;outline:none;cursor:pointer;font-size:11px;margin:0}.pagination-box ul li button.active,.pagination-box ul li button:hover{border-color:#1e5dd3;color:#1e5dd3}.pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none}.pagination-box ul li button.disable{pointer-events:none}"]}]}],"members":{"totalPages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"totalList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"paginationFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"rebuildPagination":[{"__symbolic":"method"}],"changePage":[{"__symbolic":"method"}]}},"ɵbs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbt"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵbn"}],"exports":[{"__symbolic":"reference","name":"ɵbt"}]}]}],"members":{}},"ɵbt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"floating-bar","template":"<div class=\"floating-bar-container\">\r\n    <div class=\"floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"text && !frequencyMessage && !singleCategory\">\r\n            <span class=\"value\">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been\r\n                completed.</span>\r\n        </div>\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"frequencyMessage && !text\">\r\n            <span class=\"value\" [innerHTML]=\"frequencyMessage\"></span>\r\n        </div>\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"singleCategory && !frequencyMessage && !text\">\r\n            <span\r\n                class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\"><i\r\n                    class=\"icons vx-mr-2\">&#xe90d;</i> {{singleCategory}}</span>\r\n        </div>\r\n        <div class=\"left vx-d-flex vx-align-center\" *ngIf=\"!singleCategory && !text && !frequencyMessage\">\r\n            <span\r\n                class=\"select-item vx-d-flex vx-align-center vx-bg-white vx-txt-blue vx-fw-500 vx-fs-3 vx-pl-2 vx-pr-2 vx-lh-6\">\r\n                <i *ngIf=\"selectedData.length\" (click)=\"deleteSelected(selectedData[0])\"\r\n                    class=\"icons vx-mr-2\">&#xe90d;</i>{{selectedData[0]?.title}}</span>\r\n            <span\r\n                *ngIf=\"selectedData?.length > 1\"\r\n                class=\"count vx-ml-2 vx-mr-2 vx-bg-blue vx-txt-white vx-fs-3 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\"\r\n                appPopover (click)=\"countPopup.popover()\" placement=\"left\">+{{selectedData?.length - 1}}\r\n            </span>\r\n            <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) === 1\">Widget Selected</span>\r\n            <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt selectedWidgets\" *ngIf=\"(selectedData?.length - 1) > 1\">Widgets Selected</span>\r\n            <app-popover #countPopup [dontCloseonClick]=\"true\">\r\n                <div class=\"floating-bar-action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let data of selectedData | slice: 1; let j = index\">\r\n                            <div class=\"chip-item\">\r\n                                <i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i>\r\n                                <span>{{data?.title}}</span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n        <div class=\"right vx-d-flex vx-align-center\">\r\n            <button class=\"vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"cancelFloatingBar()\">Cancel</button>\r\n            <!-- <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase\"\r\n                (click)=\"submitFloatingBar()\">Update</button> -->\r\n            <button class=\"vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center\"\r\n                (click)=\"submitFloatingBar()\">Save</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");.floating-bar{width:100%;background:#fff;position:relative}.floating-bar,.floating-bar .left span.select-item{box-shadow:0 2px 6px #4681ef20;border-radius:2px}.floating-bar .left span.select-item i{font-size:6px;cursor:pointer}.floating-bar .left span.count{min-width:24px;height:24px;border-radius:2px;cursor:pointer}.floating-bar .left .value{color:#747576;font-size:13px}.floating-bar .left .value strong{color:#161b2f;font-weight:500}.floating-bar .right button{border:none;border-radius:2px;font-size:11px;padding:0;width:72px;line-height:28px;margin-left:4px}.floating-bar-container{padding:5px 24px 10px 12px}.floating-bar-action-list{width:220px}.floating-bar-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}.floating-bar-action-list ul.action-item{display:block}.floating-bar-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:#0000;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.floating-bar-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:#0000;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.floating-bar-action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.floating-bar-action-list ul.action-item li button:hover{background:#f3f3f3}.floating-bar-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.floating-bar-action-list ul.action-item li .avatar-card.within-con{display:block}.floating-bar-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}.floating-bar-action-list ul.action-item li .avatar-card .avatar img{width:100%}.floating-bar-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.floating-bar-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:#0000;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}.floating-bar-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.floating-bar-action-list ul.action-item li .avatar-card.no-image{display:block}.floating-bar-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.floating-bar-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.floating-bar-action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.floating-bar-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}.floating-bar-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.floating-bar-action-list ul.action-item li .chip-item span.id{font-size:9px}.floating-bar-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.floating-bar-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}.floating-bar-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}.floating-bar-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.floating-bar-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}.selectedWidgets{font-size:12px}"]}]}],"members":{"cancelEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"submitEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":10,"character":3}}]}],"deleteEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"frequencyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"singleCategory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"selectedData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"ngOnInit":[{"__symbolic":"method"}],"cancelFloatingBar":[{"__symbolic":"method"}],"submitFloatingBar":[{"__symbolic":"method"}],"deleteSelected":[{"__symbolic":"method"}]}},"ɵbu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵbv"},{"__symbolic":"reference","name":"ɵbw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","name":"ɵbs"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵbz"}],"exports":[{"__symbolic":"reference","name":"ɵbv"}]}]}],"members":{}},"ɵbv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"app-configure-widgets","template":"<div class=\"configure-widgets\" *ngIf=\"showWidgets\">\r\n    <div class=\"configure-widgets-head\">\r\n        <h3 class=\"configure-widgets-title\">Configure Widgets</h3>\r\n        <button class=\"configure-widgets-back\" (click)=\"closeConfigureDashboard()\">\r\n            <i class=\"icons\">&#xe91d;</i> Back\r\n        </button>\r\n    </div>\r\n    <div class=\"configure-widgets-body\">\r\n        <div class=\"configure-widgets-tab\">\r\n            <ul>\r\n                <li [class.active]=\"module === 'COMPLIANCE'\" *ngIf=\"showCompliance\" (click)=\"module='COMPLIANCE'\">\r\n                    <button>Compliance<span>{{complianceWidgetsDisplayCount}}</span></button></li>\r\n                <li [class.active]=\"module === 'RISK'\" *ngIf=\"showRisk\"><button\r\n                        (click)=\"module='RISK'\">Risks<span>{{riskWidgetsDisplayCount}}</span></button></li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"configure-widgets-search\">\r\n            <i class=\"icons vx-fs-3\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search widgets\" [(ngModel)]=\"search\">\r\n        </div>\r\n        <div class=\"configure-widgets-list\" *ngIf=\"(widgetsList[module] | search:search).length !== 0\">\r\n            <ng-container *ngFor=\"let widget of widgetsList[module] | search:search\">\r\n                <div class=\"configure-widgets-item\" *ngIf=\"widget?.visibility\">\r\n                    <label class=\"block\">\r\n                        <input type=\"checkbox\" [checked]=\"widget.value\"\r\n                            (change)=\"selectWidget($event.target.checked,module,widget.id)\">\r\n                        <div class=\"check-icon\">\r\n                            <svg class=\"check\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                                <circle class=\"check-circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                                <path class=\"check-circle\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                            </svg>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-head\">\r\n                            <h4 class=\"configure-widgets-item-title\" [innerHTML]=\"widget?.title\"></h4>\r\n                            <p class=\"configure-widgets-item-description\" [innerHTML]=\"widget?.description\"></p>\r\n                            <button *ngIf=\"!widget.value\" class=\"configure-widgets-item-button add\"\r\n                                (click)=\"selectWidget(true,module,widget.id) \">+ ADD</button>\r\n                            <button *ngIf=\"widget.value\" class=\"configure-widgets-item-button remove\"\r\n                                (click)=\"selectWidget(false,module,widget.id) \">- Remove</button>\r\n                        </div>\r\n                        <div class=\"configure-widgets-item-body\">\r\n                            <div class=\"image-wrapper\">\r\n                                <img [src]=\"widget?.widgetImage\" alt=\"\">\r\n                            </div>\r\n                            <div class=\"floating-option vx-d-flex\" *ngIf=\"widget?.subWidgets?.length>0\">\r\n                                <ng-container *ngFor=\"let subWidget of widget.subWidgets\">\r\n                                     <app-cs-checkbox *ngIf=\"subWidget.visibility\"\r\n                                    (ngValueChange)=\"selectWidget($event, module,widget.id,subWidget.id)\"\r\n                                    [ngValue]=\"subWidget.value\">{{subWidget.title}}\r\n                                </app-cs-checkbox>\r\n                                </ng-container>\r\n                               \r\n                            </div>\r\n\r\n                        </div>\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <!-- No Data Image -->\r\n\r\n        </div>\r\n        <app-no-data *ngIf=\"(widgetsList[module] | search:search).length === 0 \"\r\n            [noDataImage]=\"'https://cdn.v-comply.com/libraries/configure-widget/assets/images/configure-widget.svg'\"\r\n            [noDataText]=\"'No data to display'\">\r\n        </app-no-data>\r\n    </div>\r\n\r\n    <floating-bar (submitEvent)=\"onNextClick()\" (cancelEvent)=\"closeConfigureDashboard()\"\r\n        [selectedData]=\"selectedWidgets\" (deleteEvent)=\"removeWidget($event)\"></floating-bar>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .configure-widgets{display:block;width:calc(100vw - 48px);height:100vh;margin-left:48px;background:#fff}::ng-deep .configure-widgets-head{height:44px;background:#fbfbfb;padding:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f1f1f1}::ng-deep .configure-widgets-title{line-height:20px;font-weight:500;font-size:14px;color:#161b2f;margin:0}::ng-deep .configure-widgets-back{border:none;outline:none;color:#161b2f;font-size:14px;font-weight:500;line-height:20px;display:inline-flex;background:#0000;margin:0;padding:0}::ng-deep .configure-widgets-back i{margin-right:6px;font-size:20px}::ng-deep .configure-widgets-body{padding:4px 36px;position:relative}::ng-deep .configure-widgets-body .floating-option{position:absolute;right:0;bottom:0;left:0;background:#fff;padding:16px 12px;z-index:3;box-shadow:0 -6px 12px #1e5dd31a}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox{display:flex}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox label span.value{color:#161b2f!important;font-size:11px!important;line-height:16px!important;margin-left:8px!important;white-space:nowrap}::ng-deep .configure-widgets-body .floating-option app-cs-checkbox+app-cs-checkbox{margin-left:20px}::ng-deep .configure-widgets-body app-no-data .no-data-wrapper{height:calc(100vh - 222px)!important}::ng-deep .configure-widgets-tab ul{padding:0;margin:0 0 12px;display:flex;border-bottom:1px solid #dbdbdb}::ng-deep .configure-widgets-tab ul li{list-style:none;display:block;width:auto;padding:0}::ng-deep .configure-widgets-tab ul li button{color:#747576;display:inline-block;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;border:none;outline:none;background:#0000;padding:8px 0;position:relative;margin:0}::ng-deep .configure-widgets-tab ul li button span{display:inline-block;margin-left:8px;color:#74757680}::ng-deep .configure-widgets-tab ul li+li{padding-left:40px}::ng-deep .configure-widgets-tab ul li.active button{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button span{color:#1e5dd3}::ng-deep .configure-widgets-tab ul li.active button:after{content:\"\";right:0;bottom:0;left:0;height:2px;border-radius:2px;position:absolute;background-color:#1e5dd3}::ng-deep .configure-widgets-search{position:relative;margin-bottom:24px}::ng-deep .configure-widgets-search i{position:absolute;top:16px;left:16px;color:#dbdbdb}::ng-deep .configure-widgets-search input{border:1px solid #dbdbdb;border-radius:4px;height:44px;padding:10px 180px 10px 40px;width:100%;font-size:14px;color:#747576;outline:none}::ng-deep .configure-widgets-search input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .configure-widgets-list{display:flex;flex-wrap:wrap;margin:0 -24px;height:calc(100vh - 238px);overflow:auto}::ng-deep .configure-widgets-item{width:50%;padding:0 24px;margin-bottom:40px}::ng-deep .configure-widgets-item .block{background:#f8f8f8;border-radius:4px;padding:16px 44px 4px;cursor:pointer;position:relative;display:block}::ng-deep .configure-widgets-item .block .check-icon{position:absolute;top:8px;left:0;height:36px;width:36px;border-radius:0 4px 4px 0;display:flex;justify-content:center;align-items:center;background:#34aa44;opacity:0;pointer-events:none}::ng-deep .configure-widgets-item .block .check-icon .check{display:none;width:27px;height:27px;background:#0000;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #fff;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}::ng-deep .configure-widgets-item .block .check-icon .check-circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:4;stroke-miterlimit:10;stroke:#fff;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .configure-widgets-item .block .check-icon .check-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .configure-widgets-item .block input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon{opacity:1}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked+.check-icon .check{display:block}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-body .image-wrapper{opacity:.5}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.add{display:none}::ng-deep .configure-widgets-item .block input[type=checkbox]:checked~.configure-widgets-item-head button.remove{display:flex}::ng-deep .configure-widgets-item-head{padding:0 0 16px;position:relative}::ng-deep .configure-widgets-item-title{margin:0 0 12px;font-size:14px;line-height:20px;text-transform:uppercase;color:#161b2f;max-width:calc(100% - 72px);font-weight:500}::ng-deep .configure-widgets-item-description{font-size:12px;line-height:20px;color:#747576;margin:0;font-weight:400;height:60px}::ng-deep .configure-widgets-item-button{width:72px;height:28px;cursor:pointer;display:flex;position:absolute;top:0;right:-24px;font-size:11px;font-weight:500;border:none;outline:none;justify-content:center;align-items:center;border-radius:2px;text-transform:uppercase;padding:0;margin:0}::ng-deep .configure-widgets-item-button.add{color:#fff;background:#1e5dd3}::ng-deep .configure-widgets-item-button.remove{background:#fff;border:1px solid #f1f1f1;color:#c7381b;display:none}::ng-deep .configure-widgets-item-body{overflow:hidden;height:220px;border:1px solid #f1f1f1;border-bottom:none;border-radius:2px 2px 0 0;box-shadow:0 -4px 8px #161b2f10}::ng-deep .configure-widgets-item-body .image-wrapper{box-shadow:0 -6px 12px #0000001a;border-radius:2px;overflow:hidden;background:#fff}::ng-deep .configure-widgets-item-body img{width:100%}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #fff}}.disabled{pointer-events:none;opacity:.7}"]}]}],"members":{"widgetsDataModified":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"closeConfigureWidgets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"selectedWidgetsData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"displayedWidgets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"showRisk":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"showCompliance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵf"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"selectWidget":[{"__symbolic":"method"}],"setSelectedWidgets":[{"__symbolic":"method"}],"removeWidget":[{"__symbolic":"method"}],"onNextClick":[{"__symbolic":"method"}],"closeConfigureDashboard":[{"__symbolic":"method"}],"setWidgetsVisibilityToFalse":[{"__symbolic":"method"}]}},"ɵbw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"search"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵby"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵby"}]}]}],"members":{}},"ɵby":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[appScrollInView]"}]}],"members":{"appScrollInView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":1}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":7,"character":26}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"scroll":[{"__symbolic":"method"}]}},"ɵbz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵca"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵca"}]}]}],"members":{}},"ɵca":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-no-data","template":"<div class=\"no-data-wrapper\">\r\n    <div class=\"no-data-container\">\r\n        <img [src]=\"noDataImage\" [alt]=\"altText\" class=\"image\" />\r\n        <p class=\"text\" [innerHTML]=\"noDataText\" *ngIf=\"noDataText\"></p>\r\n        <div class=\"button-row\" *ngFor=\"let button of action\">\r\n                <button *ngIf=\"!button?.buttonIcon\" (click)=\"actionEmitter(button)\" [innerHTML]=\"button?.buttonText\"\r\n                    [class.small]=\"smallButton\"></button>\r\n                <button *ngIf=\"button?.buttonIcon\" (click)=\"actionEmitter(button)\" [class.small]=\"smallButton\">\r\n                    <i class=\"icons\" [innerHTML]=\"button?.buttonIcon\"></i> <span\r\n                        [innerHTML]=\"button?.buttonText\"></span>\r\n                </button>\r\n        </div>\r\n    </div>\r\n</div>","styles":["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");::ng-deep .no-data-wrapper{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:#fff;border-radius:2px}::ng-deep .no-data-container{display:inline-block;text-align:center;width:450px}::ng-deep .no-data-container .image{width:300px;margin-bottom:20px;display:inline-block}::ng-deep .no-data-container p.text{font-size:17px;font-weight:400;line-height:24px;margin-bottom:25px;color:#161b2f;text-align:center;margin-top:0}::ng-deep .no-data-container p.text strong{font-weight:500}::ng-deep .no-data-container button{width:auto;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;line-height:24px;cursor:pointer;background:#1e5dd3;border:1px solid #1e5dd3;outline:none;text-transform:uppercase;padding:0 16px}::ng-deep .no-data-container button+button{margin-left:5px}::ng-deep .no-data-container button i+span{margin-left:12px}::ng-deep .no-data-container button.small{width:60px;height:24px;font-size:11px}::ng-deep .no-data-container button.small i{margin-right:5px;font-size:9px}::ng-deep .no-data-container .button-row{display:flex;justify-content:center}"]}]}],"members":{"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"noDataImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"noDataText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"noDataButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"noDataSecButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"altText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"buttonAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"smallButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"buttonIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"actionEmitter":[{"__symbolic":"method"}]}},"ɵcb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcc"},{"__symbolic":"reference","name":"ɵcd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵcc"},{"__symbolic":"reference","name":"ɵcd"}]}]}],"members":{}},"ɵcc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-loader","template":"<!-- <p>loader works!</p> -->\r\n<div class=\"main-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div>\r\n","styles":[".main-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:fixed;background:#0000;z-index:9;top:0;right:0;bottom:0;left:0}.demo-loader{position:relative;width:60px;height:60px;margin-left:0;padding:2px;border-radius:20px;box-sizing:border-box}.demo-loader-inner{display:flex;align-items:center;justify-content:center;height:56px}.demo-loader-inner svg{position:relative}.demo-loader-colored-blocks{overflow:hidden;margin-left:0;padding:2px;border-radius:20px;perspective:1000px;animation:demoAnim 4s ease-in-out infinite,contAnim 4s infinite}.demo-loader-colored-blocks,.demo-loader-colored-blocks-rotater{position:absolute;left:0;top:0;width:60px;height:60px;box-sizing:border-box}.demo-loader-colored-blocks-rotater{border-radius:inherit}.demo-loader-colored-blocks-inner{overflow:hidden;position:relative;height:100%;background:#fff;border-radius:inherit;box-sizing:border-box}.demo-loader-colored-block{position:absolute;left:50%;top:50%;width:300%;height:300%;box-sizing:border-box;transform-origin:0 0}.demo-loader-colored-block:first-child{transform:rotate(45deg) skewX(37deg);background-color:#4681ef}.demo-loader-colored-block:nth-child(2){transform:rotate(97deg) skewX(32deg);background-color:#66bf72}.demo-loader-colored-block:nth-child(3){transform:rotate(154deg) skewX(26deg);background-color:#8c81f5}.demo-loader-colored-block:nth-child(4){transform:rotate(-22deg) skewX(22deg);background-color:#e75151}.demo-loader-colored-block:nth-child(5){transform:rotate(218deg) skewX(24deg);background-color:#f5a05b}.demo-loader-colored-block:nth-child(6){transform:rotate(282deg) skewX(33deg);background-color:#f4c84a}@keyframes contAnim{15%,to{margin-left:0;width:60px}25%,90%{margin-left:0;width:60px}}@keyframes demoAnim{15%{border-radius:20px;transform:rotate(0)}30%,43%{border-radius:50%;transform:rotate(1turn)}52%,65%{border-radius:0;transform:rotate(2turn)}78%,90%{border-radius:50%;transform:rotate(3turn)}to{border-radius:20px;transform:rotate(4turn)}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵcd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-loader-inline","template":"<!-- <p>loader-inline works!</p> -->\r\n<div class=\"inline-loader\">\r\n  <div class=\"demo-loader\">\r\n    <div class=\"demo-loader-colored-blocks\">\r\n      <div class=\"demo-loader-colored-blocks-rotater\">\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n        <div class=\"demo-loader-colored-block\"></div>\r\n      </div>\r\n      <div class=\"demo-loader-colored-blocks-inner\"></div>\r\n    </div>\r\n    <div class=\"demo-loader-inner\">\r\n      <svg\r\n        width=\"30px\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        version=\"1.1\"\r\n        id=\"Layer_1\"\r\n        x=\"0px\"\r\n        y=\"0px\"\r\n        viewBox=\"0 0 16 16\"\r\n        style=\"enable-background: new 0 0 16 16\"\r\n        xml:space=\"preserve\"\r\n      >\r\n        <style type=\"text/css\">\r\n          .st0 {\r\n            fill: #9d1f24;\r\n          }\r\n\r\n          .st1 {\r\n            fill: #d83b3f;\r\n          }\r\n        </style>\r\n        <g>\r\n          <path class=\"st0\" d=\"M2,12.3c0.5,0.3,1.1,0.4,1.8,0.2c0.9-0.3,1.4-1.1,1.5-1.1c-0.3-0.2-0.5-0.6-0.5-1.1V7.2   C4.5,4.6,1.1,3.8,1.1,3.8v7.3C1.1,11.2,1.3,11.9,2,12.3z\" />\r\n          <path\r\n            class=\"st1\"\r\n            d=\"M9.9,3.5c-1.8,2.8-4.6,7.8-4.6,7.8s0,0,0,0c0,0.1-0.5,0.8-1.5,1.1c-0.7,0.2-1.3,0.1-1.8-0.2   c-0.6-0.4-0.9-1.1-0.9-1.1s-0.1,1.2,0.6,2.2C2,13.9,4,15.9,6.6,14.5c0.6-0.3,1.1-0.8,1.6-1.5c0.4-0.5,6.9-11.6,6.9-11.6   S11.7,0.5,9.9,3.5z\"\r\n          />\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</div>\r\n","styles":[".inline-loader{display:flex;overflow:hidden;align-items:center;justify-content:center;text-align:center;position:absolute;background:#0000;z-index:9;top:0;right:0;bottom:0;left:0}.demo-loader{position:relative;width:60px;height:60px;margin-left:0;padding:2px;border-radius:20px;box-sizing:border-box}.demo-loader-inner{display:flex;align-items:center;justify-content:center;height:56px}.demo-loader-inner svg{position:relative}.demo-loader-colored-blocks{overflow:hidden;margin-left:0;padding:2px;border-radius:20px;perspective:1000px;animation:demoAnim 4s ease-in-out infinite,contAnim 4s infinite}.demo-loader-colored-blocks,.demo-loader-colored-blocks-rotater{position:absolute;left:0;top:0;width:60px;height:60px;box-sizing:border-box}.demo-loader-colored-blocks-rotater{border-radius:inherit}.demo-loader-colored-blocks-inner{overflow:hidden;position:relative;height:100%;background:#fff;border-radius:inherit;box-sizing:border-box}.demo-loader-colored-block{position:absolute;left:50%;top:50%;width:300%;height:300%;box-sizing:border-box;transform-origin:0 0}.demo-loader-colored-block:first-child{transform:rotate(45deg) skewX(37deg);background-color:#4681ef}.demo-loader-colored-block:nth-child(2){transform:rotate(97deg) skewX(32deg);background-color:#66bf72}.demo-loader-colored-block:nth-child(3){transform:rotate(154deg) skewX(26deg);background-color:#8c81f5}.demo-loader-colored-block:nth-child(4){transform:rotate(-22deg) skewX(22deg);background-color:#e75151}.demo-loader-colored-block:nth-child(5){transform:rotate(218deg) skewX(24deg);background-color:#f5a05b}.demo-loader-colored-block:nth-child(6){transform:rotate(282deg) skewX(33deg);background-color:#f4c84a}@keyframes contAnim{15%,to{margin-left:0;width:60px}25%,90%{margin-left:0;width:60px}}@keyframes demoAnim{15%{border-radius:20px;transform:rotate(0)}30%,43%{border-radius:50%;transform:rotate(1turn)}52%,65%{border-radius:0;transform:rotate(2turn)}78%,90%{border-radius:50%;transform:rotate(3turn)}to{border-radius:20px;transform:rotate(4turn)}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵce":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵcf"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵcf"}]}]}],"members":{}},"ɵcf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"app-snack-bar","template":"<div class=\"snakebar\" *ngIf=\"show\">\r\n  <div class=\"snakebar-inner\">\r\n    <div class=\"snakebarText\">\r\n      <!-- &#xe914; -->\r\n      <i class=\"icons\" [innerHTML]=\"icon\"></i> \r\n      <span [innerHTML]=\"message\">{{ message }}</span>\r\n    </div>\r\n    <button (click)=\"close()\">[ Close ]</button>\r\n  </div>\r\n</div>\r\n","styles":[".snakebar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}.snakebar.white{background-color:#fff;color:#000;z-index:20}.snakebar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}.snakebar .snakebar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px #0003;min-height:55px;pointer-events:auto}.snakebar .snakebar-inner .snakebarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}.snakebar .snakebar-inner .snakebarText i{background:#f1f1f1;color:#f6882f;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}.snakebar .snakebar-inner button{background:#0000;border:none;font-size:11px;padding:0;position:relative;color:#f6882f;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}.snakebar .snakebar-inner button:focus{outline:none}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵf"}]}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵcg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵch"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ɵch"}]}]}],"members":{}},"ɵch":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"app-smiley-dialog","template":"<!-- active -->\r\n<div class=\"smiley-popup active\">\r\n  <button class=\"close\" (click)=\"smileyCloseEmitter($event)\">\r\n    <i class=\"icons\">&#xe93f;</i>\r\n  </button>\r\n  <div class=\"smiley-container\">\r\n    <div class=\"smiley\">\r\n      <!-- active deactive -->\r\n      <div class=\"smiley-circle active\">\r\n        <div class=\"smiley-circle-inner\">\r\n          <div class=\"eyes\">\r\n            <div class=\"eye\"></div>\r\n            <div class=\"eye\"></div>\r\n          </div>\r\n          <div class=\"mouth\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <h3>{{ message }}</h3>\r\n    <div class=\"successSmilyButton\">\r\n      <button *ngFor=\"let button of actionButtons\" (click)=\"actionEmitter(button)\" [class]=\"button?.class\">\r\n        {{ button?.buttonText }}\r\n      </button>\r\n    </div>\r\n    <!-- <div class=\"successSmilyButton\"> -->\r\n    <!-- <button>White Button</button>\r\n            <button class=\"blue-btn\">Blue Button</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</div>\r\n","styles":[".smiley-popup{background:#d93b41;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9}.smiley-popup:before{content:\"\";position:absolute;z-index:0;background:#fff;top:0;right:0;bottom:0;left:0;transition-delay:1s;border-top-right-radius:0;transition:all .3s ease-in-out}.smiley-popup.active:before{border-top-right-radius:180px}.smiley-popup .close{color:#fff;font-size:22px;position:absolute;top:13px;right:21px;z-index:10;background:none;border:none;padding:0;cursor:pointer}.smiley-container{width:550px;text-align:center;position:relative;z-index:10}.smiley-container .smiley{background:#0000;border-radius:0;box-shadow:none;padding:0;display:block;width:500px;height:251px;overflow:hidden;position:relative;animation:slide-fwd-center .45s cubic-bezier(.68,-.55,.265,1.55) both;margin:0 auto 25px}.smiley-container .smiley:before{position:absolute;background:#ffedc5;width:50px;height:50px;content:\"\";border-radius:50%;top:101px;right:93px}.smiley-container .smiley:after{position:absolute;background:#ffbf15;width:35px;height:35px;border-radius:50%;content:\"\";top:200px;left:92px}.smiley-container .smiley-circle{background:#ffd83d;border-radius:100%;padding:25px;position:relative;width:250px;height:250px;margin:0 auto;box-shadow:inset -21px -14px 0 #f4c337}.smiley-container .smiley-circle:before{width:23px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:116px;left:-66px}.smiley-container .smiley-circle:after{width:5px;height:23px;background:#ffbf15;position:absolute;content:\"\";top:107px;left:-57px}.smiley-container .smiley-circle-inner{height:182px;width:100%;margin:0 auto}.smiley-container .smiley-circle-inner .eyes{width:164px;margin:40px auto 0;box-sizing:border-box;padding:0 5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes:before{width:5px;height:20px;background:#ffbf15;position:absolute;content:\"\";top:0;right:-19px}.smiley-container .smiley-circle-inner .eyes:after{width:20px;height:5px;background:#ffbf15;position:absolute;content:\"\";top:7px;right:-27px}.smiley-container .smiley-circle-inner .eyes .eye{width:40px;height:40px;background:#404549;float:left;border-radius:100%;overflow:hidden;position:relative}.smiley-container .smiley-circle-inner .eyes .eye:before{position:absolute;width:10px;height:10px;content:\"\";background:#ffe9b0;border-radius:50%;top:7px;left:1px}.smiley-container .smiley-circle-inner .eyes .eye:after{display:block;content:\"\";position:absolute;width:0;height:0;background:#fed800;transform:rotate(0deg);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .eyes .eye:nth-of-type(2){float:right}.smiley-container .smiley-circle-inner .mouth{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;height:75px;width:150px;margin:0 auto;box-sizing:border-box;position:absolute;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle-inner .mouth:before{width:95px;height:95px;position:absolute;opacity:0;bottom:-507px;left:-6px;background:#ffd83d;content:\"\";border-radius:86px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container .smiley-circle.active .eyes .eye{height:40px;margin-top:0;animation:wink 3s infinite}.smiley-container .smiley-circle.active .mouth{animation:move-mouth-down .3s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .eyes .eye{animation:wink2 3s infinite}.smiley-container .smiley-circle.deactive .smiley-circle-inner{animation:move-angry-head .6s;animation-delay:.3s;animation-fill-mode:forwards}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth{width:95px;height:51px;border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:0;border-bottom-right-radius:0;top:60px}.smiley-container .smiley-circle.deactive .smiley-circle-inner .mouth:before{background:#ffd83d;content:\"\";bottom:-55px;left:0;opacity:1;transition:all .3s cubic-bezier(.645,.045,.355,1)}.smiley-container h3{font-size:26px;color:#161b2f;font-weight:400;margin:0 0 40px}.smiley-container .successSmilyButton{display:flex;align-items:center}.smiley-container .successSmilyButton button{background:#fff;border:1px solid #1e5dd3;color:#1e5dd3;font-size:14px;font-weight:500;margin:0 5px;border-radius:3px;padding:8px;width:280px;height:54px;cursor:pointer;text-transform:uppercase}.smiley-container .successSmilyButton button.blue-btn{background:#1e5dd3;color:#fff}@keyframes slide-fwd-center{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes move-mouth-down{0%{border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;height:10%;width:40%;bottom:25%;margin:0 auto;box-sizing:border-box;position:absolute;bottom:18%;left:0;right:0;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}to{width:60%;height:30%;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:100px;border-bottom-right-radius:100px;box-sizing:border-box;position:absolute;bottom:18%;background:#404549;transition:all .3s cubic-bezier(.645,.045,.355,1)}}@keyframes wink{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes wink2{0%{height:40px;margin-top:0}10%{height:40px;margin-top:0}15%{height:4px;margin-top:18px}20%{height:40px;margin-top:0}to{height:40px;margin-top:0}}@keyframes move-angry-head{0%{transform:translateX(0)}20%{transform:translateX(-20%)}40%{transform:translateX(15%)}60%{transform:translateX(-10%)}80%{transform:translateX(5%)}to{transform:translateX(0)}}"]}]}],"members":{"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"autoClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"actionButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"closeSmiley":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":14,"character":3},"arguments":["window:keyup",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"actionEmitter":[{"__symbolic":"method"}],"smileyCloseEmitter":[{"__symbolic":"method"}]}}},"origins":{"CreateDashboardService":"./lib/create-dashboard.service","CreateDashboardComponent":"./lib/create-dashboard-container/create-dashboard.component","CreateDashboardModule":"./lib/create-dashboard-container/create-dashboard.module","ɵa":"./lib/create-dashboard-container/pipes/text-count.pipe","ɵb":"./lib/create-dashboard-container/services/create-dashboard.service","ɵc":"./lib/create-dashboard-container/services/auth.service","ɵd":"./lib/configurations","ɵe":"./lib/create-dashboard-container/services/pagination.service","ɵf":"./lib/ui-kit/snack-bar/snack-bar.service","ɵg":"./lib/ui-kit/popover/popover.service","ɵh":"./lib/create-dashboard-container/services/configure-widgets.service","ɵi":"./lib/create-dashboard-container/user-list/user-list.component","ɵj":"./lib/create-dashboard-container/form-group/form-group.component","ɵk":"./lib/ui-kit/dialog/dialog.service","ɵl":"./lib/ui-kit/dialog/dialog.module","ɵm":"./lib/ui-kit/dialog/dialog.component","ɵn":"./lib/ui-kit/dialog/insertion.directive","ɵo":"./lib/ui-kit/dialog/dialog-ref","ɵp":"./lib/ui-kit/dialog/dialog-config","ɵq":"./lib/create-dashboard-container/responsibility-center/responsibility-center.component","ɵr":"./lib/create-dashboard-container/categories/categories.component","ɵs":"./lib/create-dashboard-container/risk-categories/risk-categories.component","ɵt":"./lib/create-dashboard-container/frequency/frequency.component","ɵu":"./lib/create-dashboard-container/pipes/filter.pipe","ɵv":"./lib/ui-kit/formgroup/formgroup.module","ɵw":"./lib/ui-kit/formgroup/cs-checkbox/cs-checkbox.component","ɵx":"./lib/ui-kit/formgroup/cs-radio/cs-radio.component","ɵy":"./lib/ui-kit/formgroup/cs-switch/cs-switch.component","ɵz":"./lib/ui-kit/formgroup/cs-radio-group/cs-radio-group.component","ɵba":"./lib/ui-kit/formgroup/cs-select/cs-select.component","ɵbb":"./lib/ui-kit/formgroup/pipes/pascal.pipe","ɵbc":"./lib/ui-kit/formgroup/pipes/searchMultiSelect.pipe","ɵbd":"./lib/ui-kit/formgroup/click-outside.directive","ɵbe":"./lib/ui-kit/tooltip/tooltip.module","ɵbf":"./lib/ui-kit/tooltip/tooltip.directive","ɵbg":"./lib/ui-kit/select/select.module","ɵbh":"./lib/ui-kit/select/cs-select/cs-select.component","ɵbi":"./lib/ui-kit/select/cs-option/cs-option.component","ɵbj":"./lib/ui-kit/services/cs-select.service","ɵbk":"./lib/ui-kit/select/safe-html.pipe","ɵbl":"./lib/ui-kit/dashboard-footer/dashboard-footer.module","ɵbm":"./lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component","ɵbn":"./lib/ui-kit/popover/popover.module","ɵbo":"./lib/ui-kit/popover/popover.component","ɵbp":"./lib/ui-kit/popover/popover.directive","ɵbq":"./lib/ui-kit/pagination/pagination.module","ɵbr":"./lib/ui-kit/pagination/pagination.component","ɵbs":"./lib/ui-kit/floating-bar/floating-bar.module","ɵbt":"./lib/ui-kit/floating-bar/floating-bar.component","ɵbu":"./lib/create-dashboard-container/configure-widgets/configure-widgets.module","ɵbv":"./lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component","ɵbw":"./lib/create-dashboard-container/pipes/search.pipe","ɵbx":"./lib/create-dashboard-container/directives/directives.module","ɵby":"./lib/create-dashboard-container/directives/scroll-in-view.directive","ɵbz":"./lib/ui-kit/no-data/no-data.module","ɵca":"./lib/ui-kit/no-data/no-data.component","ɵcb":"./lib/ui-kit/v-loader/v-loader.module","ɵcc":"./lib/ui-kit/v-loader/loader/loader.component","ɵcd":"./lib/ui-kit/v-loader/loader-inline/loader-inline.component","ɵce":"./lib/ui-kit/snack-bar/snack-bar.module","ɵcf":"./lib/ui-kit/snack-bar/snack-bar/snack-bar.component","ɵcg":"./lib/ui-kit/smiley-dialog/smiley-dialog.module","ɵch":"./lib/ui-kit/smiley-dialog/smiley-dialog.component"},"importAs":"create-dashboard"}