vc-layout 0.0.1 → 0.0.4

package/fesm2022/vc-layout.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Component, NgModule, Directive, Input, HostListener, EventEmitter, Output, ViewChild, Pipe, forwardRef } from '@angular/core';
+import { Injectable, Optional, Component, NgModule, Directive, Input, HostListener, Pipe, EventEmitter, Output, ViewChild, forwardRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import * as i1$1 from '@vcomply/authorizer';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as dayjs from 'dayjs';
-import * as customParseFormat from 'dayjs/plugin/customParseFormat';
+import * as moment from 'moment';
 import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
@@ -20,6 +19,7 @@ const API = {
 class LayoutService {
     constructor() {
         this.baseUrl = '';
+        this.pathName = window.location.pathname;
         this.setBaseUrl();
     }
     setBaseUrl() {
@@ -257,9 +257,9 @@ const BASE_URL = 'https://cdn.v-comply.com';
 const ASSETS = {
     unauthorized: `${BASE_URL}/application/images/unauthorized-image.svg`,
     v_icon: `${BASE_URL}/logo/prod/v-logo.svg`,
-    hamburger_icon: `${BASE_URL}/logo/prod/hamburger-icon.svg`,
+    toggle_icon: `${BASE_URL}/logo/prod/hamburger-icon.svg`,
     dashboard_icon: `${BASE_URL}/logo/prod/dashboard-icon.svg`,
-    toDoResponsibility_icon: `${BASE_URL}/logo/prod/toDo-responsibility-icon.svg`,
+    to_do_responsibilities_icon: `${BASE_URL}/logo/prod/toDo-responsibility-icon.svg`,
     organization_icon: `${BASE_URL}/logo/prod/organization-icon.svg`,
     compliance_icon: `${BASE_URL}/logo/prod/compliance-icon.svg`,
     assessment_icon: `${BASE_URL}/logo/prod/assessment-icon.svg`,
@@ -267,27 +267,47 @@ const ASSETS = {
     assurance_icon: `${BASE_URL}/logo/prod/assurance-icon.svg`,
     audit_icon: `${BASE_URL}/logo/prod/audit-icon.svg`,
     issue_icon: `${BASE_URL}/logo/prod/issue-icon.svg`,
-    policy_icon: `${BASE_URL}/logo/prod/policy-icon.svg`,
-    downloadCenter_icon: `${BASE_URL}/logo/prod/download-center-icon.svg`,
+    all_icon: `${BASE_URL}/logo/prod/policy-icon.svg`,
+    download_center_icon: `${BASE_URL}/logo/prod/download-center-icon.svg`,
     settings_icon: `${BASE_URL}/logo/prod/settings-icon.svg`,
-    selected_dashboard_icon: `${BASE_URL}/logo/prod/selected-dashboard-icon.svg`,
-    selected_to_do_responsibility_icon: `${BASE_URL}/logo/prod/selected-toDo-responsibility-icon.svg`,
-    selected_organization_icon: `${BASE_URL}/logo/prod/selected-organization-icon.svg`,
-    selected_compliance_icon: `${BASE_URL}/logo/prod/selected-compliance-icon.svg`,
-    selected_assessment_icon: `${BASE_URL}/logo/prod/selected-assessment-icon.svg`,
-    selected_risk_icon: `${BASE_URL}/logo/prod/selected-risk-icon.svg`,
-    selected_assurance_icon: `${BASE_URL}/logo/prod/selected-assurance-icon.svg`,
-    selected_audit_icon: `${BASE_URL}/logo/prod/selected-audit-icon.svg`,
-    selected_issue_icon: `${BASE_URL}/logo/prod/selected-issue-icon.svg`,
-    selected_policy_icon: `${BASE_URL}/logo/prod/selected-policy-icon.svg`,
-    selected_download_center_icon: `${BASE_URL}/logo/prod/selected-download-center-icon.svg`,
-    selected_settings_icon: `${BASE_URL}/logo/prod/selected-settings-icon.svg`,
+    active_dashboard_icon: `${BASE_URL}/logo/prod/selected-dashboard-icon.svg`,
+    active_to_do_responsibilities_icon: `${BASE_URL}/logo/prod/selected-toDo-responsibility-icon.svg`,
+    active_organization_icon: `${BASE_URL}/logo/prod/selected-organization-icon.svg`,
+    active_compliance_icon: `${BASE_URL}/logo/prod/selected-compliance-icon.svg`,
+    active_assessment_icon: `${BASE_URL}/logo/prod/selected-assessment-icon.svg`,
+    active_risk_icon: `${BASE_URL}/logo/prod/selected-risk-icon.svg`,
+    active_assurance_icon: `${BASE_URL}/logo/prod/selected-assurance-icon.svg`,
+    active_audit_icon: `${BASE_URL}/logo/prod/selected-audit-icon.svg`,
+    active_issue_icon: `${BASE_URL}/logo/prod/selected-issue-icon.svg`,
+    active_all_icon: `${BASE_URL}/logo/prod/selected-policy-icon.svg`,
+    active_download_center_icon: `${BASE_URL}/logo/prod/selected-download-center-icon.svg`,
+    active_settings_icon: `${BASE_URL}/logo/prod/selected-settings-icon.svg`,
     support_icon: `${BASE_URL}/libraries/support/support-icon.svg`,
 };
 
+const IN_APP_URL = {
+    MANAGE_RESPONSIBILITY: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["manage_responsibilities"],"subType":["CC"]},"byStatus":{"type":["active"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
+    MY_RESPONSIBILITY: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["my_responsibilities"],"subType":["CC"]},"byStatus":{"type":["active"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
+    QUEUE: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
+    PROGRAM: '/program/manage-program-categories/programs-overview',
+    DASHBOARD: '/global-dashboard/',
+    TO_DO_RESPONSIBILITIES: 'to-do-responsibilities',
+    ORGANIZATION: '/organization/',
+    SETTINGS: '/settings',
+    ASSESSMENT: '/assessment/',
+    RISK: '/global-dashboard/risk_dashboard?module=risk',
+    ASSURANCE: '/assurance/test_dashboard',
+    AUDIT: '/global-dashboard/audit_dashboard?module=audit',
+    ISSUE: '/global-dashboard/issue_dashboard?module=issue',
+    ALL: '/all/policy/manage-policies',
+    EDIT_PROFILE: '/settings/settings/profile?edit_profile=true',
+    DOWNLOAD_CENTER: '/downloads-center/',
+    PASSWORD_RESET: `/organization/#/settings/userprofile`,
+};
+
 const PRODUCT_LIST = [
     {
-        name: 'Toggle Submenu',
+        name: 'View Submenu',
         icon: ASSETS.hamburger_icon,
         code: 'TOGGLE',
         class: '',
@@ -321,7 +341,7 @@ const PRODUCT_LIST = [
     {
         name: 'ComplianceOps',
         icon: ASSETS.compliance_icon,
-        code: 'COMPLIANCE_OPS',
+        code: 'COMPLIANCE',
         class: '',
         isActive: false,
         linkClass: '',
@@ -329,7 +349,7 @@ const PRODUCT_LIST = [
     {
         name: 'Assessments',
         icon: ASSETS.assessment_icon,
-        code: 'ASSESSMENTS',
+        code: 'ASSESSMENT',
         class: '',
         isActive: false,
         linkClass: '',
@@ -337,7 +357,7 @@ const PRODUCT_LIST = [
     {
         name: 'RiskOps',
         icon: ASSETS.risk_icon,
-        code: 'RISK_OPS',
+        code: 'RISK',
         class: '',
         isActive: false,
         linkClass: '',
@@ -353,7 +373,7 @@ const PRODUCT_LIST = [
     {
         name: 'AuditOps',
         icon: ASSETS.audit_icon,
-        code: 'AUDIT_OPS',
+        code: 'AUDIT',
         class: '',
         isActive: false,
         linkClass: '',
@@ -361,7 +381,7 @@ const PRODUCT_LIST = [
     {
         name: 'IssueOps',
         icon: ASSETS.issue_icon,
-        code: 'ISSUE_OPS',
+        code: 'ISSUE',
         class: '',
         isActive: false,
         linkClass: '',
@@ -369,30 +389,32 @@ const PRODUCT_LIST = [
     {
         name: 'PolicyOps',
         icon: ASSETS.policy_icon,
-        code: 'POLICY_OPS',
+        code: 'ALL',
         class: '',
         isActive: false,
         linkClass: '',
     },
 ];
-
-const IN_APP_URL = {
-    MANAGE_RESPONSIBILITY: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["manage_responsibilities"],"subType":["CC"]},"byStatus":{"type":["active"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
-    MY_RESPONSIBILITY: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["my_responsibilities"],"subType":["CC"]},"byStatus":{"type":["active"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
-    QUEUE: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
-    PROGRAM: '/program/manage-program-categories/programs-overview',
-    DASHBOARD: '/global-dashboard/',
-    TO_DO_RESPONSIBILITIES: 'to-do-responsibilities',
-    ORGANIZATION: '/organization/',
-    SETTINGS: '/settings',
-    ASSESSMENTS: '/assessment/',
-    RISK_OPS: '/global-dashboard/risk_dashboard?module=risk',
-    ASSURANCE: '/assurance/test_dashboard',
-    AUDIT_OPS: '/global-dashboard/audit_dashboard?module=audit',
-    ISSUE_OPS: '/global-dashboard/issue_dashboard?module=issue',
-    POLICY_OPS: '/all/policy/manage-policies',
-    EDIT_PROFILE: 'settings/settings/profile?edit_profile=true',
-};
+const PREFERENCE_LIST = [
+    {
+        name: 'Download Center',
+        icon: ASSETS.download_center_icon,
+        code: 'DOWNLOAD_CENTER',
+        class: '',
+        isActive: false,
+        linkClass: '',
+        url: IN_APP_URL.DOWNLOAD_CENTER,
+    },
+    {
+        name: 'Setting',
+        icon: ASSETS.settings_icon,
+        code: 'SETTING',
+        class: '',
+        isActive: false,
+        linkClass: '',
+        url: IN_APP_URL.SETTINGS,
+    },
+];
 
 class ProductListService {
     constructor(rbacService) {
@@ -427,16 +449,16 @@ class ProductListService {
     setProductClickCallback(productDetails, featureFlag) {
         let url = '';
         switch (productDetails.code) {
-            case 'COMPLIANCE_OPS':
+            case 'COMPLIANCE':
                 return this.setComplianceURL(featureFlag);
             case 'ORGANIZATION':
             case 'DASHBOARD':
-            case 'ASSESSMENTS':
-            case 'RISK_OPS':
+            case 'ASSESSMENT':
+            case 'RISK':
             case 'ASSURANCE':
-            case 'AUDIT_OPS':
-            case 'ISSUE_OPS':
-            case 'POLICY_OPS':
+            case 'AUDIT':
+            case 'ISSUE':
+            case 'ALL':
                 return IN_APP_URL[productDetails.code];
             default:
                 return 'javascript:void(0);';
@@ -626,11 +648,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['click']
             }] } });
 
+class GetModuleIconPipe {
+    transform(module, activeModule) {
+        const iconURLs = ASSETS;
+        if (module === activeModule) {
+            const activeIconName = 'active_' + module.toLowerCase() + '_icon';
+            return iconURLs[activeIconName];
+        }
+        return iconURLs[module.toLowerCase() + '_icon'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetModuleIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GetModuleIconPipe, name: "getModuleIcon" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetModuleIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getModuleIcon',
+                }]
+        }] });
+
 class ModuleListComponent {
     constructor(layoutService, productListService, apiService) {
         this.layoutService = layoutService;
         this.productListService = productListService;
         this.apiService = apiService;
+        this.activeModule = 'COMPLIANCE';
         this.onToggleSubmenu = new EventEmitter();
         this.ASSETS = ASSETS;
         this.PRODUCT_LIST = PRODUCT_LIST;
@@ -651,6 +693,20 @@ class ModuleListComponent {
         }
         return false;
     }
+    get getActiveModule() {
+        let currentUrl = this.layoutService.pathName;
+        currentUrl = currentUrl.split('/')[0];
+        this.PRODUCT_LIST = this.PRODUCT_LIST.map((product) => {
+            if (product.code === currentUrl.toUpperCase()) {
+                product.isActive = true;
+            }
+            else {
+                product.isActive = false;
+            }
+            return product;
+        });
+        return;
+    }
     /**
      * Checks the module subscription and updates the product list accordingly.
      * Subscribes to the `subscriptionDetail$` observable from the `apiService` and updates the `PRODUCT_LIST` property of the component based on the received data.
@@ -688,13 +744,13 @@ class ModuleListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModuleListComponent, deps: [{ token: LayoutService }, { token: ProductListService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModuleListComponent, selector: "vc-module-list", inputs: { featureFlag: "featureFlag" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModuleListComponent, selector: "vc-module-list", inputs: { featureFlag: "featureFlag", activeModule: "activeModule" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, ngImport: i0, template: `
     <div class="module-list">
       <ul class="vx-p-0 vx-m-0">
         <li
           *ngFor="let eachProduct of PRODUCT_LIST"
           [ngClass]="eachProduct.class"
-          [class.active]="eachProduct.isActive"
+          [class.active]="activeModule === eachProduct.code"
         >
           <a
             [href]="eachProduct.url"
@@ -707,12 +763,16 @@ class ModuleListComponent {
             [tooltipMandatory]="true"
             [animate]="true"
             (click)="eachProduct?.callback(eachProduct)"
-            ><img [src]="eachProduct.icon" alt="" width="16" height="16"
+            ><img
+              [src]="eachProduct.code | getModuleIcon : activeModule"
+              alt=""
+              width="16"
+              height="16"
           /></a>
         </li>
       </ul>
     </div>
-  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.module-list ul li{position:relative;z-index:1}.module-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.module-list ul li.dashboard-list:after{background:#343952;border-radius:.25rem .25rem 0 0;content:\"\";position:absolute;top:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li.toDoResponsibility-list:after{background:#343952;border-radius:0 0 .25rem .25rem;content:\"\";position:absolute;bottom:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li a{height:3rem}.module-list ul li a.vc-hamburger{height:2rem}.module-list ul li a img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.module-list ul li{position:relative;z-index:1}.module-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.module-list ul li.dashboard-list:after{background:#343952;border-radius:.25rem .25rem 0 0;content:\"\";position:absolute;top:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li.toDoResponsibility-list:after{background:#343952;border-radius:0 0 .25rem .25rem;content:\"\";position:absolute;bottom:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li a{height:3rem}.module-list ul li a.vc-hamburger{height:2rem}.module-list ul li a img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: GetModuleIconPipe, name: "getModuleIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModuleListComponent, decorators: [{
             type: Component,
@@ -722,7 +782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <li
           *ngFor="let eachProduct of PRODUCT_LIST"
           [ngClass]="eachProduct.class"
-          [class.active]="eachProduct.isActive"
+          [class.active]="activeModule === eachProduct.code"
         >
           <a
             [href]="eachProduct.url"
@@ -735,7 +795,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [tooltipMandatory]="true"
             [animate]="true"
             (click)="eachProduct?.callback(eachProduct)"
-            ><img [src]="eachProduct.icon" alt="" width="16" height="16"
+            ><img
+              [src]="eachProduct.code | getModuleIcon : activeModule"
+              alt=""
+              width="16"
+              height="16"
           /></a>
         </li>
       </ul>
@@ -743,88 +807,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.module-list ul li{position:relative;z-index:1}.module-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.module-list ul li.dashboard-list:after{background:#343952;border-radius:.25rem .25rem 0 0;content:\"\";position:absolute;top:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li.toDoResponsibility-list:after{background:#343952;border-radius:0 0 .25rem .25rem;content:\"\";position:absolute;bottom:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li a{height:3rem}.module-list ul li a.vc-hamburger{height:2rem}.module-list ul li a img{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: LayoutService }, { type: ProductListService }, { type: ApiService }]; }, propDecorators: { featureFlag: [{
                 type: Input
+            }], activeModule: [{
+                type: Input
             }], onToggleSubmenu: [{
                 type: Output
             }] } });
 
 class PreferenceListComponent {
-    constructor() {
-        this.ASSETS = ASSETS;
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.PREFERENCE_LIST = PREFERENCE_LIST;
+        this.setUrl();
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    setUrl() {
+        this.PREFERENCE_LIST = this.PREFERENCE_LIST.map((item) => {
+            item.url = this.layoutService.baseUrl + item.url;
+            return item;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreferenceListComponent, selector: "vc-preference-list", ngImport: i0, template: `
     <div class="preference-list">
       <ul class="vx-p-0 vx-m-0">
-        <li>
-          <a
-            class="vx-d-flex vx-align-center vx-justify-center"
-            [arTooltip]="'Download Center'"
-            placement="right"
-            type="black"
-            delay="0"
-            [tooltipMandatory]="true"
-            [animate]="true"
-            ><img
-              [src]="ASSETS.downloadCenterIcon"
-              alt=""
-              width="16"
-              height="16"
-          /></a>
-        </li>
-        <li>
+        <li *ngFor="let eachItems of PREFERENCE_LIST">
           <a
             class="vx-d-flex vx-align-center vx-justify-center"
-            [arTooltip]="'Settings'"
+            [arTooltip]="eachItems?.name"
             placement="right"
             type="black"
             delay="0"
             [tooltipMandatory]="true"
             [animate]="true"
-            ><img [src]="ASSETS.settingsIcon" alt="" width="16" height="16"
+            [href]="eachItems?.url"
+            ><img [src]="eachItems?.icon" alt="" width="16" height="16"
           /></a>
         </li>
       </ul>
     </div>
-  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.preference-list{width:3rem;position:absolute;bottom:0;left:0}.preference-list ul li{position:relative;z-index:1}.preference-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.preference-list ul li a{height:3rem}.preference-list ul li a img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.preference-list{width:3rem;position:absolute;bottom:0;left:0}.preference-list ul li{position:relative;z-index:1}.preference-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.preference-list ul li a{height:3rem}.preference-list ul li a img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vc-preference-list', template: `
     <div class="preference-list">
       <ul class="vx-p-0 vx-m-0">
-        <li>
-          <a
-            class="vx-d-flex vx-align-center vx-justify-center"
-            [arTooltip]="'Download Center'"
-            placement="right"
-            type="black"
-            delay="0"
-            [tooltipMandatory]="true"
-            [animate]="true"
-            ><img
-              [src]="ASSETS.downloadCenterIcon"
-              alt=""
-              width="16"
-              height="16"
-          /></a>
-        </li>
-        <li>
+        <li *ngFor="let eachItems of PREFERENCE_LIST">
           <a
             class="vx-d-flex vx-align-center vx-justify-center"
-            [arTooltip]="'Settings'"
+            [arTooltip]="eachItems?.name"
             placement="right"
             type="black"
             delay="0"
             [tooltipMandatory]="true"
             [animate]="true"
-            ><img [src]="ASSETS.settingsIcon" alt="" width="16" height="16"
+            [href]="eachItems?.url"
+            ><img [src]="eachItems?.icon" alt="" width="16" height="16"
           /></a>
         </li>
       </ul>
     </div>
   `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.preference-list{width:3rem;position:absolute;bottom:0;left:0}.preference-list ul li{position:relative;z-index:1}.preference-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.preference-list ul li a{height:3rem}.preference-list ul li a img{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: LayoutService }]; } });
 
 class ProductListContainerComponent {
     constructor() {
@@ -838,7 +882,7 @@ class ProductListContainerComponent {
       (onToggleSubmenu)="onToggleSubmenu.emit()"
     ></vc-module-list>
     <vc-preference-list></vc-preference-list>
-  </div> `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.product-list-container{background:#161b2f;width:3rem;height:100%;position:relative;z-index:1}\n"], dependencies: [{ kind: "component", type: ModuleListComponent, selector: "vc-module-list", inputs: ["featureFlag"], outputs: ["onToggleSubmenu"] }, { kind: "component", type: PreferenceListComponent, selector: "vc-preference-list" }] }); }
+  </div> `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.product-list-container{width:3rem;height:100%;position:relative;z-index:1}\n"], dependencies: [{ kind: "component", type: ModuleListComponent, selector: "vc-module-list", inputs: ["featureFlag", "activeModule"], outputs: ["onToggleSubmenu"] }, { kind: "component", type: PreferenceListComponent, selector: "vc-preference-list" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListContainerComponent, decorators: [{
             type: Component,
@@ -848,25 +892,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       (onToggleSubmenu)="onToggleSubmenu.emit()"
     ></vc-module-list>
     <vc-preference-list></vc-preference-list>
-  </div> `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.product-list-container{background:#161b2f;width:3rem;height:100%;position:relative;z-index:1}\n"] }]
+  </div> `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.product-list-container{width:3rem;height:100%;position:relative;z-index:1}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { featureFlag: [{
                 type: Input
             }], onToggleSubmenu: [{
                 type: Output
             }] } });
 
+const BUSINESS_CYCLE_URL = [
+    '/',
+    '/global-dashboard/compliance_dashboard',
+    '/global-dashboard/audit_dashboard',
+    '/global-dashboard/issue_dashboard',
+    '/global-dashboard/risk_dashboard',
+    '/global-dashboard/dashboard',
+    '/program/manage-program-categories/programs-overview',
+    '/program/program-workroom',
+    '/compliance/manage-responsibility',
+    '/compliance/reports/not-completed-report',
+    '/assessment/assessment-workroom/response-dashboard',
+    '/risk/reported-risk',
+    '/risk/manage-risk-category',
+    '/risk/risk-status',
+    '/risk/risk-register',
+    '/risk/risk-workroom/',
+    '/risk/my-assessment',
+    '/risk/risk-workshop',
+];
+
+const GLOBAL_ALERTS = {
+    contactUs: `<a href=https://www.v-comply.com/contact-us" target="_blank">CONTACT US</a>`,
+    trialUserExpired: `SUBSCRIPTION EXPIRED: Contact Sales to extend your trial.`,
+    EMAIL_PAUSE: `Your organization's email notifications have been paused. Hence, you will not receive any workflow related emails from VComply.`,
+    NOTIF_PAUSE_MESSAGE: `Notifications have been paused by the Key Admin. You will not receive any notifications until the Key Admin turns it back on.`,
+};
+
 class GlobalAlertComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GlobalAlertComponent, selector: "vc-global-alert", ngImport: i0, template: "<div\r\n  class=\"global-alert vx-d-flex vx-align-center vx-justify-center\"\r\n  [class.expired]=\"true\"\r\n>\r\n  <i class=\"icons vx-fs-12 vx-mr-2\">&#xe930;</i>\r\n  <!-- <span class=\"vx-fs-13\"\r\n    >Email notifications have been paused by the Key Admin. You will not be able\r\n    to edit your email notifications until the Key Admin turns it back on.</span\r\n  > -->\r\n  <span class=\"vx-fs-13\"\r\n    >SUBSCRIPTION EXPIRED: YOU WILL NOT BE ABLE TO LOGIN TO YOUR ACCOUNT AFTER\r\n    30 DAYS.\r\n    <a href=\"https://www.v-comply.com/contact-us\" target=\"_blank\"\r\n      >CONTACT US</a\r\n    ></span\r\n  >\r\n  <div class=\"global-alert-action vx-d-flex vx-align-center vx-lh-6\">\r\n    <button\r\n      class=\"vx-fs-12 vx-p-0 vx-m-0 vx-mr-4 vx-d-flex vx-align-center disabled\"\r\n    >\r\n      <i class=\"icons\">&#xe96b;</i>\r\n    </button>\r\n    <span class=\"vx-fs-13 vx-txt-white\">1</span>\r\n    <span class=\"divider vx-fs-11 vx-txt-white\">/</span>\r\n    <span class=\"vx-fs-13 vx-fw-600 vx-txt-white\">2</span>\r\n    <button class=\"vx-fs-12 vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\">\r\n      <i class=\"icons\">&#xe970;</i>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.global-alert{background:#343952;height:2.25rem;color:#f7d873}.global-alert.expired{color:#e38b7a}.global-alert.expired a{color:#fac3b7;margin-left:.5rem}.global-alert a{color:#f7d873}.global-alert-action{position:absolute;right:.75rem;top:.375rem}.global-alert-action span{letter-spacing:2px}.global-alert-action button{background:transparent;border-radius:0;border:none;color:#fff}.global-alert-action button.disabled{pointer-events:none;opacity:.5;color:#fff}\n"] }); }
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.activeIndex = 0;
+        this.messages = [];
+        this.isNotificationVisible = false;
+        this.subscriptionStatus = new EventEmitter();
+        this.setSubscriptionInfo();
+        this.getOrgDetails();
+    }
+    setSubscriptionInfo() {
+        this.apiService.subscriptionDetail$.subscribe((res) => {
+            console.log('this.subscriptionData ==>', res);
+            if (res) {
+                this.subscriptionData = res;
+                console.log('this.subscriptionData ==>', this.subscriptionData);
+                this.setMessages(this.subscriptionData);
+            }
+        });
+    }
+    getOrgDetails() {
+        this.apiService.organizationDetail$.subscribe((res) => {
+            if (res) {
+                this.setMailAlert(res);
+            }
+        });
+    }
+    setMessages(subscriptionData) {
+        const messages = [];
+        this.activeIndex = 0;
+        if (subscriptionData) {
+            const { trial_flag, no_of_days_left, after_expired_days_allow, no_of_days_for_password_expire, } = subscriptionData;
+            if (trial_flag && no_of_days_left <= 0) {
+                messages.push({
+                    message: GLOBAL_ALERTS.trialUserExpired + GLOBAL_ALERTS.contactUs,
+                    class: 'HIGH',
+                });
+            }
+            else if (no_of_days_left > 0 && no_of_days_left <= 30) {
+                messages.push({
+                    message: `YOUR SUBSCRIPTION EXPIRES IN ${no_of_days_left} DAYS. ${GLOBAL_ALERTS.contactUs}`,
+                    class: no_of_days_left <= 10 ? 'HIGH' : 'MEDIUM',
+                });
+            }
+            else if (no_of_days_left <= 0) {
+                messages.push({
+                    message: `SUBSCRIPTION EXPIRED: YOU WILL NOT BE ABLE TO LOGIN TO YOUR ACCOUNT AFTER ${after_expired_days_allow} DAYS. ${GLOBAL_ALERTS.contactUs}`,
+                    class: 'HIGH',
+                });
+            }
+            if (no_of_days_for_password_expire < 1) {
+                messages.push({
+                    message: `YOUR PASSWORD HAS EXPIRED. PLEASE <a href="${this.getPasswordResetUrl()}" target="_blank">CLICK HERE</a> TO RESET YOUR PASSWORD.`,
+                    class: 'HIGH',
+                });
+            }
+            else if (no_of_days_for_password_expire < 30) {
+                messages.push({
+                    message: `YOUR PASSWORD IS GOING TO EXPIRE IN ${no_of_days_for_password_expire} DAYS. <a href="${this.getPasswordResetUrl()}" target="_blank">CLICK HERE</a> TO RESET YOUR PASSWORD.`,
+                    class: 'MEDIUM',
+                });
+            }
+        }
+        this.messages = messages;
+        this.isNotificationVisible = this.messages.length > 0;
+        this.subscriptionStatus.emit(this.isNotificationVisible);
+    }
+    /**
+     * If the response is true, then push the message to the array. If the response is false, then remove
+     * the message from the array.
+     * </code>
+     * @param {any} res - any = {
+     */
+    setMailAlert(res) {
+        const emailPausedMessage = this.feature.isFeatureEnabled('ff_email_alert_update')
+            ? GLOBAL_ALERTS.NOTIF_PAUSE_MESSAGE
+            : GLOBAL_ALERTS.EMAIL_PAUSE;
+        const index = this.messages.findIndex((message) => message?.message?.includes(emailPausedMessage));
+        if (res?.is_mail_block === 1 && index === -1) {
+            this.messages.push({
+                message: emailPausedMessage,
+                class: 'MEDIUM',
+            });
+        }
+        else if (res?.is_mail_block === 0 && index >= 0) {
+            this.setMessages(this.subscriptionData);
+        }
+        this.isNotificationVisible = this.messages.length > 0;
+        this.subscriptionStatus.emit(this.isNotificationVisible);
+    }
+    getPasswordResetUrl() {
+        return `https://${window.location.host}${IN_APP_URL.PASSWORD_RESET}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertComponent, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GlobalAlertComponent, selector: "vc-global-alert", inputs: { feature: "feature" }, outputs: { subscriptionStatus: "subscriptionStatus" }, ngImport: i0, template: `
+    <div
+      *ngIf="messages.length > 0"
+      class="global-alert vx-d-flex vx-align-center vx-justify-center"
+      [class.expired]="messages[activeIndex]?.class === 'HIGH'"
+    >
+      <i class="icons vx-fs-12 vx-mr-2">&#xe930;</i>
+      <!-- <span class="vx-fs-13"
+    >Email notifications have been paused by the Key Admin. You will not be able
+    to edit your email notifications until the Key Admin turns it back on.</span
+  > -->
+      <span
+        class="vx-fs-13"
+        [innerHTML]="messages[activeIndex]?.message"
+      ></span>
+      <div class="global-alert-action vx-d-flex vx-align-center vx-lh-6">
+        <button
+          [class.disabled]="activeIndex === 0"
+          (click)="activeIndex = activeIndex - 1"
+          class="vx-fs-12 vx-p-0 vx-m-0 vx-mr-4 vx-d-flex vx-align-center disabled"
+        >
+          <i class="icons">&#xe96b;</i>
+        </button>
+        <span class="vx-fs-13 vx-txt-white">{{ activeIndex + 1 }}</span>
+        <span class="divider vx-fs-11 vx-txt-white">/</span>
+        <span class="vx-fs-13 vx-fw-600 vx-txt-white">{{
+          messages.length
+        }}</span>
+        <button
+          (click)="activeIndex = activeIndex + 1"
+          [class.disabled]="activeIndex === messages.length - 1"
+          class="vx-fs-12 vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center"
+        >
+          <i class="icons">&#xe970;</i>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .global-alert{background:#343952;height:2.25rem;color:#f7d873}::ng-deep .global-alert.expired{color:#e38b7a}::ng-deep .global-alert.expired a{color:#fac3b7;margin-left:.5rem}::ng-deep .global-alert a{color:#f7d873}::ng-deep .global-alert-action{position:absolute;right:.75rem;top:.375rem}::ng-deep .global-alert-action span{letter-spacing:2px}::ng-deep .global-alert-action button{background:transparent;border-radius:0;border:none;color:#fff}::ng-deep .global-alert-action button.disabled{pointer-events:none;opacity:.5;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-global-alert', template: "<div\r\n  class=\"global-alert vx-d-flex vx-align-center vx-justify-center\"\r\n  [class.expired]=\"true\"\r\n>\r\n  <i class=\"icons vx-fs-12 vx-mr-2\">&#xe930;</i>\r\n  <!-- <span class=\"vx-fs-13\"\r\n    >Email notifications have been paused by the Key Admin. You will not be able\r\n    to edit your email notifications until the Key Admin turns it back on.</span\r\n  > -->\r\n  <span class=\"vx-fs-13\"\r\n    >SUBSCRIPTION EXPIRED: YOU WILL NOT BE ABLE TO LOGIN TO YOUR ACCOUNT AFTER\r\n    30 DAYS.\r\n    <a href=\"https://www.v-comply.com/contact-us\" target=\"_blank\"\r\n      >CONTACT US</a\r\n    ></span\r\n  >\r\n  <div class=\"global-alert-action vx-d-flex vx-align-center vx-lh-6\">\r\n    <button\r\n      class=\"vx-fs-12 vx-p-0 vx-m-0 vx-mr-4 vx-d-flex vx-align-center disabled\"\r\n    >\r\n      <i class=\"icons\">&#xe96b;</i>\r\n    </button>\r\n    <span class=\"vx-fs-13 vx-txt-white\">1</span>\r\n    <span class=\"divider vx-fs-11 vx-txt-white\">/</span>\r\n    <span class=\"vx-fs-13 vx-fw-600 vx-txt-white\">2</span>\r\n    <button class=\"vx-fs-12 vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\">\r\n      <i class=\"icons\">&#xe970;</i>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.global-alert{background:#343952;height:2.25rem;color:#f7d873}.global-alert.expired{color:#e38b7a}.global-alert.expired a{color:#fac3b7;margin-left:.5rem}.global-alert a{color:#f7d873}.global-alert-action{position:absolute;right:.75rem;top:.375rem}.global-alert-action span{letter-spacing:2px}.global-alert-action button{background:transparent;border-radius:0;border:none;color:#fff}.global-alert-action button.disabled{pointer-events:none;opacity:.5;color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'vc-global-alert', template: `
+    <div
+      *ngIf="messages.length > 0"
+      class="global-alert vx-d-flex vx-align-center vx-justify-center"
+      [class.expired]="messages[activeIndex]?.class === 'HIGH'"
+    >
+      <i class="icons vx-fs-12 vx-mr-2">&#xe930;</i>
+      <!-- <span class="vx-fs-13"
+    >Email notifications have been paused by the Key Admin. You will not be able
+    to edit your email notifications until the Key Admin turns it back on.</span
+  > -->
+      <span
+        class="vx-fs-13"
+        [innerHTML]="messages[activeIndex]?.message"
+      ></span>
+      <div class="global-alert-action vx-d-flex vx-align-center vx-lh-6">
+        <button
+          [class.disabled]="activeIndex === 0"
+          (click)="activeIndex = activeIndex - 1"
+          class="vx-fs-12 vx-p-0 vx-m-0 vx-mr-4 vx-d-flex vx-align-center disabled"
+        >
+          <i class="icons">&#xe96b;</i>
+        </button>
+        <span class="vx-fs-13 vx-txt-white">{{ activeIndex + 1 }}</span>
+        <span class="divider vx-fs-11 vx-txt-white">/</span>
+        <span class="vx-fs-13 vx-fw-600 vx-txt-white">{{
+          messages.length
+        }}</span>
+        <button
+          (click)="activeIndex = activeIndex + 1"
+          [class.disabled]="activeIndex === messages.length - 1"
+          class="vx-fs-12 vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center"
+        >
+          <i class="icons">&#xe970;</i>
+        </button>
+      </div>
+    </div>
+  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .global-alert{background:#343952;height:2.25rem;color:#f7d873}::ng-deep .global-alert.expired{color:#e38b7a}::ng-deep .global-alert.expired a{color:#fac3b7;margin-left:.5rem}::ng-deep .global-alert a{color:#f7d873}::ng-deep .global-alert-action{position:absolute;right:.75rem;top:.375rem}::ng-deep .global-alert-action span{letter-spacing:2px}::ng-deep .global-alert-action button{background:transparent;border-radius:0;border:none;color:#fff}::ng-deep .global-alert-action button.disabled{pointer-events:none;opacity:.5;color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: ApiService }]; }, propDecorators: { feature: [{
+                type: Input
+            }], subscriptionStatus: [{
+                type: Output
+            }] } });
 
-dayjs.extend(customParseFormat);
 class BusinessCycleService {
     constructor(authorizer) {
         this.authorizer = authorizer;
@@ -961,7 +1200,7 @@ class BusinessCycleService {
      * @returns  date in this formate DD MMM YYYY
      */
     convertDate(date) {
-        return dayjs(date, 'DD-MM-YYYY').format('DD MMM YYYY');
+        return moment(date, 'DD-MM-YYYY').format('DD MMM YYYY');
     }
     /**
      * #### Description
@@ -1425,7 +1664,7 @@ class BusinessCycleComponent {
             });
         }
         else {
-            this.businessCycleList.forEach((cycle) => {
+            this.businessCycleList?.forEach((cycle) => {
                 let isDisabled = true;
                 this.tempSelectedCycle.forEach((el) => {
                     if (cycle.start_date == el.start_date) {
@@ -1529,11 +1768,11 @@ class BusinessCycleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleComponent, deps: [{ token: i1$1.AuthorizerService }, { token: BusinessCycleService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: { orgDetails: "orgDetails" }, outputs: { businessCycleChange: "businessCycleChange" }, ngImport: i0, template: "<div\r\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\r\n  appPopover\r\n  (click)=\"businessCyclePop.popover()\"\r\n  position=\"left\"\r\n>\r\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\r\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\r\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\r\n        cycleToShow === \"Show Future Due Dates\"\r\n          ? \"Future Due Dates\"\r\n          : cycleToShow\r\n      }}</span>\r\n    </div>\r\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\r\n  </div>\r\n</div>\r\n\r\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\r\n  <div class=\"vc-business-cycle-popover-container\">\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n    >\r\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\r\n        You can select upto a max of two consecutive years\r\n      </p>\r\n    </div>\r\n    <div class=\"vc-business-cycle-popover-container-body\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <ng-container\r\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\r\n        >\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() ===\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n            [class.future-cycle]=\"true\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >Show Future Due Dates</app-cs-checkbox\r\n            >\r\n            <i\r\n              class=\"icons info-icon vx-fs-12\"\r\n              [arTooltip]=\"\r\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\r\n              \"\r\n              placement=\"bottom\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </li>\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() !==\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >{{ eachCycle?.start_date | dateFormat }} -\r\n              <ng-container>\r\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\r\n              >\r\n            </app-cs-checkbox>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\r\n    >\r\n      <button\r\n        (click)=\"businessCyclePop.closePopover('top')\"\r\n        class=\"white vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-blue\"\r\n      >\r\n        CANCEL\r\n      </button>\r\n      <button\r\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\r\n        [class.disabled]=\"false\"\r\n        class=\"blue vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-white\"\r\n      >\r\n        APPLY\r\n      </button>\r\n    </div>\r\n  </div>\r\n</vui-popover>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .vc-business-cycle{position:relative;width:12.5rem;height:3rem;cursor:pointer;z-index:1}::ng-deep .vc-business-cycle .heading{color:#e3e3e9}::ng-deep .vc-business-cycle i.calendar{color:#e3e3e9}::ng-deep .vc-business-cycle i.arrow{color:#f1f1f1}::ng-deep .vc-business-cycle-popover-container{width:15.625rem;background:#fff;box-shadow:0 4px 8px #1e5dd326;border:1px solid #e3e3e9;border-radius:.25rem;z-index:4}::ng-deep .vc-business-cycle-popover-container-top{background:#f8f8f8}::ng-deep .vc-business-cycle-popover-container-top p{line-height:.875rem}::ng-deep .vc-business-cycle-popover-container-body{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li{list-style:none;margin:0;position:relative}::ng-deep .vc-business-cycle-popover-container-body ul li:before{background:#f1f1f1;content:\"\";position:absolute;left:.75rem;right:.75rem;bottom:0;height:.0625rem;width:calc(100% - 1.5rem)}::ng-deep .vc-business-cycle-popover-container-body ul li:last-of-type:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle{background:#fadd8a}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.checkbox{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.value i{margin-left:.375rem}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle .info-icon{margin-left:.375rem;cursor:context-menu}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox{display:flex}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#161b2f!important;max-width:100%!important}::ng-deep .vc-business-cycle-popover-container-footer{background:#f8f8f8;border-radius:0 0 .25rem .25rem}::ng-deep .vc-business-cycle-popover-container-footer button{width:calc(50% - .125rem);height:1.5rem;border:1px solid transparent;text-transform:uppercase;border-radius:.125rem;line-height:1.375rem}::ng-deep .vc-business-cycle-popover-container-footer button.white{background:#fff;border-color:#dbdbdb}::ng-deep .vc-business-cycle-popover-container-footer button.blue{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .vc-business-cycle-popover-container-footer button.disabled{background:#dbdbdb;color:#747576;border:none;pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "vui-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "position"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: { orgDetails: "orgDetails" }, outputs: { businessCycleChange: "businessCycleChange" }, ngImport: i0, template: "<div\r\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\r\n  appPopover\r\n  (click)=\"businessCyclePop.popover()\"\r\n  position=\"left\"\r\n>\r\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\r\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\r\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\r\n        cycleToShow === \"Show Future Due Dates\"\r\n          ? \"Future Due Dates\"\r\n          : cycleToShow\r\n      }}</span>\r\n    </div>\r\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\r\n  </div>\r\n</div>\r\n\r\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\r\n  <div class=\"vc-business-cycle-popover-container\">\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n    >\r\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\r\n        You can select upto a max of two consecutive years\r\n      </p>\r\n    </div>\r\n    <div class=\"vc-business-cycle-popover-container-body\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <ng-container\r\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\r\n        >\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() ===\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n            [class.future-cycle]=\"true\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >Show Future Due Dates</app-cs-checkbox\r\n            >\r\n            <i\r\n              class=\"icons info-icon vx-fs-12\"\r\n              [arTooltip]=\"\r\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\r\n              \"\r\n              placement=\"bottom\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </li>\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() !==\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >{{ eachCycle?.start_date | dateFormat }} -\r\n              <ng-container>\r\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\r\n              >\r\n            </app-cs-checkbox>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\r\n    >\r\n      <button\r\n        (click)=\"businessCyclePop.closePopover('top')\"\r\n        class=\"white vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-blue\"\r\n      >\r\n        CANCEL\r\n      </button>\r\n      <button\r\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\r\n        [class.disabled]=\"false\"\r\n        class=\"blue vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-white\"\r\n      >\r\n        APPLY\r\n      </button>\r\n    </div>\r\n  </div>\r\n</vui-popover>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .vc-business-cycle{position:relative;width:12.5rem;height:3rem;cursor:pointer;z-index:1}::ng-deep .vc-business-cycle .heading{color:#e3e3e9}::ng-deep .vc-business-cycle i.calendar{color:#e3e3e9}::ng-deep .vc-business-cycle i.arrow{color:#f1f1f1}::ng-deep .vc-business-cycle-popover-container{width:15.625rem;background:#fff;box-shadow:0 4px 8px #1e5dd326;border:1px solid #e3e3e9;border-radius:.25rem;z-index:4}::ng-deep .vc-business-cycle-popover-container-top{background:#f8f8f8}::ng-deep .vc-business-cycle-popover-container-top p{line-height:.875rem}::ng-deep .vc-business-cycle-popover-container-body{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li{list-style:none;margin:0;position:relative}::ng-deep .vc-business-cycle-popover-container-body ul li:before{background:#f1f1f1;content:\"\";position:absolute;left:.75rem;right:.75rem;bottom:0;height:.0625rem;width:calc(100% - 1.5rem)}::ng-deep .vc-business-cycle-popover-container-body ul li:last-of-type:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle{background:#fadd8a}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.checkbox{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.value i{margin-left:.375rem}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle .info-icon{margin-left:.375rem;cursor:context-menu}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox{display:flex}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#161b2f!important;max-width:100%!important}::ng-deep .vc-business-cycle-popover-container-footer{background:#f8f8f8;border-radius:0 0 .25rem .25rem}::ng-deep .vc-business-cycle-popover-container-footer button{width:calc(50% - .125rem);height:1.5rem;border:1px solid transparent;text-transform:uppercase;border-radius:.125rem;line-height:1.375rem}::ng-deep .vc-business-cycle-popover-container-footer button.white{background:#fff;border-color:#dbdbdb}::ng-deep .vc-business-cycle-popover-container-footer button.blue{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .vc-business-cycle-popover-container-footer button.disabled{background:#dbdbdb;color:#747576;border:none;pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "vui-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "position"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-business-cycle', template: "<div\r\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\r\n  appPopover\r\n  (click)=\"businessCyclePop.popover()\"\r\n  position=\"left\"\r\n>\r\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\r\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\r\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\r\n        cycleToShow === \"Show Future Due Dates\"\r\n          ? \"Future Due Dates\"\r\n          : cycleToShow\r\n      }}</span>\r\n    </div>\r\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\r\n  </div>\r\n</div>\r\n\r\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\r\n  <div class=\"vc-business-cycle-popover-container\">\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n    >\r\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\r\n        You can select upto a max of two consecutive years\r\n      </p>\r\n    </div>\r\n    <div class=\"vc-business-cycle-popover-container-body\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <ng-container\r\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\r\n        >\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() ===\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n            [class.future-cycle]=\"true\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >Show Future Due Dates</app-cs-checkbox\r\n            >\r\n            <i\r\n              class=\"icons info-icon vx-fs-12\"\r\n              [arTooltip]=\"\r\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\r\n              \"\r\n              placement=\"bottom\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </li>\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() !==\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >{{ eachCycle?.start_date | dateFormat }} -\r\n              <ng-container>\r\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\r\n              >\r\n            </app-cs-checkbox>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\r\n    >\r\n      <button\r\n        (click)=\"businessCyclePop.closePopover('top')\"\r\n        class=\"white vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-blue\"\r\n      >\r\n        CANCEL\r\n      </button>\r\n      <button\r\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\r\n        [class.disabled]=\"false\"\r\n        class=\"blue vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-white\"\r\n      >\r\n        APPLY\r\n      </button>\r\n    </div>\r\n  </div>\r\n</vui-popover>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .vc-business-cycle{position:relative;width:12.5rem;height:3rem;cursor:pointer;z-index:1}::ng-deep .vc-business-cycle .heading{color:#e3e3e9}::ng-deep .vc-business-cycle i.calendar{color:#e3e3e9}::ng-deep .vc-business-cycle i.arrow{color:#f1f1f1}::ng-deep .vc-business-cycle-popover-container{width:15.625rem;background:#fff;box-shadow:0 4px 8px #1e5dd326;border:1px solid #e3e3e9;border-radius:.25rem;z-index:4}::ng-deep .vc-business-cycle-popover-container-top{background:#f8f8f8}::ng-deep .vc-business-cycle-popover-container-top p{line-height:.875rem}::ng-deep .vc-business-cycle-popover-container-body{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li{list-style:none;margin:0;position:relative}::ng-deep .vc-business-cycle-popover-container-body ul li:before{background:#f1f1f1;content:\"\";position:absolute;left:.75rem;right:.75rem;bottom:0;height:.0625rem;width:calc(100% - 1.5rem)}::ng-deep .vc-business-cycle-popover-container-body ul li:last-of-type:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle{background:#fadd8a}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.checkbox{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.value i{margin-left:.375rem}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle .info-icon{margin-left:.375rem;cursor:context-menu}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox{display:flex}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#161b2f!important;max-width:100%!important}::ng-deep .vc-business-cycle-popover-container-footer{background:#f8f8f8;border-radius:0 0 .25rem .25rem}::ng-deep .vc-business-cycle-popover-container-footer button{width:calc(50% - .125rem);height:1.5rem;border:1px solid transparent;text-transform:uppercase;border-radius:.125rem;line-height:1.375rem}::ng-deep .vc-business-cycle-popover-container-footer button.white{background:#fff;border-color:#dbdbdb}::ng-deep .vc-business-cycle-popover-container-footer button.blue{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .vc-business-cycle-popover-container-footer button.disabled{background:#dbdbdb;color:#747576;border:none;pointer-events:none!important}\n"] }]
+            args: [{ selector: 'vc-business-cycle', template: "<div\r\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\r\n  appPopover\r\n  (click)=\"businessCyclePop.popover()\"\r\n  position=\"left\"\r\n>\r\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\r\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\r\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\r\n        cycleToShow === \"Show Future Due Dates\"\r\n          ? \"Future Due Dates\"\r\n          : cycleToShow\r\n      }}</span>\r\n    </div>\r\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\r\n  </div>\r\n</div>\r\n\r\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\r\n  <div class=\"vc-business-cycle-popover-container\">\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n    >\r\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\r\n        You can select upto a max of two consecutive years\r\n      </p>\r\n    </div>\r\n    <div class=\"vc-business-cycle-popover-container-body\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <ng-container\r\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\r\n        >\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() ===\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n            [class.future-cycle]=\"true\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >Show Future Due Dates</app-cs-checkbox\r\n            >\r\n            <i\r\n              class=\"icons info-icon vx-fs-12\"\r\n              [arTooltip]=\"\r\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\r\n              \"\r\n              placement=\"bottom\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </li>\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() !==\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >{{ eachCycle?.start_date | dateFormat }} -\r\n              <ng-container>\r\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\r\n              >\r\n            </app-cs-checkbox>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\r\n    >\r\n      <button\r\n        (click)=\"businessCyclePop.closePopover('top')\"\r\n        class=\"white vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-blue\"\r\n      >\r\n        CANCEL\r\n      </button>\r\n      <button\r\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\r\n        [class.disabled]=\"false\"\r\n        class=\"blue vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-white\"\r\n      >\r\n        APPLY\r\n      </button>\r\n    </div>\r\n  </div>\r\n</vui-popover>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .vc-business-cycle{position:relative;width:12.5rem;height:3rem;cursor:pointer;z-index:1}::ng-deep .vc-business-cycle .heading{color:#e3e3e9}::ng-deep .vc-business-cycle i.calendar{color:#e3e3e9}::ng-deep .vc-business-cycle i.arrow{color:#f1f1f1}::ng-deep .vc-business-cycle-popover-container{width:15.625rem;background:#fff;box-shadow:0 4px 8px #1e5dd326;border:1px solid #e3e3e9;border-radius:.25rem;z-index:4}::ng-deep .vc-business-cycle-popover-container-top{background:#f8f8f8}::ng-deep .vc-business-cycle-popover-container-top p{line-height:.875rem}::ng-deep .vc-business-cycle-popover-container-body{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li{list-style:none;margin:0;position:relative}::ng-deep .vc-business-cycle-popover-container-body ul li:before{background:#f1f1f1;content:\"\";position:absolute;left:.75rem;right:.75rem;bottom:0;height:.0625rem;width:calc(100% - 1.5rem)}::ng-deep .vc-business-cycle-popover-container-body ul li:last-of-type:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle{background:#fadd8a}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.checkbox{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.value i{margin-left:.375rem}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle .info-icon{margin-left:.375rem;cursor:context-menu}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox{display:flex}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#161b2f!important;max-width:100%!important}::ng-deep .vc-business-cycle-popover-container-footer{background:#f8f8f8;border-radius:0 0 .25rem .25rem}::ng-deep .vc-business-cycle-popover-container-footer button{width:calc(50% - .125rem);height:1.5rem;border:1px solid transparent;text-transform:uppercase;border-radius:.125rem;line-height:1.375rem}::ng-deep .vc-business-cycle-popover-container-footer button.white{background:#fff;border-color:#dbdbdb}::ng-deep .vc-business-cycle-popover-container-footer button.blue{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .vc-business-cycle-popover-container-footer button.disabled{background:#dbdbdb;color:#747576;border:none;pointer-events:none!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthorizerService }, { type: BusinessCycleService }, { type: ApiService }]; }, propDecorators: { businessCycleChange: [{
                 type: Output
             }], orgDetails: [{
@@ -1544,11 +1783,11 @@ class SearchComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", ngImport: i0, template: "<div class=\"vc-search\">\r\n  <input type=\"text\" placeholder=\"Search\" />\r\n  <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n  <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n  <div\r\n    class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n    [arTooltip]=\"'Advance Search'\"\r\n    placement=\"bottom\"\r\n    type=\"black\"\r\n    delay=\"0\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:#282e48;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", ngImport: i0, template: "<div class=\"vc-search\">\r\n  <input type=\"text\" placeholder=\"Search\" />\r\n  <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n  <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n  <div\r\n    class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n    [arTooltip]=\"'Advance Search'\"\r\n    placement=\"bottom\"\r\n    type=\"black\"\r\n    delay=\"0\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:transparent;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-search', template: "<div class=\"vc-search\">\r\n  <input type=\"text\" placeholder=\"Search\" />\r\n  <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n  <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n  <div\r\n    class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n    [arTooltip]=\"'Advance Search'\"\r\n    placement=\"bottom\"\r\n    type=\"black\"\r\n    delay=\"0\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:#282e48;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"] }]
+            args: [{ selector: 'vc-search', template: "<div class=\"vc-search\">\r\n  <input type=\"text\" placeholder=\"Search\" />\r\n  <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n  <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n  <div\r\n    class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n    [arTooltip]=\"'Advance Search'\"\r\n    placement=\"bottom\"\r\n    type=\"black\"\r\n    delay=\"0\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:transparent;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class CreateWorkflowComponent {
@@ -1746,49 +1985,33 @@ class HeaderContainerComponent {
     constructor(apiService) {
         this.apiService = apiService;
         this.ASSETS = ASSETS;
-        this.showBusinessCycle = ['/'];
+        this.showBusinessCycle = BUSINESS_CYCLE_URL;
         this.currentUrl = '';
         this.businessCycleChange = new EventEmitter();
         this.openDialog = new EventEmitter();
         this.currentUrl = window.location.pathname;
         console.log('currentUrl', this.currentUrl);
     }
-    ngOnInit() { }
+    businessCycleChangeHandler(event) {
+        this.businessCycleChange.emit(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderContainerComponent, selector: "vc-header-container", outputs: { openDialog: "openDialog" }, ngImport: i0, template: "<vc-global-alert *ngIf=\"false\"></vc-global-alert>\r\n<div\r\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <a\r\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n      [arTooltip]=\"'Go to Dashboard'\"\r\n      placement=\"right\"\r\n      type=\"white\"\r\n      delay=\"0\"\r\n      [tooltipMandatory]=\"true\"\r\n      [animate]=\"true\"\r\n      ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n      (businessCycleChange)=\"businessCycleChange.emit($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search *ngIf=\"false\"></vc-search>\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n    <vc-create-workflow\r\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n    ></vc-create-workflow>\r\n    <vc-queue></vc-queue>\r\n    <vc-user-details\r\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n    ></vc-user-details>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{background:#161b2f;height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: GlobalAlertComponent, selector: "vc-global-alert" }, { kind: "component", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: ["orgDetails"], outputs: ["businessCycleChange"] }, { kind: "component", type: SearchComponent, selector: "vc-search" }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", outputs: ["openWorkflow"] }, { kind: "component", type: QueueComponent, selector: "vc-queue" }, { kind: "component", type: UserDetailsComponent, selector: "vc-user-details", inputs: ["userDetails", "subscriptionDetails"] }, { kind: "component", type: SupportComponent, selector: "vc-support", outputs: ["openSupport"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CreatePermissionPipe, name: "checkPermission" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderContainerComponent, selector: "vc-header-container", inputs: { featureFlag: "featureFlag" }, outputs: { businessCycleChange: "businessCycleChange", openDialog: "openDialog" }, ngImport: i0, template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\r\n<div\r\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <a\r\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n      [arTooltip]=\"'Go to Dashboard'\"\r\n      placement=\"right\"\r\n      type=\"white\"\r\n      delay=\"0\"\r\n      [tooltipMandatory]=\"true\"\r\n      [animate]=\"true\"\r\n      ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n      (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search *ngIf=\"false\"></vc-search>\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n    <vc-create-workflow\r\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n    ></vc-create-workflow>\r\n    <vc-queue></vc-queue>\r\n    <vc-user-details\r\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n    ></vc-user-details>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: GlobalAlertComponent, selector: "vc-global-alert", inputs: ["feature"], outputs: ["subscriptionStatus"] }, { kind: "component", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: ["orgDetails"], outputs: ["businessCycleChange"] }, { kind: "component", type: SearchComponent, selector: "vc-search" }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", outputs: ["openWorkflow"] }, { kind: "component", type: QueueComponent, selector: "vc-queue" }, { kind: "component", type: UserDetailsComponent, selector: "vc-user-details", inputs: ["userDetails", "subscriptionDetails"] }, { kind: "component", type: SupportComponent, selector: "vc-support", outputs: ["openSupport"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CreatePermissionPipe, name: "checkPermission" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-header-container', template: "<vc-global-alert *ngIf=\"false\"></vc-global-alert>\r\n<div\r\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <a\r\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n      [arTooltip]=\"'Go to Dashboard'\"\r\n      placement=\"right\"\r\n      type=\"white\"\r\n      delay=\"0\"\r\n      [tooltipMandatory]=\"true\"\r\n      [animate]=\"true\"\r\n      ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n      (businessCycleChange)=\"businessCycleChange.emit($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search *ngIf=\"false\"></vc-search>\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n    <vc-create-workflow\r\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n    ></vc-create-workflow>\r\n    <vc-queue></vc-queue>\r\n    <vc-user-details\r\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n    ></vc-user-details>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{background:#161b2f;height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: ApiService }]; }, propDecorators: { openDialog: [{
+            args: [{ selector: 'vc-header-container', template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\r\n<div\r\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <a\r\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n      [arTooltip]=\"'Go to Dashboard'\"\r\n      placement=\"right\"\r\n      type=\"white\"\r\n      delay=\"0\"\r\n      [tooltipMandatory]=\"true\"\r\n      [animate]=\"true\"\r\n      ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n      (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search *ngIf=\"false\"></vc-search>\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n    <vc-create-workflow\r\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n    ></vc-create-workflow>\r\n    <vc-queue></vc-queue>\r\n    <vc-user-details\r\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n    ></vc-user-details>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: ApiService }]; }, propDecorators: { featureFlag: [{
+                type: Input
+            }], businessCycleChange: [{
+                type: Output
+            }], openDialog: [{
                 type: Output
             }] } });
 
 class SubMenuContainerComponent {
     constructor() {
-        this.subMenuData = [
-            {
-                name: 'Policy',
-                code: 'POLICY',
-                callback: () => { },
-                href: '#',
-                class: 'active',
-            },
-            {
-                name: 'Issue',
-                code: 'ISSUE',
-                callback: () => { },
-                href: '#',
-                class: '',
-            },
-            {
-                name: 'Risk',
-                code: 'RISK',
-                callback: () => { },
-                href: '#',
-                class: '',
-            },
-        ];
+        this.subMenuData = [];
         this.onCloseSubMenu = new EventEmitter();
     }
     ngOnInit() { }
@@ -1891,12 +2114,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class PipesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, declarations: [GetFileUrlPipe,
+            CreatePermissionPipe,
+            DateFormatPipe,
+            GetModuleIconPipe], imports: [CommonModule], exports: [GetFileUrlPipe,
+            CreatePermissionPipe,
+            DateFormatPipe,
+            GetModuleIconPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GetFileUrlPipe,
+                        CreatePermissionPipe,
+                        DateFormatPipe,
+                        GetModuleIconPipe,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        GetFileUrlPipe,
+                        CreatePermissionPipe,
+                        DateFormatPipe,
+                        GetModuleIconPipe,
+                    ],
+                }]
+        }] });
+
 class ProductListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, declarations: [ProductListContainerComponent,
             ModuleListComponent,
-            PreferenceListComponent], imports: [CommonModule, TooltipModule], exports: [ProductListContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, imports: [CommonModule, TooltipModule] }); }
+            PreferenceListComponent], imports: [CommonModule, TooltipModule, PipesModule], exports: [ProductListContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, imports: [CommonModule, TooltipModule, PipesModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, decorators: [{
             type: NgModule,
@@ -1906,25 +2159,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ModuleListComponent,
                         PreferenceListComponent,
                     ],
-                    imports: [CommonModule, TooltipModule],
+                    imports: [CommonModule, TooltipModule, PipesModule],
                     exports: [ProductListContainerComponent],
                 }]
         }] });
 
-class PipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, declarations: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe], imports: [CommonModule], exports: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe],
-                    imports: [CommonModule],
-                    exports: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe],
-                }]
-        }] });
-
 class AvatarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule, PipesModule], exports: [AvatarComponent] }); }