vc-layout 1.0.87 → 1.0.88

package/fesm2022/vc-layout.mjs

@@ -320,9 +320,9 @@ const ASSETS = {
 };
 
 const IN_APP_URL = {
-    MANAGE_RESPONSIBILITY: '/complianceops/',
-    MY_RESPONSIBILITY: '/complianceops/',
-    QUEUE: '/complianceops/',
+    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',
@@ -333,11 +333,11 @@ const IN_APP_URL = {
     ASSURANCE: '/assurance/test_dashboard',
     AUDIT: '/global-dashboard/audit_dashboard?module=audit',
     ISSUE: '/global-dashboard/issue_dashboard?module=issue',
-    ALL: '/policyops/',
+    ALL: '/global-dashboard/policy_dashboard?module=policy',
     EDIT_PROFILE: '/settings/settings/profile?edit_profile=true',
     DOWNLOAD_CENTER: '/downloads-center/',
     PASSWORD_RESET: `/settings/settings/account-access-and-settings/general-settings`,
-    DEFAULT: '/policyops/',
+    DEFAULT: '/global-dashboard/',
     CASE: '/global-dashboard/case_dashboard?module=caseOps',
 };
 
@@ -482,10 +482,7 @@ class ProductListService {
             AUDIT: subscriptionList.audit_flag,
             ALL: subscriptionList.policy_flag,
             ASSESSMENT: subscriptionList.assessment_flag,
-            CASE: subscriptionList.case_flag,
-            COMPLIANCE: subscriptionList.compliance_flag,
-            TO_DO_RESPONSIBILITIES: subscriptionList.compliance_flag,
-            DASHBOARD: subscriptionList.compliance_flag
+            CASE: subscriptionList.case_flag
         };
         const code = Object.keys(flags).filter((key) => flags[key] === 0);
         return productList.filter((product) => !code.includes(product.code));
@@ -697,27 +694,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class PageLoaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageLoaderComponent, selector: "app-page-loader", ngImport: i0, template: `<div class="index-loader-area">
-    <div class="index-left-menu">
-      <div class="index-left-logo"></div>
-      <div class="index-left-logo"></div>
-      <div class="index-left-logo"></div>
-      <div class="index-left-icon"></div>
-      <div class="index-left-icon"></div>
-    </div>
-  </div>`, isInline: true, styles: [".index-loader-area{display:flex;height:100%}.index-left-menu{width:48px;background:#161b2f;height:100%;position:relative}.index-left-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-logo:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-icon:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon:nth-last-child(2){position:absolute;bottom:3rem;left:0}.index-left-icon:last-of-type{position:absolute;bottom:0;left:0}@keyframes spin{to{transform:rotate(360deg)}}@media screen and (max-width: 1365px){.index-v-loader{width:100%}}.beamer_defaultBeamerSelector{bottom:10px!important;right:10px!important;width:30px!important;height:30px!important;background-color:#1e5dd3!important;background-size:60%!important}.beamer_defaultBeamerSelector.beamer_beamerSelector{z-index:2!important}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageLoaderComponent, selector: "app-page-loader", ngImport: i0, template: `<div class="index-loader-area">
+    <div class="index-left-menu">
+      <div class="index-left-logo"></div>
+      <div class="index-left-logo"></div>
+      <div class="index-left-logo"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+    </div>
+  </div>`, isInline: true, styles: [".index-loader-area{display:flex}.index-left-menu{width:48px;background:#161b2f;height:100vh;position:relative}.index-left-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-logo:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-icon:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon:last-of-type{position:absolute;bottom:0;left:0}@keyframes spin{to{transform:rotate(360deg)}}@media screen and (max-width: 1365px){.index-v-loader{width:100%}}.beamer_defaultBeamerSelector{bottom:10px!important;right:10px!important;width:30px!important;height:30px!important;background-color:#1e5dd3!important;background-size:60%!important}.beamer_defaultBeamerSelector.beamer_beamerSelector{z-index:2!important}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-page-loader', template: `<div class="index-loader-area">
-    <div class="index-left-menu">
-      <div class="index-left-logo"></div>
-      <div class="index-left-logo"></div>
-      <div class="index-left-logo"></div>
-      <div class="index-left-icon"></div>
-      <div class="index-left-icon"></div>
-    </div>
-  </div>`, styles: [".index-loader-area{display:flex;height:100%}.index-left-menu{width:48px;background:#161b2f;height:100%;position:relative}.index-left-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-logo:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-icon:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon:nth-last-child(2){position:absolute;bottom:3rem;left:0}.index-left-icon:last-of-type{position:absolute;bottom:0;left:0}@keyframes spin{to{transform:rotate(360deg)}}@media screen and (max-width: 1365px){.index-v-loader{width:100%}}.beamer_defaultBeamerSelector{bottom:10px!important;right:10px!important;width:30px!important;height:30px!important;background-color:#1e5dd3!important;background-size:60%!important}.beamer_defaultBeamerSelector.beamer_beamerSelector{z-index:2!important}\n"] }]
+            args: [{ selector: 'app-page-loader', template: `<div class="index-loader-area">
+    <div class="index-left-menu">
+      <div class="index-left-logo"></div>
+      <div class="index-left-logo"></div>
+      <div class="index-left-logo"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+      <div class="index-left-icon"></div>
+    </div>
+  </div>`, styles: [".index-loader-area{display:flex}.index-left-menu{width:48px;background:#161b2f;height:100vh;position:relative}.index-left-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-logo:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.index-left-icon:before{background:#2d3860;border-radius:50%;content:\"\";width:20px;height:20px}.index-left-icon:last-of-type{position:absolute;bottom:0;left:0}@keyframes spin{to{transform:rotate(360deg)}}@media screen and (max-width: 1365px){.index-v-loader{width:100%}}.beamer_defaultBeamerSelector{bottom:10px!important;right:10px!important;width:30px!important;height:30px!important;background-color:#1e5dd3!important;background-size:60%!important}.beamer_defaultBeamerSelector.beamer_beamerSelector{z-index:2!important}\n"] }]
         }] });
 
 class GetModuleIconPipe {
@@ -750,53 +761,17 @@ class ModuleListComponent {
         this.isSubMenuVisible = true;
         this.onToggleSubmenu = new EventEmitter();
         this.ASSETS = ASSETS;
-        this.PRODUCT_LIST = [];
+        this.PRODUCT_LIST = [...new Set(PRODUCT_LIST)];
         this.assessmentPermission = [];
         this.apiService.getSubscriptionList();
     }
     ngOnInit() {
         this.setLoader();
-        this.initializeProductList();
     }
     ngOnChanges() {
         this.getUserDetails();
         this.checkModuleSubscription();
     }
-    /**
-     * Initialize the product list only after all required data is available
-     * This prevents icon flashing by building the filtered list incrementally
-     */
-    initializeProductList() {
-        this.apiService.loggedUserDetail$.subscribe((userData) => {
-            this.apiService.subscriptionDetail$.subscribe((subscriptionData) => {
-                if (userData && subscriptionData) {
-                    this.buildFilteredProductList(subscriptionData);
-                }
-            });
-        });
-    }
-    /**
-     * Build the filtered product list incrementally and show all at once
-     * This prevents icon flashing by only showing the final filtered result
-     */
-    buildFilteredProductList(subscriptionData) {
-        let filteredList = [...new Set(PRODUCT_LIST)];
-        filteredList = this.productListService.subscribedProduct(filteredList, subscriptionData);
-        if (!this.assessmentPermissionCheck(this.rbacService.getRBACPermissions('assessment'))) {
-            filteredList = filteredList.filter((item) => item.code !== CODES[0]);
-        }
-        if (this.featureFlag.isFeatureEnabled('ff_cases_enabled')) {
-            filteredList = filteredList.filter((item) => item.code !== CODES[1]);
-        }
-        else {
-            filteredList = filteredList.filter((item) => item.code !== CODES[2]);
-        }
-        if (!this.isSubMenuVisible) {
-            filteredList = filteredList.filter((product) => product.code !== 'TOGGLE');
-        }
-        this.PRODUCT_LIST = filteredList;
-        this.setProductList();
-    }
     /**
      * Handles the toggle event of the submenu for each product.
      *
@@ -875,86 +850,86 @@ class ModuleListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModuleListComponent, deps: [{ token: ProductListService }, { token: ApiService }, { token: RbacService }], 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", activeModule: "activeModule", isSubMenuVisible: "isSubMenuVisible" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, usesOnChanges: true, ngImport: i0, template: `
-    <app-page-loader *ngIf="isLoading"></app-page-loader>
-    <ng-container *ngIf="!isLoading">
-    <div class="module-list">
-      <ul class="vx-p-0 vx-m-0">
-        <li
-          *ngFor="let eachProduct of PRODUCT_LIST"
-          class="vx-d-flex vx-align-center vx-justify-center"
-          [ngClass]="eachProduct.class"
-          [class.active]="activeModule === eachProduct.code"
-        >
-          <a
-            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
-            [ngClass]="eachProduct?.linkClass"
-            [arTooltip]="eachProduct.name"
-            placement="right"
-            type="black"
-            delay="0"
-            [tooltipMandatory]="true"
-            [animate]="true"
-            (click)="eachProduct?.callback(eachProduct)"
-            ><img
-              [src]="eachProduct.code | getModuleIcon : activeModule"
-              alt=""
-              width="16"
-              height="16"
-            />
-            <ng-template *ngIf="eachProduct?.code !== 'TOGGLE'">
-              [href]="eachProduct.url"
-            </ng-template>
-            <ng-template *ngElse>
-              (click)="onSubMenuToggle(eachProduct)"
-            </ng-template>
-          </a>
-        </li>
-        </ul>
-      </div>
-    </ng-container>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModuleListComponent, selector: "vc-module-list", inputs: { featureFlag: "featureFlag", activeModule: "activeModule", isSubMenuVisible: "isSubMenuVisible" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, usesOnChanges: true, ngImport: i0, template: `
+    <app-page-loader *ngIf="isLoading"></app-page-loader>
+    <ng-container *ngIf="!isLoading">
+    <div class="module-list">
+      <ul class="vx-p-0 vx-m-0">
+        <li
+          *ngFor="let eachProduct of PRODUCT_LIST"
+          class="vx-d-flex vx-align-center vx-justify-center"
+          [ngClass]="eachProduct.class"
+          [class.active]="activeModule === eachProduct.code"
+        >
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
+            [ngClass]="eachProduct?.linkClass"
+            [arTooltip]="eachProduct.name"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            (click)="eachProduct?.callback(eachProduct)"
+            ><img
+              [src]="eachProduct.code | getModuleIcon : activeModule"
+              alt=""
+              width="16"
+              height="16"
+            />
+            <ng-template *ngIf="eachProduct?.code !== 'TOGGLE'">
+              [href]="eachProduct.url"
+            </ng-template>
+            <ng-template *ngElse>
+              (click)="onSubMenuToggle(eachProduct)"
+            </ng-template>
+          </a>
+        </li>
+        </ul>
+      </div>
+    </ng-container>
   `, 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}@media screen and (max-width: 1366px){.module-list ul li.active:before{top:.25rem}}.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}@media screen and (max-width: 1366px){.module-list ul li.dashboard-list:after{top:.125rem;height:2.375rem}}.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}@media screen and (max-width: 1366px){.module-list ul li.toDoResponsibility-list:after{bottom:.125rem;height:2.375rem}}.module-list ul li a{height:3rem}@media screen and (max-width: 1366px){.module-list ul li a{height:2.5rem}}.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: 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: PageLoaderComponent, selector: "app-page-loader" }, { kind: "pipe", type: GetModuleIconPipe, name: "getModuleIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModuleListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-module-list', template: `
-    <app-page-loader *ngIf="isLoading"></app-page-loader>
-    <ng-container *ngIf="!isLoading">
-    <div class="module-list">
-      <ul class="vx-p-0 vx-m-0">
-        <li
-          *ngFor="let eachProduct of PRODUCT_LIST"
-          class="vx-d-flex vx-align-center vx-justify-center"
-          [ngClass]="eachProduct.class"
-          [class.active]="activeModule === eachProduct.code"
-        >
-          <a
-            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
-            [ngClass]="eachProduct?.linkClass"
-            [arTooltip]="eachProduct.name"
-            placement="right"
-            type="black"
-            delay="0"
-            [tooltipMandatory]="true"
-            [animate]="true"
-            (click)="eachProduct?.callback(eachProduct)"
-            ><img
-              [src]="eachProduct.code | getModuleIcon : activeModule"
-              alt=""
-              width="16"
-              height="16"
-            />
-            <ng-template *ngIf="eachProduct?.code !== 'TOGGLE'">
-              [href]="eachProduct.url"
-            </ng-template>
-            <ng-template *ngElse>
-              (click)="onSubMenuToggle(eachProduct)"
-            </ng-template>
-          </a>
-        </li>
-        </ul>
-      </div>
-    </ng-container>
+            args: [{ selector: 'vc-module-list', template: `
+    <app-page-loader *ngIf="isLoading"></app-page-loader>
+    <ng-container *ngIf="!isLoading">
+    <div class="module-list">
+      <ul class="vx-p-0 vx-m-0">
+        <li
+          *ngFor="let eachProduct of PRODUCT_LIST"
+          class="vx-d-flex vx-align-center vx-justify-center"
+          [ngClass]="eachProduct.class"
+          [class.active]="activeModule === eachProduct.code"
+        >
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
+            [ngClass]="eachProduct?.linkClass"
+            [arTooltip]="eachProduct.name"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            (click)="eachProduct?.callback(eachProduct)"
+            ><img
+              [src]="eachProduct.code | getModuleIcon : activeModule"
+              alt=""
+              width="16"
+              height="16"
+            />
+            <ng-template *ngIf="eachProduct?.code !== 'TOGGLE'">
+              [href]="eachProduct.url"
+            </ng-template>
+            <ng-template *ngElse>
+              (click)="onSubMenuToggle(eachProduct)"
+            </ng-template>
+          </a>
+        </li>
+        </ul>
+      </div>
+    </ng-container>
   `, 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}@media screen and (max-width: 1366px){.module-list ul li.active:before{top:.25rem}}.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}@media screen and (max-width: 1366px){.module-list ul li.dashboard-list:after{top:.125rem;height:2.375rem}}.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}@media screen and (max-width: 1366px){.module-list ul li.toDoResponsibility-list:after{bottom:.125rem;height:2.375rem}}.module-list ul li a{height:3rem}@media screen and (max-width: 1366px){.module-list ul li a{height:2.5rem}}.module-list ul li a.vc-hamburger{height:2rem}.module-list ul li a img{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductListService }, { type: ApiService }, { type: RbacService }]; }, propDecorators: { featureFlag: [{
                 type: Input
@@ -990,66 +965,68 @@ class PreferenceListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, deps: [{ token: LayoutService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreferenceListComponent, selector: "vc-preference-list", inputs: { activeModule: "activeModule" }, ngImport: i0, template: `
-    <ng-container *ngIf="!isLoading">
-      <div class="preference-list">
-        <ul class="vx-p-0 vx-m-0">
-          <li
-          *ngFor="let eachItems of PREFERENCE_LIST"
-          class="vx-d-flex vx-align-center vx-justify-center"
-          [class.active]="activeModule === eachItems.code"
-        >
-          <a
-            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
-            [arTooltip]="eachItems?.name"
-            placement="right"
-            type="black"
-            delay="0"
-            [tooltipMandatory]="true"
-            [animate]="true"
-            [href]="eachItems?.url"
-            ><img
-              [src]="eachItems.code | getModuleIcon : activeModule"
-              alt=""
-              width="16"
-              height="16"
-          /></a>
-        </li>
-        </ul>
-      </div>
-    </ng-container>
-  `, 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}@media screen and (max-width: 1366px){.preference-list ul li.active:before{top:.25rem}}.preference-list ul li a{height:3rem}@media screen and (max-width: 1366px){.preference-list ul li a{height:2.5rem}}.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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: GetModuleIconPipe, name: "getModuleIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreferenceListComponent, selector: "vc-preference-list", inputs: { activeModule: "activeModule" }, ngImport: i0, template: `
+    <app-page-loader *ngIf="isLoading"></app-page-loader>
+    <ng-container *ngIf="!isLoading">
+      <div class="preference-list">
+        <ul class="vx-p-0 vx-m-0">
+          <li
+          *ngFor="let eachItems of PREFERENCE_LIST"
+          class="vx-d-flex vx-align-center vx-justify-center"
+          [class.active]="activeModule === eachItems.code"
+        >
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
+            [arTooltip]="eachItems?.name"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            [href]="eachItems?.url"
+            ><img
+              [src]="eachItems.code | getModuleIcon : activeModule"
+              alt=""
+              width="16"
+              height="16"
+          /></a>
+        </li>
+        </ul>
+      </div>
+    </ng-container>
+  `, 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}@media screen and (max-width: 1366px){.preference-list ul li.active:before{top:.25rem}}.preference-list ul li a{height:3rem}@media screen and (max-width: 1366px){.preference-list ul li a{height:2.5rem}}.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: 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: PageLoaderComponent, selector: "app-page-loader" }, { kind: "pipe", type: GetModuleIconPipe, name: "getModuleIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-preference-list', template: `
-    <ng-container *ngIf="!isLoading">
-      <div class="preference-list">
-        <ul class="vx-p-0 vx-m-0">
-          <li
-          *ngFor="let eachItems of PREFERENCE_LIST"
-          class="vx-d-flex vx-align-center vx-justify-center"
-          [class.active]="activeModule === eachItems.code"
-        >
-          <a
-            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
-            [arTooltip]="eachItems?.name"
-            placement="right"
-            type="black"
-            delay="0"
-            [tooltipMandatory]="true"
-            [animate]="true"
-            [href]="eachItems?.url"
-            ><img
-              [src]="eachItems.code | getModuleIcon : activeModule"
-              alt=""
-              width="16"
-              height="16"
-          /></a>
-        </li>
-        </ul>
-      </div>
-    </ng-container>
+            args: [{ selector: 'vc-preference-list', template: `
+    <app-page-loader *ngIf="isLoading"></app-page-loader>
+    <ng-container *ngIf="!isLoading">
+      <div class="preference-list">
+        <ul class="vx-p-0 vx-m-0">
+          <li
+          *ngFor="let eachItems of PREFERENCE_LIST"
+          class="vx-d-flex vx-align-center vx-justify-center"
+          [class.active]="activeModule === eachItems.code"
+        >
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center vx-w-100"
+            [arTooltip]="eachItems?.name"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            [href]="eachItems?.url"
+            ><img
+              [src]="eachItems.code | getModuleIcon : activeModule"
+              alt=""
+              width="16"
+              height="16"
+          /></a>
+        </li>
+        </ul>
+      </div>
+    </ng-container>
   `, 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}@media screen and (max-width: 1366px){.preference-list ul li.active:before{top:.25rem}}.preference-list ul li a{height:3rem}@media screen and (max-width: 1366px){.preference-list ul li a{height:2.5rem}}.preference-list ul li a img{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: LayoutService }, { type: ApiService }]; }, propDecorators: { activeModule: [{
                 type: Input
@@ -1062,26 +1039,26 @@ class ProductListContainerComponent {
         this.onToggleSubmenu = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProductListContainerComponent, selector: "vc-product-list-container", inputs: { featureFlag: "featureFlag", activeModule: "activeModule", isSubMenuVisible: "isSubMenuVisible" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, ngImport: i0, template: `<div class="product-list-container">
-    <vc-module-list
-      [featureFlag]="featureFlag"
-      [activeModule]="activeModule"
-      [isSubMenuVisible]="isSubMenuVisible"
-      (onToggleSubmenu)="onToggleSubmenu.emit()"
-    ></vc-module-list>
-    <vc-preference-list [activeModule]="activeModule"></vc-preference-list>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProductListContainerComponent, selector: "vc-product-list-container", inputs: { featureFlag: "featureFlag", activeModule: "activeModule", isSubMenuVisible: "isSubMenuVisible" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, ngImport: i0, template: `<div class="product-list-container">
+    <vc-module-list
+      [featureFlag]="featureFlag"
+      [activeModule]="activeModule"
+      [isSubMenuVisible]="isSubMenuVisible"
+      (onToggleSubmenu)="onToggleSubmenu.emit()"
+    ></vc-module-list>
+    <vc-preference-list [activeModule]="activeModule"></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", "isSubMenuVisible"], outputs: ["onToggleSubmenu"] }, { kind: "component", type: PreferenceListComponent, selector: "vc-preference-list", inputs: ["activeModule"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-product-list-container', template: `<div class="product-list-container">
-    <vc-module-list
-      [featureFlag]="featureFlag"
-      [activeModule]="activeModule"
-      [isSubMenuVisible]="isSubMenuVisible"
-      (onToggleSubmenu)="onToggleSubmenu.emit()"
-    ></vc-module-list>
-    <vc-preference-list [activeModule]="activeModule"></vc-preference-list>
+            args: [{ selector: 'vc-product-list-container', template: `<div class="product-list-container">
+    <vc-module-list
+      [featureFlag]="featureFlag"
+      [activeModule]="activeModule"
+      [isSubMenuVisible]="isSubMenuVisible"
+      (onToggleSubmenu)="onToggleSubmenu.emit()"
+    ></vc-module-list>
+    <vc-preference-list [activeModule]="activeModule"></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{width:3rem;height:100%;position:relative;z-index:1}\n"] }]
         }], propDecorators: { featureFlag: [{
                 type: Input
@@ -1126,8 +1103,8 @@ const BUSINESS_CYCLE_URL = [
     '/audit/issue/issue-workroom',
     '/audit/issue/manage-issues/my-issues',
     '/audit/issue/manage-issues/issues-i-am-overseeing',
-    // '/organization/#/user-details',
-    // '/organization/#/responsibility-center-details',
+    '/organization/#/user-details',
+    '/organization/#/responsibility-center-details',
     '/manage-case-attributes',
     '/case-register',
     '/reported-cases/reported-by-me',
@@ -1234,92 +1211,92 @@ class GlobalAlertComponent {
         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
-        *ngIf="messages.length > 1"
-        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>
+    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
+        *ngIf="messages.length > 1"
+        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
-      *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
-        *ngIf="messages.length > 1"
-        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>
+            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
+        *ngIf="messages.length > 1"
+        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
@@ -1578,11 +1555,11 @@ class PopoverComponent {
         // }, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopoverComponent, selector: "vui-popover", inputs: { dontCloseonClick: "dontCloseonClick" }, outputs: { closedOnOverlay: "closedOnOverlay" }, viewQueries: [{ propertyName: "popoverRatio", first: true, predicate: ["popoverRatio"], descendants: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"vc-overlay\"\r\n  *ngIf=\"popoverContainer\"\r\n  (click)=\"closePopover('top'); this.closedOnOverlay.emit()\"\r\n></div>\r\n<div\r\n  class=\"action\"\r\n  [class.active]=\"showPopover\"\r\n  *ngIf=\"popoverContainer\"\r\n  [style.top.px]=\"positionY\"\r\n  [style.left.px]=\"positionX\"\r\n  #popoverRatio\r\n  id=\"popoverRatio\"\r\n>\r\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.vc-overlay{z-index:12;cursor:initial}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopoverComponent, selector: "vui-popover", inputs: { dontCloseonClick: "dontCloseonClick" }, outputs: { closedOnOverlay: "closedOnOverlay" }, viewQueries: [{ propertyName: "popoverRatio", first: true, predicate: ["popoverRatio"], descendants: true }, { propertyName: "popoverContent", first: true, predicate: ["popoverContent"], descendants: true }], ngImport: i0, template: "<div\n  class=\"vc-overlay\"\n  *ngIf=\"popoverContainer\"\n  (click)=\"closePopover('top'); this.closedOnOverlay.emit()\"\n></div>\n<div\n  class=\"action\"\n  [class.active]=\"showPopover\"\n  *ngIf=\"popoverContainer\"\n  [style.top.px]=\"positionY\"\n  [style.left.px]=\"positionX\"\n  #popoverRatio\n  id=\"popoverRatio\"\n>\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.vc-overlay{z-index:12;cursor:initial}\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: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vui-popover', template: "<div\r\n  class=\"vc-overlay\"\r\n  *ngIf=\"popoverContainer\"\r\n  (click)=\"closePopover('top'); this.closedOnOverlay.emit()\"\r\n></div>\r\n<div\r\n  class=\"action\"\r\n  [class.active]=\"showPopover\"\r\n  *ngIf=\"popoverContainer\"\r\n  [style.top.px]=\"positionY\"\r\n  [style.left.px]=\"positionX\"\r\n  #popoverRatio\r\n  id=\"popoverRatio\"\r\n>\r\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.vc-overlay{z-index:12;cursor:initial}\n"] }]
+            args: [{ selector: 'vui-popover', template: "<div\n  class=\"vc-overlay\"\n  *ngIf=\"popoverContainer\"\n  (click)=\"closePopover('top'); this.closedOnOverlay.emit()\"\n></div>\n<div\n  class=\"action\"\n  [class.active]=\"showPopover\"\n  *ngIf=\"popoverContainer\"\n  [style.top.px]=\"positionY\"\n  [style.left.px]=\"positionX\"\n  #popoverRatio\n  id=\"popoverRatio\"\n>\n  <div (click)=\"closePopover(); clickedPopover()\" #popoverContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".action{position:fixed;z-index:13;display:inline-block;opacity:0}.action.active{opacity:1}.vc-overlay{z-index:12;cursor:initial}\n"] }]
         }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { dontCloseonClick: [{
                 type: Input
             }], popoverRatio: [{
@@ -1684,11 +1661,11 @@ class CsCheckboxComponent {
         this.ngValueChange.emit(this.ngValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n  <span class=\"checkbox\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-checkbox', template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n  <span class=\"checkbox\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
+            args: [{ selector: 'app-cs-checkbox', template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n  <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n  <span class=\"checkbox\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:relative;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
                 type: Input
             }], ngValue: [{
@@ -1984,11 +1961,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]=\"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;max-height:200px;overflow-y:auto}::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\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\n  appPopover\n  (click)=\"businessCyclePop.popover()\"\n  position=\"left\"\n>\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\n  </div>\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\n        cycleToShow === \"Show Future Due Dates\"\n          ? \"Future Due Dates\"\n          : cycleToShow\n      }}</span>\n    </div>\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\n  </div>\n</div>\n\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\n  <div class=\"vc-business-cycle-popover-container\">\n    <div\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\n    >\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\n        You can select upto a max of two consecutive years\n      </p>\n    </div>\n    <div class=\"vc-business-cycle-popover-container-body\">\n      <ul class=\"vx-p-0 vx-m-0\">\n        <ng-container\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\n        >\n          <li\n            *ngIf=\"\n              eachCycle?.business_cycle?.toLowerCase() ===\n              'show future due dates'\n            \"\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\n            [class.future-cycle]=\"true\"\n          >\n            <app-cs-checkbox\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\n              [disabled]=\"eachCycle?.isDisabled\"\n              >Show Future Due Dates</app-cs-checkbox\n            >\n            <i\n              class=\"icons info-icon vx-fs-12\"\n              [arTooltip]=\"\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\n              \"\n              placement=\"bottom\"\n              type=\"black\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            >\n          </li>\n          <li\n            *ngIf=\"\n              eachCycle?.business_cycle?.toLowerCase() !==\n              'show future due dates'\n            \"\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\n          >\n            <app-cs-checkbox\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\n              [disabled]=\"eachCycle?.isDisabled\"\n              >{{ eachCycle?.start_date | dateFormat }} -\n              <ng-container>\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\n              >\n            </app-cs-checkbox>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n    <div\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\n    >\n      <button\n        (click)=\"businessCyclePop.closePopover('top')\"\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\"\n      >\n        CANCEL\n      </button>\n      <button\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\n        [class.disabled]=\"false\"\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\"\n      >\n        APPLY\n      </button>\n    </div>\n  </div>\n</vui-popover>\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;max-height:200px;overflow-y:auto}::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]=\"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;max-height:200px;overflow-y:auto}::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\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\n  appPopover\n  (click)=\"businessCyclePop.popover()\"\n  position=\"left\"\n>\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\n  </div>\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\n        cycleToShow === \"Show Future Due Dates\"\n          ? \"Future Due Dates\"\n          : cycleToShow\n      }}</span>\n    </div>\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\n  </div>\n</div>\n\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\n  <div class=\"vc-business-cycle-popover-container\">\n    <div\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\n    >\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\n        You can select upto a max of two consecutive years\n      </p>\n    </div>\n    <div class=\"vc-business-cycle-popover-container-body\">\n      <ul class=\"vx-p-0 vx-m-0\">\n        <ng-container\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\n        >\n          <li\n            *ngIf=\"\n              eachCycle?.business_cycle?.toLowerCase() ===\n              'show future due dates'\n            \"\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\n            [class.future-cycle]=\"true\"\n          >\n            <app-cs-checkbox\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\n              [disabled]=\"eachCycle?.isDisabled\"\n              >Show Future Due Dates</app-cs-checkbox\n            >\n            <i\n              class=\"icons info-icon vx-fs-12\"\n              [arTooltip]=\"\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\n              \"\n              placement=\"bottom\"\n              type=\"black\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe91f;</i\n            >\n          </li>\n          <li\n            *ngIf=\"\n              eachCycle?.business_cycle?.toLowerCase() !==\n              'show future due dates'\n            \"\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\n          >\n            <app-cs-checkbox\n              [ngValue]=\"isSelectedCycle(tempSelectedCycle, eachCycle)\"\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\n              [disabled]=\"eachCycle?.isDisabled\"\n              >{{ eachCycle?.start_date | dateFormat }} -\n              <ng-container>\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\n              >\n            </app-cs-checkbox>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n    <div\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\n    >\n      <button\n        (click)=\"businessCyclePop.closePopover('top')\"\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\"\n      >\n        CANCEL\n      </button>\n      <button\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\n        [class.disabled]=\"false\"\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\"\n      >\n        APPLY\n      </button>\n    </div>\n  </div>\n</vui-popover>\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;max-height:200px;overflow-y:auto}::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: [{
@@ -2036,82 +2013,82 @@ class SearchComponent {
         this.router.url.subscribe((url) => this.onSearch('search', ''));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [{ token: i0.Renderer2 }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", inputs: { isAdvanceSearch: "isAdvanceSearch" }, outputs: { onSearchAction: "onSearchAction" }, viewQueries: [{ propertyName: "searchArea", first: true, predicate: ["searchArea"], descendants: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: `
-    <div
-      class="vc-search"
-      (click)="isDivClicked = true"
-      [class.searchFocus]="isDivClicked"
-      #searchArea
-    >
-      <input
-        [(ngModel)]="searchValue"
-        (keyup)="onKeyUp($event)"
-        (focusOut)="isDivClicked = false"
-        type="text"
-        placeholder="Search"
-        #searchBox
-      />
-      <i class="icons serachIcon vx-fs-10 vx-txt-white">&#xe90b;</i>
-
-      <div
-        *ngIf="isAdvanceSearch"
-        (click)="onSearch('advanceSearch', '')"
-        class="vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center"
-        [arTooltip]="'Advance Search'"
-        placement="bottom"
-        type="black"
-        delay="0"
-        [tooltipMandatory]="true"
-      >
-        <i class="icons vx-fs-12">&#xea91;</i>
-      </div>
-      <i
-        *ngIf="searchValue"
-        (click)="onCrossClick()"
-        class="icons crossIcon vx-fs-10 vx-txt-white"
-        >&#xe9ae;</i
-      >
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", inputs: { isAdvanceSearch: "isAdvanceSearch" }, outputs: { onSearchAction: "onSearchAction" }, viewQueries: [{ propertyName: "searchArea", first: true, predicate: ["searchArea"], descendants: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="vc-search"
+      (click)="isDivClicked = true"
+      [class.searchFocus]="isDivClicked"
+      #searchArea
+    >
+      <input
+        [(ngModel)]="searchValue"
+        (keyup)="onKeyUp($event)"
+        (focusOut)="isDivClicked = false"
+        type="text"
+        placeholder="Search"
+        #searchBox
+      />
+      <i class="icons serachIcon vx-fs-10 vx-txt-white">&#xe90b;</i>
+
+      <div
+        *ngIf="isAdvanceSearch"
+        (click)="onSearch('advanceSearch', '')"
+        class="vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center"
+        [arTooltip]="'Advance Search'"
+        placement="bottom"
+        type="black"
+        delay="0"
+        [tooltipMandatory]="true"
+      >
+        <i class="icons vx-fs-12">&#xea91;</i>
+      </div>
+      <i
+        *ngIf="searchValue"
+        (click)="onCrossClick()"
+        class="icons crossIcon vx-fs-10 vx-txt-white"
+        >&#xe9ae;</i
+      >
+    </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\";.vc-search{position:relative}.vc-search.searchFocus input{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search.searchFocus input::placeholder{color:#a9aab6}.vc-search.searchFocus .serachIcon{color:#565a6f}.vc-search.searchFocus .crossIcon{color:#565a6f;display:block}.vc-search.searchFocus .vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search.searchFocus .vc-advance-search-btn i{color:#565a6f}.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 i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:.75rem}.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}.vc-search .vc-advance-search-btn~i.crossIcon{right:2.5rem}\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: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 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"
-      (click)="isDivClicked = true"
-      [class.searchFocus]="isDivClicked"
-      #searchArea
-    >
-      <input
-        [(ngModel)]="searchValue"
-        (keyup)="onKeyUp($event)"
-        (focusOut)="isDivClicked = false"
-        type="text"
-        placeholder="Search"
-        #searchBox
-      />
-      <i class="icons serachIcon vx-fs-10 vx-txt-white">&#xe90b;</i>
-
-      <div
-        *ngIf="isAdvanceSearch"
-        (click)="onSearch('advanceSearch', '')"
-        class="vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center"
-        [arTooltip]="'Advance Search'"
-        placement="bottom"
-        type="black"
-        delay="0"
-        [tooltipMandatory]="true"
-      >
-        <i class="icons vx-fs-12">&#xea91;</i>
-      </div>
-      <i
-        *ngIf="searchValue"
-        (click)="onCrossClick()"
-        class="icons crossIcon vx-fs-10 vx-txt-white"
-        >&#xe9ae;</i
-      >
-    </div>
+            args: [{ selector: 'vc-search', template: `
+    <div
+      class="vc-search"
+      (click)="isDivClicked = true"
+      [class.searchFocus]="isDivClicked"
+      #searchArea
+    >
+      <input
+        [(ngModel)]="searchValue"
+        (keyup)="onKeyUp($event)"
+        (focusOut)="isDivClicked = false"
+        type="text"
+        placeholder="Search"
+        #searchBox
+      />
+      <i class="icons serachIcon vx-fs-10 vx-txt-white">&#xe90b;</i>
+
+      <div
+        *ngIf="isAdvanceSearch"
+        (click)="onSearch('advanceSearch', '')"
+        class="vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center"
+        [arTooltip]="'Advance Search'"
+        placement="bottom"
+        type="black"
+        delay="0"
+        [tooltipMandatory]="true"
+      >
+        <i class="icons vx-fs-12">&#xea91;</i>
+      </div>
+      <i
+        *ngIf="searchValue"
+        (click)="onCrossClick()"
+        class="icons crossIcon vx-fs-10 vx-txt-white"
+        >&#xe9ae;</i
+      >
+    </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\";.vc-search{position:relative}.vc-search.searchFocus input{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search.searchFocus input::placeholder{color:#a9aab6}.vc-search.searchFocus .serachIcon{color:#565a6f}.vc-search.searchFocus .crossIcon{color:#565a6f;display:block}.vc-search.searchFocus .vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search.searchFocus .vc-advance-search-btn i{color:#565a6f}.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 i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:.75rem}.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}.vc-search .vc-advance-search-btn~i.crossIcon{right:2.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1$4.ActivatedRoute }]; }, propDecorators: { isAdvanceSearch: [{
                 type: Input
@@ -2132,11 +2109,11 @@ class CreateWorkflowComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateWorkflowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateWorkflowComponent, selector: "vc-create-workflow", inputs: { iframeLoading: "iframeLoading" }, outputs: { openWorkflow: "openWorkflow" }, ngImport: i0, template: "<div\r\n  class=\"header-create-workflow vx-fs-16 vx-txt-white vx-d-flex vx-align-center vx-justify-center\"\r\n  (click)=\"openWorkflow.emit()\"\r\n  [class.disabled-workflow]=\"iframeLoading\"\r\n  [arTooltip]=\"'Create'\"\r\n  placement=\"bottom\"\r\n  type=\"black\"\r\n  delay=\"0\"\r\n  [tooltipMandatory]=\"true\"\r\n>\r\n  +\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\";.header-create-workflow{background:#1e5dd3;border-radius:3rem;cursor:pointer;width:1.5rem;height:1.5rem;margin-left:1.75rem;transition:all .3s ease-in-out}.header-create-workflow.disabled-workflow{filter:grayscale(100%);pointer-events:none}\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: CreateWorkflowComponent, selector: "vc-create-workflow", inputs: { iframeLoading: "iframeLoading" }, outputs: { openWorkflow: "openWorkflow" }, ngImport: i0, template: "<div\n  class=\"header-create-workflow vx-fs-16 vx-txt-white vx-d-flex vx-align-center vx-justify-center\"\n  (click)=\"openWorkflow.emit()\"\n  [class.disabled-workflow]=\"iframeLoading\"\n  [arTooltip]=\"'Create'\"\n  placement=\"bottom\"\n  type=\"black\"\n  delay=\"0\"\n  [tooltipMandatory]=\"true\"\n>\n  +\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";.header-create-workflow{background:#1e5dd3;border-radius:3rem;cursor:pointer;width:1.5rem;height:1.5rem;margin-left:1.75rem;transition:all .3s ease-in-out}.header-create-workflow.disabled-workflow{filter:grayscale(100%);pointer-events:none}\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: CreateWorkflowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-create-workflow', template: "<div\r\n  class=\"header-create-workflow vx-fs-16 vx-txt-white vx-d-flex vx-align-center vx-justify-center\"\r\n  (click)=\"openWorkflow.emit()\"\r\n  [class.disabled-workflow]=\"iframeLoading\"\r\n  [arTooltip]=\"'Create'\"\r\n  placement=\"bottom\"\r\n  type=\"black\"\r\n  delay=\"0\"\r\n  [tooltipMandatory]=\"true\"\r\n>\r\n  +\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\";.header-create-workflow{background:#1e5dd3;border-radius:3rem;cursor:pointer;width:1.5rem;height:1.5rem;margin-left:1.75rem;transition:all .3s ease-in-out}.header-create-workflow.disabled-workflow{filter:grayscale(100%);pointer-events:none}\n"] }]
+            args: [{ selector: 'vc-create-workflow', template: "<div\n  class=\"header-create-workflow vx-fs-16 vx-txt-white vx-d-flex vx-align-center vx-justify-center\"\n  (click)=\"openWorkflow.emit()\"\n  [class.disabled-workflow]=\"iframeLoading\"\n  [arTooltip]=\"'Create'\"\n  placement=\"bottom\"\n  type=\"black\"\n  delay=\"0\"\n  [tooltipMandatory]=\"true\"\n>\n  +\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";.header-create-workflow{background:#1e5dd3;border-radius:3rem;cursor:pointer;width:1.5rem;height:1.5rem;margin-left:1.75rem;transition:all .3s ease-in-out}.header-create-workflow.disabled-workflow{filter:grayscale(100%);pointer-events:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { iframeLoading: [{
                 type: Input
             }], openWorkflow: [{
@@ -2154,44 +2131,44 @@ class QueueComponent {
         this.queueURL = this.layoutService.baseUrl + IN_APP_URL.QUEUE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QueueComponent, deps: [{ token: ApiService }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QueueComponent, selector: "vc-queue", ngImport: i0, template: `
-    <a
-      *ngIf="apiService?.queueCount$ | async"
-      class="header-queue vx-d-flex vx-align-center vx-justify-center"
-      [arTooltip]="'View Responsibilities in Queue'"
-      placement="bottom-right"
-      type="black"
-      delay="0"
-      [href]="queueURL"
-      [tooltipMandatory]="true"
-    >
-      <i class="icons vx-fs-12 vx-txt-white">&#xea27;</i>
-      <span
-        class="queue-value vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1"
-        >{{ apiService?.queueCount$ | async }}</span
-      >
-    </a>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QueueComponent, selector: "vc-queue", ngImport: i0, template: `
+    <a
+      *ngIf="apiService?.queueCount$ | async"
+      class="header-queue vx-d-flex vx-align-center vx-justify-center"
+      [arTooltip]="'View Responsibilities in Queue'"
+      placement="bottom-right"
+      type="black"
+      delay="0"
+      [href]="queueURL"
+      [tooltipMandatory]="true"
+    >
+      <i class="icons vx-fs-12 vx-txt-white">&#xea27;</i>
+      <span
+        class="queue-value vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1"
+        >{{ apiService?.queueCount$ | async }}</span
+      >
+    </a>
   `, 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\";.header-queue{background:#e87315;border-radius:3rem;width:1.5rem;height:1.5rem;margin-left:1.75rem;position:relative}.header-queue .queue-value{background:#c7381b;border-radius:1.25rem;border:.125rem solid #161b2f;height:1rem;min-width:1.125rem;position:absolute;top:-.375rem;right:-.625rem}\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: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QueueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-queue', template: `
-    <a
-      *ngIf="apiService?.queueCount$ | async"
-      class="header-queue vx-d-flex vx-align-center vx-justify-center"
-      [arTooltip]="'View Responsibilities in Queue'"
-      placement="bottom-right"
-      type="black"
-      delay="0"
-      [href]="queueURL"
-      [tooltipMandatory]="true"
-    >
-      <i class="icons vx-fs-12 vx-txt-white">&#xea27;</i>
-      <span
-        class="queue-value vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1"
-        >{{ apiService?.queueCount$ | async }}</span
-      >
-    </a>
+            args: [{ selector: 'vc-queue', template: `
+    <a
+      *ngIf="apiService?.queueCount$ | async"
+      class="header-queue vx-d-flex vx-align-center vx-justify-center"
+      [arTooltip]="'View Responsibilities in Queue'"
+      placement="bottom-right"
+      type="black"
+      delay="0"
+      [href]="queueURL"
+      [tooltipMandatory]="true"
+    >
+      <i class="icons vx-fs-12 vx-txt-white">&#xea27;</i>
+      <span
+        class="queue-value vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1"
+        >{{ apiService?.queueCount$ | async }}</span
+      >
+    </a>
   `, 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\";.header-queue{background:#e87315;border-radius:3rem;width:1.5rem;height:1.5rem;margin-left:1.75rem;position:relative}.header-queue .queue-value{background:#c7381b;border-radius:1.25rem;border:.125rem solid #161b2f;height:1rem;min-width:1.125rem;position:absolute;top:-.375rem;right:-.625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: ApiService }, { type: LayoutService }]; } });
 
@@ -2223,28 +2200,28 @@ class AvatarComponent {
         this.shortName = this.authService.getUser()?.short_name ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, deps: [{ token: i1$1.AuthorizerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "vc-avatar", inputs: { userInfo: "userInfo", type: "type" }, ngImport: i0, template: `
-    <div class="vx-avatar " [ngClass]="type">
-      <span *ngIf="!userInfo?.profile_pic" class="blue">{{ shortName }}</span>
-      <img
-        *ngIf="userInfo?.profile_pic"
-        [src]="userInfo?.profile_pic | getFileUrl"
-        alt=""
-      />
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "vc-avatar", inputs: { userInfo: "userInfo", type: "type" }, ngImport: i0, template: `
+    <div class="vx-avatar " [ngClass]="type">
+      <span *ngIf="!userInfo?.profile_pic" class="blue">{{ shortName }}</span>
+      <img
+        *ngIf="userInfo?.profile_pic"
+        [src]="userInfo?.profile_pic | getFileUrl"
+        alt=""
+      />
+    </div>
   `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: GetFileUrlPipe, name: "getFileUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-avatar', template: `
-    <div class="vx-avatar " [ngClass]="type">
-      <span *ngIf="!userInfo?.profile_pic" class="blue">{{ shortName }}</span>
-      <img
-        *ngIf="userInfo?.profile_pic"
-        [src]="userInfo?.profile_pic | getFileUrl"
-        alt=""
-      />
-    </div>
+            args: [{ selector: 'vc-avatar', template: `
+    <div class="vx-avatar " [ngClass]="type">
+      <span *ngIf="!userInfo?.profile_pic" class="blue">{{ shortName }}</span>
+      <img
+        *ngIf="userInfo?.profile_pic"
+        [src]="userInfo?.profile_pic | getFileUrl"
+        alt=""
+      />
+    </div>
   `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthorizerService }]; }, propDecorators: { userInfo: [{
                 type: Input
@@ -2265,11 +2242,11 @@ class UserDetailsComponent {
         this.authService.logout();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserDetailsComponent, deps: [{ token: LayoutService }, { token: i1$1.AuthorizerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserDetailsComponent, selector: "vc-user-details", inputs: { userDetails: "userDetails", subscriptionDetails: "subscriptionDetails" }, ngImport: i0, template: "<div\r\n  class=\"header-user-details\"\r\n  [arTooltip]=\"'View Your Profile'\"\r\n  placement=\"bottom-right\"\r\n  type=\"black\"\r\n  delay=\"0\"\r\n  [tooltipMandatory]=\"true\"\r\n  appPopover\r\n  (click)=\"userInfo.popover()\"\r\n  position=\"right\"\r\n>\r\n  <vc-avatar [userInfo]=\"userDetails\"></vc-avatar>\r\n</div>\r\n\r\n<vui-popover #userInfo [dontCloseonClick]=\"true\">\r\n  <div class=\"header-user-details-box vx-mt-3 vx-pl-2 vx-pr-2\">\r\n    <div\r\n      class=\"header-user-details-box-top vx-d-flex vx-align-center vx-pt-2 vx-pb-2\"\r\n    >\r\n      <vc-avatar [userInfo]=\"userDetails\" [type]=\"'x-lg'\"></vc-avatar>\r\n      <div class=\"header-user-details-box-top-right vx-ml-2\">\r\n        <div\r\n          class=\"userName vx-fs-13 vx-fw-500 vx-label-txt vx-tt-capitalize\"\r\n          [arTooltip]=\"userDetails?.member_name\"\r\n          placement=\"bottom-left\"\r\n          type=\"black\"\r\n          delay=\"0\"\r\n          [tooltipMandatory]=\"false\"\r\n        >\r\n          {{ userDetails?.member_name }}\r\n        </div>\r\n        <div\r\n          class=\"userEmail vx-fs-11 vx-paragraph-txt\"\r\n          [arTooltip]=\"userDetails?.member_email\"\r\n          placement=\"bottom-left\"\r\n          type=\"black\"\r\n          delay=\"0\"\r\n          [tooltipMandatory]=\"false\"\r\n        >\r\n          {{ userDetails?.member_email }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"header-user-details-box-mid\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <li\r\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\r\n        >\r\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\r\n            >SUBSCRIPTION :</span\r\n          >\r\n          <span\r\n            [class.expired]=\"subscriptionDetails?.after_expired_days_allow\"\r\n            >{{\r\n              subscriptionDetails?.after_expired_days_allow\r\n                ? \"Expired\"\r\n                : \"Active\"\r\n            }}</span\r\n          >\r\n        </li>\r\n        <li\r\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\r\n        >\r\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\r\n            >EXPIRING ON :</span\r\n          >\r\n          <span class=\"vx-paragraph-txt\">{{\r\n            subscriptionDetails?.expiredDetails | date : \"dd MMM yyyy\"\r\n          }}</span>\r\n        </li>\r\n        <li\r\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\r\n        >\r\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\r\n            >Support Pin :</span\r\n          >\r\n          <span class=\"vx-paragraph-txt\">{{ userDetails?.calling_pin }}</span>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"header-user-details-box-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\r\n    >\r\n      <button\r\n        (click)=\"editProfile()\"\r\n        class=\"editProfile-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\r\n      >\r\n        Edit Profile\r\n      </button>\r\n      <button\r\n        (click)=\"logout()\"\r\n        class=\"logout-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\r\n      >\r\n        Log out\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 .header-user-details{cursor:pointer;margin-left:18px}::ng-deep .header-user-details vc-avatar .vx-avatar{border:none;width:1.5rem;height:1.5rem}::ng-deep .header-user-details vc-avatar .vx-avatar span{font-size:10px;font-weight:400}::ng-deep .header-user-details-box{background:#fff;border:1px solid #e3e3e9;border-radius:.25rem;box-shadow:0 4px 8px #1e5dd326;width:19rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar{border:none;width:5rem;height:5rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar span{font-size:18px;font-weight:600}::ng-deep .header-user-details-box-top-right{width:calc(100% - 5.5rem)}::ng-deep .header-user-details-box-top-right .userName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-top-right .userEmail{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-mid ul li{border-bottom:1px solid #f1f1f1}::ng-deep .header-user-details-box-mid ul li span{width:50%;position:relative}::ng-deep .header-user-details-box-mid ul li span:first-of-type:before{background:#1e5dd3;color:#34aa44;content:\"\";position:absolute;left:.125rem;top:.125rem;width:1px;height:.75rem}::ng-deep .header-user-details-box-mid ul li span.expired{color:#d93b41}::ng-deep .header-user-details-box-bottom button{border-radius:.125rem;height:1.5rem;margin:0 .125rem!important}::ng-deep .header-user-details-box-bottom button.editProfile-btn{background:#fff;border:1px solid #1e5dd3}::ng-deep .header-user-details-box-bottom button.logout-btn{background:#1e5dd3;border:1px solid #1e5dd3}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: AvatarComponent, selector: "vc-avatar", inputs: ["userInfo", "type"] }, { kind: "component", type: PopoverComponent, selector: "vui-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "position"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserDetailsComponent, selector: "vc-user-details", inputs: { userDetails: "userDetails", subscriptionDetails: "subscriptionDetails" }, ngImport: i0, template: "<div\n  class=\"header-user-details\"\n  [arTooltip]=\"'View Your Profile'\"\n  placement=\"bottom-right\"\n  type=\"black\"\n  delay=\"0\"\n  [tooltipMandatory]=\"true\"\n  appPopover\n  (click)=\"userInfo.popover()\"\n  position=\"right\"\n>\n  <vc-avatar [userInfo]=\"userDetails\"></vc-avatar>\n</div>\n\n<vui-popover #userInfo [dontCloseonClick]=\"true\">\n  <div class=\"header-user-details-box vx-mt-3 vx-pl-2 vx-pr-2\">\n    <div\n      class=\"header-user-details-box-top vx-d-flex vx-align-center vx-pt-2 vx-pb-2\"\n    >\n      <vc-avatar [userInfo]=\"userDetails\" [type]=\"'x-lg'\"></vc-avatar>\n      <div class=\"header-user-details-box-top-right vx-ml-2\">\n        <div\n          class=\"userName vx-fs-13 vx-fw-500 vx-label-txt vx-tt-capitalize\"\n          [arTooltip]=\"userDetails?.member_name\"\n          placement=\"bottom-left\"\n          type=\"black\"\n          delay=\"0\"\n          [tooltipMandatory]=\"false\"\n        >\n          {{ userDetails?.member_name }}\n        </div>\n        <div\n          class=\"userEmail vx-fs-11 vx-paragraph-txt\"\n          [arTooltip]=\"userDetails?.member_email\"\n          placement=\"bottom-left\"\n          type=\"black\"\n          delay=\"0\"\n          [tooltipMandatory]=\"false\"\n        >\n          {{ userDetails?.member_email }}\n        </div>\n      </div>\n    </div>\n    <div class=\"header-user-details-box-mid\">\n      <ul class=\"vx-p-0 vx-m-0\">\n        <li\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\n        >\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\n            >SUBSCRIPTION :</span\n          >\n          <span\n            [class.expired]=\"subscriptionDetails?.after_expired_days_allow\"\n            >{{\n              subscriptionDetails?.after_expired_days_allow\n                ? \"Expired\"\n                : \"Active\"\n            }}</span\n          >\n        </li>\n        <li\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\n        >\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\n            >EXPIRING ON :</span\n          >\n          <span class=\"vx-paragraph-txt\">{{\n            subscriptionDetails?.expiredDetails | date : \"dd MMM yyyy\"\n          }}</span>\n        </li>\n        <li\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\n        >\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\n            >Support Pin :</span\n          >\n          <span class=\"vx-paragraph-txt\">{{ userDetails?.calling_pin }}</span>\n        </li>\n      </ul>\n    </div>\n    <div\n      class=\"header-user-details-box-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\n    >\n      <button\n        (click)=\"editProfile()\"\n        class=\"editProfile-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n      >\n        Edit Profile\n      </button>\n      <button\n        (click)=\"logout()\"\n        class=\"logout-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n      >\n        Log out\n      </button>\n    </div>\n  </div>\n</vui-popover>\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 .header-user-details{cursor:pointer;margin-left:1.75rem}::ng-deep .header-user-details vc-avatar .vx-avatar{border:none;width:1.5rem;height:1.5rem}::ng-deep .header-user-details vc-avatar .vx-avatar span{font-size:10px;font-weight:400}::ng-deep .header-user-details-box{background:#fff;border:1px solid #e3e3e9;border-radius:.25rem;box-shadow:0 4px 8px #1e5dd326;width:19rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar{border:none;width:5rem;height:5rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar span{font-size:18px;font-weight:600}::ng-deep .header-user-details-box-top-right{width:calc(100% - 5.5rem)}::ng-deep .header-user-details-box-top-right .userName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-top-right .userEmail{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-mid ul li{border-bottom:1px solid #f1f1f1}::ng-deep .header-user-details-box-mid ul li span{width:50%;position:relative}::ng-deep .header-user-details-box-mid ul li span:first-of-type:before{background:#1e5dd3;color:#34aa44;content:\"\";position:absolute;left:.125rem;top:.125rem;width:1px;height:.75rem}::ng-deep .header-user-details-box-mid ul li span.expired{color:#d93b41}::ng-deep .header-user-details-box-bottom button{border-radius:.125rem;height:1.5rem;margin:0 .125rem!important}::ng-deep .header-user-details-box-bottom button.editProfile-btn{background:#fff;border:1px solid #1e5dd3}::ng-deep .header-user-details-box-bottom button.logout-btn{background:#1e5dd3;border:1px solid #1e5dd3}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: AvatarComponent, selector: "vc-avatar", inputs: ["userInfo", "type"] }, { kind: "component", type: PopoverComponent, selector: "vui-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "position"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-user-details', template: "<div\r\n  class=\"header-user-details\"\r\n  [arTooltip]=\"'View Your Profile'\"\r\n  placement=\"bottom-right\"\r\n  type=\"black\"\r\n  delay=\"0\"\r\n  [tooltipMandatory]=\"true\"\r\n  appPopover\r\n  (click)=\"userInfo.popover()\"\r\n  position=\"right\"\r\n>\r\n  <vc-avatar [userInfo]=\"userDetails\"></vc-avatar>\r\n</div>\r\n\r\n<vui-popover #userInfo [dontCloseonClick]=\"true\">\r\n  <div class=\"header-user-details-box vx-mt-3 vx-pl-2 vx-pr-2\">\r\n    <div\r\n      class=\"header-user-details-box-top vx-d-flex vx-align-center vx-pt-2 vx-pb-2\"\r\n    >\r\n      <vc-avatar [userInfo]=\"userDetails\" [type]=\"'x-lg'\"></vc-avatar>\r\n      <div class=\"header-user-details-box-top-right vx-ml-2\">\r\n        <div\r\n          class=\"userName vx-fs-13 vx-fw-500 vx-label-txt vx-tt-capitalize\"\r\n          [arTooltip]=\"userDetails?.member_name\"\r\n          placement=\"bottom-left\"\r\n          type=\"black\"\r\n          delay=\"0\"\r\n          [tooltipMandatory]=\"false\"\r\n        >\r\n          {{ userDetails?.member_name }}\r\n        </div>\r\n        <div\r\n          class=\"userEmail vx-fs-11 vx-paragraph-txt\"\r\n          [arTooltip]=\"userDetails?.member_email\"\r\n          placement=\"bottom-left\"\r\n          type=\"black\"\r\n          delay=\"0\"\r\n          [tooltipMandatory]=\"false\"\r\n        >\r\n          {{ userDetails?.member_email }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"header-user-details-box-mid\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <li\r\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\r\n        >\r\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\r\n            >SUBSCRIPTION :</span\r\n          >\r\n          <span\r\n            [class.expired]=\"subscriptionDetails?.after_expired_days_allow\"\r\n            >{{\r\n              subscriptionDetails?.after_expired_days_allow\r\n                ? \"Expired\"\r\n                : \"Active\"\r\n            }}</span\r\n          >\r\n        </li>\r\n        <li\r\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\r\n        >\r\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\r\n            >EXPIRING ON :</span\r\n          >\r\n          <span class=\"vx-paragraph-txt\">{{\r\n            subscriptionDetails?.expiredDetails | date : \"dd MMM yyyy\"\r\n          }}</span>\r\n        </li>\r\n        <li\r\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\r\n        >\r\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\r\n            >Support Pin :</span\r\n          >\r\n          <span class=\"vx-paragraph-txt\">{{ userDetails?.calling_pin }}</span>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"header-user-details-box-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\r\n    >\r\n      <button\r\n        (click)=\"editProfile()\"\r\n        class=\"editProfile-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\r\n      >\r\n        Edit Profile\r\n      </button>\r\n      <button\r\n        (click)=\"logout()\"\r\n        class=\"logout-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\r\n      >\r\n        Log out\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 .header-user-details{cursor:pointer;margin-left:18px}::ng-deep .header-user-details vc-avatar .vx-avatar{border:none;width:1.5rem;height:1.5rem}::ng-deep .header-user-details vc-avatar .vx-avatar span{font-size:10px;font-weight:400}::ng-deep .header-user-details-box{background:#fff;border:1px solid #e3e3e9;border-radius:.25rem;box-shadow:0 4px 8px #1e5dd326;width:19rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar{border:none;width:5rem;height:5rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar span{font-size:18px;font-weight:600}::ng-deep .header-user-details-box-top-right{width:calc(100% - 5.5rem)}::ng-deep .header-user-details-box-top-right .userName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-top-right .userEmail{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-mid ul li{border-bottom:1px solid #f1f1f1}::ng-deep .header-user-details-box-mid ul li span{width:50%;position:relative}::ng-deep .header-user-details-box-mid ul li span:first-of-type:before{background:#1e5dd3;color:#34aa44;content:\"\";position:absolute;left:.125rem;top:.125rem;width:1px;height:.75rem}::ng-deep .header-user-details-box-mid ul li span.expired{color:#d93b41}::ng-deep .header-user-details-box-bottom button{border-radius:.125rem;height:1.5rem;margin:0 .125rem!important}::ng-deep .header-user-details-box-bottom button.editProfile-btn{background:#fff;border:1px solid #1e5dd3}::ng-deep .header-user-details-box-bottom button.logout-btn{background:#1e5dd3;border:1px solid #1e5dd3}\n"] }]
+            args: [{ selector: 'vc-user-details', template: "<div\n  class=\"header-user-details\"\n  [arTooltip]=\"'View Your Profile'\"\n  placement=\"bottom-right\"\n  type=\"black\"\n  delay=\"0\"\n  [tooltipMandatory]=\"true\"\n  appPopover\n  (click)=\"userInfo.popover()\"\n  position=\"right\"\n>\n  <vc-avatar [userInfo]=\"userDetails\"></vc-avatar>\n</div>\n\n<vui-popover #userInfo [dontCloseonClick]=\"true\">\n  <div class=\"header-user-details-box vx-mt-3 vx-pl-2 vx-pr-2\">\n    <div\n      class=\"header-user-details-box-top vx-d-flex vx-align-center vx-pt-2 vx-pb-2\"\n    >\n      <vc-avatar [userInfo]=\"userDetails\" [type]=\"'x-lg'\"></vc-avatar>\n      <div class=\"header-user-details-box-top-right vx-ml-2\">\n        <div\n          class=\"userName vx-fs-13 vx-fw-500 vx-label-txt vx-tt-capitalize\"\n          [arTooltip]=\"userDetails?.member_name\"\n          placement=\"bottom-left\"\n          type=\"black\"\n          delay=\"0\"\n          [tooltipMandatory]=\"false\"\n        >\n          {{ userDetails?.member_name }}\n        </div>\n        <div\n          class=\"userEmail vx-fs-11 vx-paragraph-txt\"\n          [arTooltip]=\"userDetails?.member_email\"\n          placement=\"bottom-left\"\n          type=\"black\"\n          delay=\"0\"\n          [tooltipMandatory]=\"false\"\n        >\n          {{ userDetails?.member_email }}\n        </div>\n      </div>\n    </div>\n    <div class=\"header-user-details-box-mid\">\n      <ul class=\"vx-p-0 vx-m-0\">\n        <li\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\n        >\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\n            >SUBSCRIPTION :</span\n          >\n          <span\n            [class.expired]=\"subscriptionDetails?.after_expired_days_allow\"\n            >{{\n              subscriptionDetails?.after_expired_days_allow\n                ? \"Expired\"\n                : \"Active\"\n            }}</span\n          >\n        </li>\n        <li\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\n        >\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\n            >EXPIRING ON :</span\n          >\n          <span class=\"vx-paragraph-txt\">{{\n            subscriptionDetails?.expiredDetails | date : \"dd MMM yyyy\"\n          }}</span>\n        </li>\n        <li\n          class=\"vx-fs-12 vx-d-flex vx-align-center vx-justify-between vx-pt-2 vx-pb-2 vx-lh-4\"\n        >\n          <span class=\"vx-label-txt vx-fw-500 vx-tt-uppercase vx-pl-3\"\n            >Support Pin :</span\n          >\n          <span class=\"vx-paragraph-txt\">{{ userDetails?.calling_pin }}</span>\n        </li>\n      </ul>\n    </div>\n    <div\n      class=\"header-user-details-box-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\n    >\n      <button\n        (click)=\"editProfile()\"\n        class=\"editProfile-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n      >\n        Edit Profile\n      </button>\n      <button\n        (click)=\"logout()\"\n        class=\"logout-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\"\n      >\n        Log out\n      </button>\n    </div>\n  </div>\n</vui-popover>\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 .header-user-details{cursor:pointer;margin-left:1.75rem}::ng-deep .header-user-details vc-avatar .vx-avatar{border:none;width:1.5rem;height:1.5rem}::ng-deep .header-user-details vc-avatar .vx-avatar span{font-size:10px;font-weight:400}::ng-deep .header-user-details-box{background:#fff;border:1px solid #e3e3e9;border-radius:.25rem;box-shadow:0 4px 8px #1e5dd326;width:19rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar{border:none;width:5rem;height:5rem}::ng-deep .header-user-details-box-top vc-avatar .vx-avatar span{font-size:18px;font-weight:600}::ng-deep .header-user-details-box-top-right{width:calc(100% - 5.5rem)}::ng-deep .header-user-details-box-top-right .userName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-top-right .userEmail{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .header-user-details-box-mid ul li{border-bottom:1px solid #f1f1f1}::ng-deep .header-user-details-box-mid ul li span{width:50%;position:relative}::ng-deep .header-user-details-box-mid ul li span:first-of-type:before{background:#1e5dd3;color:#34aa44;content:\"\";position:absolute;left:.125rem;top:.125rem;width:1px;height:.75rem}::ng-deep .header-user-details-box-mid ul li span.expired{color:#d93b41}::ng-deep .header-user-details-box-bottom button{border-radius:.125rem;height:1.5rem;margin:0 .125rem!important}::ng-deep .header-user-details-box-bottom button.editProfile-btn{background:#fff;border:1px solid #1e5dd3}::ng-deep .header-user-details-box-bottom button.logout-btn{background:#1e5dd3;border:1px solid #1e5dd3}\n"] }]
         }], ctorParameters: function () { return [{ type: LayoutService }, { type: i1$1.AuthorizerService }]; }, propDecorators: { userDetails: [{
                 type: Input
             }], subscriptionDetails: [{
@@ -2283,23 +2260,23 @@ class SupportComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SupportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SupportComponent, selector: "vc-support", outputs: { openSupport: "openSupport" }, ngImport: i0, template: `<div
-    (click)="openSupport.emit()"
-    class="header-support vx-fs-11 vx-txt-white vx-tt-uppercase vx-p-1 vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
-  >
-    <img [src]="ASSETS.support_icon" alt="Support" width="18" height="14" />
-    SUPPORT
-  </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\";.header-support{border-radius:.125rem;cursor:pointer;height:1.5rem;position:relative;margin-right:6px}.header-support:before{background:#74757690;content:\"\";position:absolute;top:0;right:-.5rem;width:1px;height:1.5rem}.header-support:hover{background:#343952}.header-support img{margin-right:.375rem}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SupportComponent, selector: "vc-support", outputs: { openSupport: "openSupport" }, ngImport: i0, template: `<div
+    (click)="openSupport.emit()"
+    class="header-support vx-fs-11 vx-txt-white vx-tt-uppercase vx-p-1 vx-pl-3 vx-pr-2 vx-mr-2 vx-d-flex vx-align-center"
+  >
+    <img [src]="ASSETS.support_icon" alt="Support" width="18" height="14" />
+    SUPPORT
+  </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\";.header-support{border-radius:.125rem;cursor:pointer;height:1.5rem;position:relative}.header-support:before{background:#74757690;content:\"\";position:absolute;top:0;right:-.5rem;width:1px;height:1.5rem}.header-support:hover{background:#343952}.header-support img{margin-right:.375rem}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SupportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-support', template: `<div
-    (click)="openSupport.emit()"
-    class="header-support vx-fs-11 vx-txt-white vx-tt-uppercase vx-p-1 vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
-  >
-    <img [src]="ASSETS.support_icon" alt="Support" width="18" height="14" />
-    SUPPORT
-  </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\";.header-support{border-radius:.125rem;cursor:pointer;height:1.5rem;position:relative;margin-right:6px}.header-support:before{background:#74757690;content:\"\";position:absolute;top:0;right:-.5rem;width:1px;height:1.5rem}.header-support:hover{background:#343952}.header-support img{margin-right:.375rem}\n"] }]
+            args: [{ selector: 'vc-support', template: `<div
+    (click)="openSupport.emit()"
+    class="header-support vx-fs-11 vx-txt-white vx-tt-uppercase vx-p-1 vx-pl-3 vx-pr-2 vx-mr-2 vx-d-flex vx-align-center"
+  >
+    <img [src]="ASSETS.support_icon" alt="Support" width="18" height="14" />
+    SUPPORT
+  </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\";.header-support{border-radius:.125rem;cursor:pointer;height:1.5rem;position:relative}.header-support:before{background:#74757690;content:\"\";position:absolute;top:0;right:-.5rem;width:1px;height:1.5rem}.header-support:hover{background:#343952}.header-support img{margin-right:.375rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { openSupport: [{
                 type: Output
             }] } });
@@ -2330,7 +2307,6 @@ class HeaderContainerComponent {
         this.showBusinessCycle = BUSINESS_CYCLE_URL;
         this.currentUrl = '';
         this.defaultURL = '';
-        this.showCreateWorkflow = true;
         this.showSearch = false;
         this.isAdvanceSearch = false;
         this.iframeLoading = false;
@@ -2344,7 +2320,6 @@ class HeaderContainerComponent {
     ngOnInit() {
         this.checkXmasCapVisibility();
         this.checkSnowFallVisibility();
-        this.checkComplianceFlag();
     }
     ngOnDestroy() {
         // Clear interval to prevent memory leaks
@@ -2392,29 +2367,22 @@ class HeaderContainerComponent {
         // If today is after December 20, use January 7 of next year as the end date
         if (today.getMonth() === 11 && today.getDate() >= 20) {
             startDate = new Date(currentYear, 11, 20); // December 20 of current year
-            endDate = new Date(currentYear + 1, 0, 7, 23, 59, 59); // January 7 of next year
+            endDate = new Date(currentYear + 1, 0, 3, 23, 59, 59); // January 3 of next year
         }
         else {
-            // Otherwise, use December 20 of the previous year and January 7 of the current year
+            // Otherwise, use December 20 of the previous year and January 3 of the current year
             startDate = new Date(currentYear - 1, 11, 20); // December 20 of previous year
-            endDate = new Date(currentYear, 0, 7, 23, 59, 59); // January 7 of current year
+            endDate = new Date(currentYear, 0, 3, 23, 59, 59); // January 3 of current year
         }
         // Check if today is within the range
         this.isXmasCapVisible = today >= startDate && today <= endDate;
     }
-    checkComplianceFlag() {
-        this.apiService.subscriptionDetail$.subscribe((subscriptionData) => {
-            if (subscriptionData) {
-                this.showCreateWorkflow = false;
-            }
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, deps: [{ token: ApiService }, { token: LayoutService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderContainerComponent, selector: "vc-header-container", inputs: { showSearch: "showSearch", featureFlag: "featureFlag", isAdvanceSearch: "isAdvanceSearch", iframeLoading: "iframeLoading" }, outputs: { businessCycleChange: "businessCycleChange", openDialog: "openDialog", onSearchAction: "onSearchAction" }, 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 id=\"snowfall\" *ngIf=\"isXmasCapVisible\" [class.animate]=\"showAnimation\">\r\n    <div class=\"snow\"></div>\r\n    <div class=\"snow1\"></div>\r\n    <div class=\"snow2\"></div>\r\n  </div>\r\n  <div class=\"header-container-left 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      [href]=\"defaultURL\"\r\n    >\r\n      <img\r\n        *ngIf=\"isXmasCapVisible\"\r\n        class=\"xmas-cap\"\r\n        [src]=\"ASSETS.xmas_cap\"\r\n        alt=\"Santa Cap\"\r\n        width=\"20\"\r\n        height=\"20\" />\r\n      <img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"isBusinessCycleVisible\"\r\n      (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search\r\n      *ngIf=\"showSearch\"\r\n      [isAdvanceSearch]=\"isAdvanceSearch\"\r\n      (onSearchAction)=\"onSearchAction.emit($event)\"\r\n    ></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) && showCreateWorkflow\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n      [iframeLoading]=\"iframeLoading\"\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-left{width:260px}.header-container .product-logo{width:3rem;height:3rem;position:relative}.header-container .product-logo img{pointer-events:none}.header-container .product-logo img.xmas-cap{position:absolute;top:.25rem;left:.375rem}#snowfall{position:absolute;width:100%;height:100px;z-index:-1}.animate .snow{position:absolute;border-radius:50%;filter:blur(1px);background-color:#fff;width:10px;height:10px;top:-1000px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation:snowfall 7s linear,fadeOut 7s ease-out forwards}.animate .snow:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-150px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-250px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1{position:absolute;border-radius:50%;filter:blur(2px);background-color:#fff;width:9px;height:9px;top:-850px;left:123px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-3s;animation:snowfall 9s linear,fadeOut 9s ease-out forwards}.animate .snow1:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-350px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-450px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2{position:absolute;border-radius:50%;filter:blur(1.5px);background-color:#fff;width:9px;height:9px;top:-900px;left:-50px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-4s;animation:snowfall 14s linear,fadeOut 14s ease-out forwards}.animate .snow2:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-550px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-650px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}@keyframes snowfall{to{transform:translateY(1500px)}}@keyframes fadeOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", inputs: ["isAdvanceSearch"], outputs: ["onSearchAction"] }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", inputs: ["iframeLoading"], 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: { showSearch: "showSearch", featureFlag: "featureFlag", isAdvanceSearch: "isAdvanceSearch", iframeLoading: "iframeLoading" }, outputs: { businessCycleChange: "businessCycleChange", openDialog: "openDialog", onSearchAction: "onSearchAction" }, ngImport: i0, template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\n<div\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\n>\n  <div id=\"snowfall\" *ngIf=\"isXmasCapVisible\" [class.animate]=\"showAnimation\">\n    <div class=\"snow\"></div>\n    <div class=\"snow1\"></div>\n    <div class=\"snow2\"></div>\n  </div>\n  <div class=\"header-container-left vx-d-flex vx-align-center\">\n    <a\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\n      [arTooltip]=\"'Go to Dashboard'\"\n      placement=\"right\"\n      type=\"white\"\n      delay=\"0\"\n      [tooltipMandatory]=\"true\"\n      [animate]=\"true\"\n      [href]=\"defaultURL\"\n    >\n      <img\n        *ngIf=\"isXmasCapVisible\"\n        class=\"xmas-cap\"\n        [src]=\"ASSETS.xmas_cap\"\n        alt=\"Santa Cap\"\n        width=\"20\"\n        height=\"20\" />\n      <img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\n    /></a>\n    <vc-business-cycle\n      *ngIf=\"isBusinessCycleVisible\"\n      (businessCycleChange)=\"businessCycleChangeHandler($event)\"\n    ></vc-business-cycle>\n  </div>\n  <div class=\"search-area\">\n    <vc-search\n      *ngIf=\"showSearch\"\n      [isAdvanceSearch]=\"isAdvanceSearch\"\n      (onSearchAction)=\"onSearchAction.emit($event)\"\n    ></vc-search>\n  </div>\n  <div class=\"vx-d-flex vx-align-center\">\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\n    <vc-create-workflow\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\n      [iframeLoading]=\"iframeLoading\"\n    ></vc-create-workflow>\n    <vc-queue></vc-queue>\n    <vc-user-details\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\n    ></vc-user-details>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/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-left{width:260px}.header-container .product-logo{width:3rem;height:3rem;position:relative}.header-container .product-logo img{pointer-events:none}.header-container .product-logo img.xmas-cap{position:absolute;top:.25rem;left:.375rem}#snowfall{position:absolute;width:100%;height:100px;z-index:-1}.animate .snow{position:absolute;border-radius:50%;filter:blur(1px);background-color:#fff;width:10px;height:10px;top:-1000px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation:snowfall 7s linear,fadeOut 7s ease-out forwards}.animate .snow:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-150px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-250px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1{position:absolute;border-radius:50%;filter:blur(2px);background-color:#fff;width:9px;height:9px;top:-850px;left:123px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-3s;animation:snowfall 9s linear,fadeOut 9s ease-out forwards}.animate .snow1:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-350px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-450px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2{position:absolute;border-radius:50%;filter:blur(1.5px);background-color:#fff;width:9px;height:9px;top:-900px;left:-50px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-4s;animation:snowfall 14s linear,fadeOut 14s ease-out forwards}.animate .snow2:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-550px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-650px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}@keyframes snowfall{to{transform:translateY(1500px)}}@keyframes fadeOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}\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", inputs: ["isAdvanceSearch"], outputs: ["onSearchAction"] }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", inputs: ["iframeLoading"], 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 [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 id=\"snowfall\" *ngIf=\"isXmasCapVisible\" [class.animate]=\"showAnimation\">\r\n    <div class=\"snow\"></div>\r\n    <div class=\"snow1\"></div>\r\n    <div class=\"snow2\"></div>\r\n  </div>\r\n  <div class=\"header-container-left 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      [href]=\"defaultURL\"\r\n    >\r\n      <img\r\n        *ngIf=\"isXmasCapVisible\"\r\n        class=\"xmas-cap\"\r\n        [src]=\"ASSETS.xmas_cap\"\r\n        alt=\"Santa Cap\"\r\n        width=\"20\"\r\n        height=\"20\" />\r\n      <img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"isBusinessCycleVisible\"\r\n      (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search\r\n      *ngIf=\"showSearch\"\r\n      [isAdvanceSearch]=\"isAdvanceSearch\"\r\n      (onSearchAction)=\"onSearchAction.emit($event)\"\r\n    ></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) && showCreateWorkflow\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n      [iframeLoading]=\"iframeLoading\"\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-left{width:260px}.header-container .product-logo{width:3rem;height:3rem;position:relative}.header-container .product-logo img{pointer-events:none}.header-container .product-logo img.xmas-cap{position:absolute;top:.25rem;left:.375rem}#snowfall{position:absolute;width:100%;height:100px;z-index:-1}.animate .snow{position:absolute;border-radius:50%;filter:blur(1px);background-color:#fff;width:10px;height:10px;top:-1000px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation:snowfall 7s linear,fadeOut 7s ease-out forwards}.animate .snow:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-150px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-250px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1{position:absolute;border-radius:50%;filter:blur(2px);background-color:#fff;width:9px;height:9px;top:-850px;left:123px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-3s;animation:snowfall 9s linear,fadeOut 9s ease-out forwards}.animate .snow1:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-350px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-450px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2{position:absolute;border-radius:50%;filter:blur(1.5px);background-color:#fff;width:9px;height:9px;top:-900px;left:-50px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-4s;animation:snowfall 14s linear,fadeOut 14s ease-out forwards}.animate .snow2:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-550px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-650px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}@keyframes snowfall{to{transform:translateY(1500px)}}@keyframes fadeOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'vc-header-container', template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\n<div\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\n>\n  <div id=\"snowfall\" *ngIf=\"isXmasCapVisible\" [class.animate]=\"showAnimation\">\n    <div class=\"snow\"></div>\n    <div class=\"snow1\"></div>\n    <div class=\"snow2\"></div>\n  </div>\n  <div class=\"header-container-left vx-d-flex vx-align-center\">\n    <a\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\n      [arTooltip]=\"'Go to Dashboard'\"\n      placement=\"right\"\n      type=\"white\"\n      delay=\"0\"\n      [tooltipMandatory]=\"true\"\n      [animate]=\"true\"\n      [href]=\"defaultURL\"\n    >\n      <img\n        *ngIf=\"isXmasCapVisible\"\n        class=\"xmas-cap\"\n        [src]=\"ASSETS.xmas_cap\"\n        alt=\"Santa Cap\"\n        width=\"20\"\n        height=\"20\" />\n      <img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\n    /></a>\n    <vc-business-cycle\n      *ngIf=\"isBusinessCycleVisible\"\n      (businessCycleChange)=\"businessCycleChangeHandler($event)\"\n    ></vc-business-cycle>\n  </div>\n  <div class=\"search-area\">\n    <vc-search\n      *ngIf=\"showSearch\"\n      [isAdvanceSearch]=\"isAdvanceSearch\"\n      (onSearchAction)=\"onSearchAction.emit($event)\"\n    ></vc-search>\n  </div>\n  <div class=\"vx-d-flex vx-align-center\">\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\n    <vc-create-workflow\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\n      [iframeLoading]=\"iframeLoading\"\n    ></vc-create-workflow>\n    <vc-queue></vc-queue>\n    <vc-user-details\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\n    ></vc-user-details>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/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-left{width:260px}.header-container .product-logo{width:3rem;height:3rem;position:relative}.header-container .product-logo img{pointer-events:none}.header-container .product-logo img.xmas-cap{position:absolute;top:.25rem;left:.375rem}#snowfall{position:absolute;width:100%;height:100px;z-index:-1}.animate .snow{position:absolute;border-radius:50%;filter:blur(1px);background-color:#fff;width:10px;height:10px;top:-1000px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation:snowfall 7s linear,fadeOut 7s ease-out forwards}.animate .snow:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-150px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-250px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1{position:absolute;border-radius:50%;filter:blur(2px);background-color:#fff;width:9px;height:9px;top:-850px;left:123px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-3s;animation:snowfall 9s linear,fadeOut 9s ease-out forwards}.animate .snow1:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-350px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow1:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-450px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2{position:absolute;border-radius:50%;filter:blur(1.5px);background-color:#fff;width:9px;height:9px;top:-900px;left:-50px;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff;animation-delay:-4s;animation:snowfall 14s linear,fadeOut 14s ease-out forwards}.animate .snow2:before{content:\"\";width:7px;height:7px;position:absolute;background-color:#fff;left:200px;top:-550px;border-radius:50%;box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}.animate .snow2:after{content:\"\";width:5px;height:5px;position:absolute;background-color:#fff;left:300px;top:-650px;border-radius:50%;filter:blur(1px);box-shadow:20px 20px 1px #fff,60px 40px 1px #fff,160px 135px 1px #fff,260px 240px 1px #fff,360px 340px 1px #fff,460px 440px 1px #fff,560px 340px 1px #fff,660px 240px 1px #fff,760px 140px 1px #fff,260px 640px 1px #fff,160px 340px 1px #fff,260px 440px 1px #fff,760px 140px 1px #fff,860px 40px 1px #fff,760px 140px 1px #fff,1260px 120px 1px #fff,1460px 10px 1px #fff,1560px 30px 1px #fff,1590px 124px 1px #fff,1680px 415px 1px #fff,1720px 335px 1px #fff,1000px 212px 1px #fff,990px 311px 1px #fff,888px 122px 1px #fff,765px 10px 1px #fff,635px 15px 1px #fff,554px 111px 1px #fff,455px 222px 1px #fff,125px 105px 1px #fff,275px 96px 1px #fff,245px 40px 1px #fff,230px 70px 1px #fff,285px 17px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,360px 340px 1px #fff,430px 210px 1px #fff,523px 23px 1px #fff,1650px 335px 1px #fff,1777px 123px 1px #fff,1800px 222px 1px #fff,1360px 140px 1px #fff}@keyframes snowfall{to{transform:translateY(1500px)}}@keyframes fadeOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: ApiService }, { type: LayoutService }, { type: i1$4.ActivatedRoute }]; }, propDecorators: { showSearch: [{
                 type: Input
             }], featureFlag: [{
@@ -2442,89 +2410,91 @@ class SubMenuContainerComponent {
         this.onCloseSubMenu.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubMenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubMenuContainerComponent, selector: "vc-sub-menu-container", inputs: { subMenuData: "subMenuData", moduleTitle: "moduleTitle" }, outputs: { onCloseSubMenu: "onCloseSubMenu" }, ngImport: i0, template: `
-    <div
-      class="sub-menu-container vx-pl-2 vx-pr-2 vx-pb-5"
-      [class.hide]="false"
-    >
-      <div
-        class="top-close-area vx-d-flex vx-align-center vx-justify-between vx-mb-2"
-      >
-        <div class="vx-fs-11 vx-fw-500 vx-gray-50 vx-lh-4 vx-ml-2">
-          {{ moduleTitle }}
-        </div>
-        <button
-          (click)="onSubMenuClose()"
-          class="vx-fs-8 vx-d-flex vx-align-center vx-justify-center vx-p-0 vx-m-0"
-          [arTooltip]="'Close'"
-          placement="left"
-          type="white"
-          delay="0"
-          [tooltipMandatory]="true"
-        >
-          <i class="icons">&#xe96b;</i>
-        </button>
-      </div>
-      <ul *ngIf="subMenuData?.length" class="vx-m-0 vx-p-0">
-        <li
-          class="vx-mb-2"
-          *ngFor="let eachMenu of subMenuData"
-          [ngClass]="eachMenu?.class"
-        >
-          <a
-            class="vx-fs-13 vx-fw-400 vx-txt-white vx-p-2 vx-d-block"
-            [href]="eachMenu?.href"
-            >{{ eachMenu?.name }}</a
-          >
-        </li>
-      </ul>
-      <ng-content></ng-content>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubMenuContainerComponent, selector: "vc-sub-menu-container", inputs: { subMenuData: "subMenuData", eachProduct: "eachProduct", moduleTitle: "moduleTitle" }, outputs: { onCloseSubMenu: "onCloseSubMenu" }, ngImport: i0, template: `
+    <div
+      class="sub-menu-container vx-pl-2 vx-pr-2 vx-pb-5"
+      [class.hide]="false"
+    >
+      <div
+        class="top-close-area vx-d-flex vx-align-center vx-justify-between vx-mb-2"
+      >
+        <div class="vx-fs-11 vx-fw-500 vx-gray-50 vx-lh-4 vx-ml-2">
+          {{ moduleTitle }}
+        </div>
+        <button
+          (click)="onSubMenuClose()"
+          class="vx-fs-8 vx-d-flex vx-align-center vx-justify-center vx-p-0 vx-m-0"
+          [arTooltip]="'Close'"
+          placement="left"
+          type="white"
+          delay="0"
+          [tooltipMandatory]="true"
+        >
+          <i class="icons">&#xe96b;</i>
+        </button>
+      </div>
+      <ul *ngIf="subMenuData?.length" class="vx-m-0 vx-p-0">
+        <li
+          class="vx-mb-2"
+          *ngFor="let eachMenu of subMenuData"
+          [ngClass]="eachMenu?.class"
+        >
+          <a
+            class="vx-fs-13 vx-fw-400 vx-txt-white vx-p-2 vx-d-block"
+            [href]="eachMenu?.href"
+            >{{ eachMenu?.name }}</a
+          >
+        </li>
+      </ul>
+      <ng-content></ng-content>
+    </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 .sub-menu-container{background:#282e48;border-radius:.75rem 0 0 .75rem;height:calc(100% - .25rem);width:13rem;position:relative;transition:all .1s ease-out}::ng-deep .sub-menu-container.hide{margin-left:-13rem}::ng-deep .sub-menu-container.hide:before{display:none}::ng-deep .sub-menu-container:before{background:#282e48;content:\"\";position:absolute;top:0;right:-2rem;width:2rem;height:100%}::ng-deep .sub-menu-container .top-close-area{position:relative;padding:10px 0}::ng-deep .sub-menu-container .top-close-area:before{background:#565a6f;content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px}::ng-deep .sub-menu-container .top-close-area button{background:#e3e3e9;border-radius:.125rem;border:none;width:1rem;height:1rem}::ng-deep .sub-menu-container ul{list-style-type:none}::ng-deep .sub-menu-container ul li a{border-radius:.25rem;width:100%;height:2rem;text-decoration:none}::ng-deep .sub-menu-container ul li a:hover{background:#565a6f}::ng-deep .sub-menu-container ul li.active a{background:#565a6f}\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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SubMenuContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vc-sub-menu-container', template: `
-    <div
-      class="sub-menu-container vx-pl-2 vx-pr-2 vx-pb-5"
-      [class.hide]="false"
-    >
-      <div
-        class="top-close-area vx-d-flex vx-align-center vx-justify-between vx-mb-2"
-      >
-        <div class="vx-fs-11 vx-fw-500 vx-gray-50 vx-lh-4 vx-ml-2">
-          {{ moduleTitle }}
-        </div>
-        <button
-          (click)="onSubMenuClose()"
-          class="vx-fs-8 vx-d-flex vx-align-center vx-justify-center vx-p-0 vx-m-0"
-          [arTooltip]="'Close'"
-          placement="left"
-          type="white"
-          delay="0"
-          [tooltipMandatory]="true"
-        >
-          <i class="icons">&#xe96b;</i>
-        </button>
-      </div>
-      <ul *ngIf="subMenuData?.length" class="vx-m-0 vx-p-0">
-        <li
-          class="vx-mb-2"
-          *ngFor="let eachMenu of subMenuData"
-          [ngClass]="eachMenu?.class"
-        >
-          <a
-            class="vx-fs-13 vx-fw-400 vx-txt-white vx-p-2 vx-d-block"
-            [href]="eachMenu?.href"
-            >{{ eachMenu?.name }}</a
-          >
-        </li>
-      </ul>
-      <ng-content></ng-content>
-    </div>
+            args: [{ selector: 'vc-sub-menu-container', template: `
+    <div
+      class="sub-menu-container vx-pl-2 vx-pr-2 vx-pb-5"
+      [class.hide]="false"
+    >
+      <div
+        class="top-close-area vx-d-flex vx-align-center vx-justify-between vx-mb-2"
+      >
+        <div class="vx-fs-11 vx-fw-500 vx-gray-50 vx-lh-4 vx-ml-2">
+          {{ moduleTitle }}
+        </div>
+        <button
+          (click)="onSubMenuClose()"
+          class="vx-fs-8 vx-d-flex vx-align-center vx-justify-center vx-p-0 vx-m-0"
+          [arTooltip]="'Close'"
+          placement="left"
+          type="white"
+          delay="0"
+          [tooltipMandatory]="true"
+        >
+          <i class="icons">&#xe96b;</i>
+        </button>
+      </div>
+      <ul *ngIf="subMenuData?.length" class="vx-m-0 vx-p-0">
+        <li
+          class="vx-mb-2"
+          *ngFor="let eachMenu of subMenuData"
+          [ngClass]="eachMenu?.class"
+        >
+          <a
+            class="vx-fs-13 vx-fw-400 vx-txt-white vx-p-2 vx-d-block"
+            [href]="eachMenu?.href"
+            >{{ eachMenu?.name }}</a
+          >
+        </li>
+      </ul>
+      <ng-content></ng-content>
+    </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 .sub-menu-container{background:#282e48;border-radius:.75rem 0 0 .75rem;height:calc(100% - .25rem);width:13rem;position:relative;transition:all .1s ease-out}::ng-deep .sub-menu-container.hide{margin-left:-13rem}::ng-deep .sub-menu-container.hide:before{display:none}::ng-deep .sub-menu-container:before{background:#282e48;content:\"\";position:absolute;top:0;right:-2rem;width:2rem;height:100%}::ng-deep .sub-menu-container .top-close-area{position:relative;padding:10px 0}::ng-deep .sub-menu-container .top-close-area:before{background:#565a6f;content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px}::ng-deep .sub-menu-container .top-close-area button{background:#e3e3e9;border-radius:.125rem;border:none;width:1rem;height:1rem}::ng-deep .sub-menu-container ul{list-style-type:none}::ng-deep .sub-menu-container ul li a{border-radius:.25rem;width:100%;height:2rem;text-decoration:none}::ng-deep .sub-menu-container ul li a:hover{background:#565a6f}::ng-deep .sub-menu-container ul li.active a{background:#565a6f}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { subMenuData: [{
                 type: Input
+            }], eachProduct: [{
+                type: Input
             }], moduleTitle: [{
                 type: Input
             }], onCloseSubMenu: [{
@@ -2705,11 +2675,11 @@ class CsRadioComponent {
         this.checkedEvent.emit(evt);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsRadioComponent, selector: "app-cs-radio", inputs: { disabled: "disabled", readonly: "readonly", name: "name", checked: "checked", value: "value" }, outputs: { checkedEvent: "checkedEvent" }, ngImport: i0, template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n  <span class=\"radio\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsRadioComponent, selector: "app-cs-radio", inputs: { disabled: "disabled", readonly: "readonly", name: "name", checked: "checked", value: "value" }, outputs: { checkedEvent: "checkedEvent" }, ngImport: i0, template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\n  <span class=\"radio\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-radio', template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\r\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\r\n  <span class=\"radio\">\r\n    <span class=\"inner\"></span>\r\n  </span>\r\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\r\n  </svg>\r\n  <span class=\"value\"><ng-content></ng-content></span>\r\n</label>\r\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
+            args: [{ selector: 'app-cs-radio', template: "<label class=\"radio-item\" [class.readonly]=\"readonly\">\n  <input type=\"radio\" [disabled]=\"disabled\" [name]=\"name\" [value]=\"value\" [checked]=\"checked\" (change)=\"changeState($event)\" />\n  <span class=\"radio\">\n    <span class=\"inner\"></span>\n  </span>\n  <svg class=\"radiomark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n    <circle class=\"radiomark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n    <circle class=\"radiomark__check\" cx=\"26\" cy=\"26\" r=\"5\" fill=\"none\" />\n  </svg>\n  <span class=\"value\"><ng-content></ng-content></span>\n</label>\n", styles: ["label{max-width:600px}label.radio-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;padding:0;max-width:100%}label.radio-item.readonly{pointer-events:none}label.radio-item span{display:inline-flex;align-items:center}label.radio-item span.radio{background:#fff;height:16px;width:16px;border-radius:50%;border:1px solid #dbdbdb;position:relative;padding:5px;margin-top:0}label.radio-item span.radio .inner{height:10px;width:10px;border-radius:50%;background:#fff;display:none}label.radio-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px)}label.radio-item span.value:empty{display:none}label.radio-item svg{display:none;margin-top:0}label.radio-item input[type=radio]{display:none}label.radio-item input[type=radio]:checked+span.radio{display:none}label.radio-item input[type=radio]:checked~svg{display:block}label.radio-item input[type=radio]:disabled~*{opacity:.7}.radiomark{width:16px;height:16px;border-radius:50%;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.radiomark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.radiomark__check{stroke-dasharray:100;stroke-dashoffset:100;stroke-width:10;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
                 type: Input
             }], readonly: [{
@@ -2735,11 +2705,11 @@ class CsSwitchComponent {
         this.ngValueChange.emit(this.ngValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSwitchComponent, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n  <!-- [class.large]=\"large\" -->\r\n  <span class=\"value\">\r\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [appTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n        <i class=\"vc-icons\">&#xe9f3;</i>\r\n      </span> -->\r\n  </span>\r\n  <!-- [class.last]=\"last\" -->\r\n  <span\r\n    class=\"switch\"\r\n    *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [(ngModel)]=\"ngValue\"\r\n      (ngModelChange)=\"valueChanged()\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n  <span\r\n    class=\"switch\"\r\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n    [arTooltip]=\"tooltipMessage\"\r\n    placement=\"bottom-right\"\r\n    delay=\"0\"\r\n    type=\"black\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [(ngModel)]=\"ngValue\"\r\n      (ngModelChange)=\"valueChanged()\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n</label>\r\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSwitchComponent, selector: "app-cs-switch", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value", tooltipMessage: "tooltipMessage", position: "position" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [appTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"ngValue\"\n      (ngModelChange)=\"valueChanged()\"\n      [disabled]=\"disabled\"\n    />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"ngValue\"\n      (ngModelChange)=\"valueChanged()\"\n      [disabled]=\"disabled\"\n    />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-switch', template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\r\n  <!-- [class.large]=\"large\" -->\r\n  <span class=\"value\">\r\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\r\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [appTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n        <i class=\"vc-icons\">&#xe9f3;</i>\r\n      </span> -->\r\n  </span>\r\n  <!-- [class.last]=\"last\" -->\r\n  <span\r\n    class=\"switch\"\r\n    *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [(ngModel)]=\"ngValue\"\r\n      (ngModelChange)=\"valueChanged()\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n  <span\r\n    class=\"switch\"\r\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\r\n    [arTooltip]=\"tooltipMessage\"\r\n    placement=\"bottom-right\"\r\n    delay=\"0\"\r\n    type=\"black\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <input\r\n      type=\"checkbox\"\r\n      [(ngModel)]=\"ngValue\"\r\n      (ngModelChange)=\"valueChanged()\"\r\n      [disabled]=\"disabled\"\r\n    />\r\n    <span class=\"switch-box\">\r\n      <span class=\"switch-ball\"></span>\r\n    </span>\r\n  </span>\r\n</label>\r\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
+            args: [{ selector: 'app-cs-switch', template: "<label class=\"cs-switch\" [class.top]=\"position == 'top'\">\n  <!-- [class.large]=\"large\" -->\n  <span class=\"value\">\n    <span [innerHTML]=\"value\" *ngIf=\"value != undefined\"></span>\n    <!-- <span class=\"notification\" *ngIf=\"!tooltipMessage\" [appTooltip]=\"tooltipMessage\" placement=\"bottom-right\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n        <i class=\"vc-icons\">&#xe9f3;</i>\n      </span> -->\n  </span>\n  <!-- [class.last]=\"last\" -->\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage === '' || tooltipMessage === undefined\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"ngValue\"\n      (ngModelChange)=\"valueChanged()\"\n      [disabled]=\"disabled\"\n    />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n  <span\n    class=\"switch\"\n    *ngIf=\"tooltipMessage !== '' && tooltipMessage !== undefined\"\n    [arTooltip]=\"tooltipMessage\"\n    placement=\"bottom-right\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <input\n      type=\"checkbox\"\n      [(ngModel)]=\"ngValue\"\n      (ngModelChange)=\"valueChanged()\"\n      [disabled]=\"disabled\"\n    />\n    <span class=\"switch-box\">\n      <span class=\"switch-ball\"></span>\n    </span>\n  </span>\n</label>\n", styles: ["label.cs-switch{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0}label.cs-switch.top{align-items:flex-start}label.cs-switch span.value{font-size:12px;color:#161b2f;font-weight:400;display:flex;justify-content:space-between;width:calc(100% - 35px);align-items:flex-start}label.cs-switch span.switch{position:relative;display:block;width:25px;height:14px}label.cs-switch span.switch input{position:absolute;opacity:0;margin:0;width:100%;height:100%;z-index:1;cursor:pointer}label.cs-switch span.switch input:checked+span.switch-box{background:#34aa44;border:1px solid #34aa44}label.cs-switch span.switch input:checked+span.switch-box .switch-ball{left:13px}label.cs-switch span.switch input:disabled{pointer-events:none}label.cs-switch span.switch input:disabled+.switch-box{opacity:.5}label.cs-switch span.switch-box{height:100%;width:100%;border-radius:11px;background:#bcbcbc;border:1px solid #bcbcbc;display:block;transition:all .2s ease-in-out}label.cs-switch span.switch-ball{height:10px;width:10px;background:#fff;border-radius:50%;border:1px solid #ffffff;display:block;position:absolute;left:2px;top:2px;bottom:1px;transition:all .2s ease-in-out}label.cs-switch span.notification{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:20px;margin:0 10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
                 type: Input
             }], ngValue: [{
@@ -2758,11 +2728,11 @@ class CsRadioGroupComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsRadioGroupComponent, selector: "app-cs-radio-group", ngImport: i0, template: "<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n", styles: [""], dependencies: [{ kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsRadioGroupComponent, selector: "app-cs-radio-group", ngImport: i0, template: "<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n", styles: [""], dependencies: [{ kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-radio-group', template: "<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n<app-cs-radio>fefre</app-cs-radio>\r\n" }]
+            args: [{ selector: 'app-cs-radio-group', template: "<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n<app-cs-radio>fefre</app-cs-radio>\n" }]
         }], ctorParameters: function () { return []; } });
 
 class ClickOutsideDirective {
@@ -2862,11 +2832,11 @@ class CsSelectComponent {
         this.dropdownOption = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSelectComponent, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n  <label *ngIf=\"dropdownLabel != undefined\">\r\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\r\n    <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n  >\r\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n    <input\r\n      type=\"text\"\r\n      [class.line]=\"stylex\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"selectedValue | pascal\"\r\n      readonly\r\n      (click)=\"openDropdown($event)\"\r\n      (keyup.enter)=\"openDropdown($event)\"\r\n      (keyup.arrowup)=\"openDropdown($event)\"\r\n      (keyup.arrowdown)=\"openDropdown($event)\"\r\n      *ngIf=\"!colorProperty\"\r\n    />\r\n    <span\r\n      class=\"show-label\"\r\n      *ngIf=\"colorProperty\"\r\n      (click)=\"openDropdown($event)\"\r\n    >\r\n      <span\r\n        class=\"label\"\r\n        [innerHTML]=\"selectedValue\"\r\n        [style.backgroundColor]=\"colorSelected + '1A'\"\r\n        [style.color]=\"colorSelected\"\r\n      ></span>\r\n    </span>\r\n    <!-- <span class=\"arrow\" [class.line]=\"stylex\">\r\n      <i class=\"icons\">&#xe919;</i>\r\n    </span> -->\r\n    <div\r\n      class=\"overlay active\"\r\n      *ngIf=\"dropdownOption === true\"\r\n      (click)=\"closeDropdown()\"\r\n    ></div>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && !colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label>\r\n          <input\r\n            type=\"radio\"\r\n            [value]=\"data[valueKey]\"\r\n            name=\"sliceLabel\"\r\n            (change)=\"selectOption(data)\"\r\n            #option\r\n            (keyup.enter)=\"closeDropdown()\"\r\n            class=\"pointer-none\"\r\n          />\r\n          <span\r\n            (click)=\"closeDropdown(); selectOption(data)\"\r\n            *ngIf=\"displayProperty && displayProperty !== ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data[displayProperty]\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            >{{ data[displayProperty] }}</span\r\n          >\r\n          <span\r\n            (click)=\"closeDropdown(); selectOption(data)\"\r\n            *ngIf=\"!displayProperty || displayProperty === ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            >{{ data }}</span\r\n          >\r\n        </label>\r\n      </li>\r\n    </ul>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label class=\"colors\">\r\n          <input\r\n            type=\"radio\"\r\n            [value]=\"data[valueKey]\"\r\n            name=\"sliceLabel\"\r\n            (click)=\"selectOption(data)\"\r\n            #option\r\n            (keyup.enter)=\"closeDropdown()\"\r\n            class=\"pointer-none\"\r\n          />\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"displayProperty && displayProperty !== ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data[displayProperty]\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data[displayProperty] }}</span\r\n          >\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"!displayProperty || displayProperty === ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data }}</span\r\n          >\r\n        </label>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{background:#fff;position:relative}.input-group .custom-select-box:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px;background:transparent}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\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: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsSelectComponent, selector: "app-cs-select", inputs: { dataList: "dataList", dropdownLabel: "dropdownLabel", displayProperty: "displayProperty", selectedValue: "selectedValue", isRequired: "isRequired", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", stylex: "stylex", valueKey: "valueKey", multipleSelect: "multipleSelect", colorProperty: "colorProperty", colorSelected: "colorSelected" }, outputs: { selectedData: "selectedData", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }, { propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span\n      class=\"show-label\"\n      *ngIf=\"colorProperty\"\n      (click)=\"openDropdown($event)\"\n    >\n      <span\n        class=\"label\"\n        [innerHTML]=\"selectedValue\"\n        [style.backgroundColor]=\"colorSelected + '1A'\"\n        [style.color]=\"colorSelected\"\n      ></span>\n    </span>\n    <!-- <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"icons\">&#xe919;</i>\n    </span> -->\n    <div\n      class=\"overlay active\"\n      *ngIf=\"dropdownOption === true\"\n      (click)=\"closeDropdown()\"\n    ></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input\n            type=\"radio\"\n            [value]=\"data[valueKey]\"\n            name=\"sliceLabel\"\n            (change)=\"selectOption(data)\"\n            #option\n            (keyup.enter)=\"closeDropdown()\"\n            class=\"pointer-none\"\n          />\n          <span\n            (click)=\"closeDropdown(); selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [arTooltip]=\"data[displayProperty]\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"closeDropdown(); selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [arTooltip]=\"data\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input\n            type=\"radio\"\n            [value]=\"data[valueKey]\"\n            name=\"sliceLabel\"\n            (click)=\"selectOption(data)\"\n            #option\n            (keyup.enter)=\"closeDropdown()\"\n            class=\"pointer-none\"\n          />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [arTooltip]=\"data[displayProperty]\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [arTooltip]=\"data\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{background:#fff;position:relative}.input-group .custom-select-box:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px;background:transparent}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\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: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: PascalPipe, name: "pascal" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-select', template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\r\n  <label *ngIf=\"dropdownLabel != undefined\">\r\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\r\n    <span class=\"required\" *ngIf=\"isRequired\">*</span></label\r\n  >\r\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\r\n    <input\r\n      type=\"text\"\r\n      [class.line]=\"stylex\"\r\n      [placeholder]=\"placeholder\"\r\n      [value]=\"selectedValue | pascal\"\r\n      readonly\r\n      (click)=\"openDropdown($event)\"\r\n      (keyup.enter)=\"openDropdown($event)\"\r\n      (keyup.arrowup)=\"openDropdown($event)\"\r\n      (keyup.arrowdown)=\"openDropdown($event)\"\r\n      *ngIf=\"!colorProperty\"\r\n    />\r\n    <span\r\n      class=\"show-label\"\r\n      *ngIf=\"colorProperty\"\r\n      (click)=\"openDropdown($event)\"\r\n    >\r\n      <span\r\n        class=\"label\"\r\n        [innerHTML]=\"selectedValue\"\r\n        [style.backgroundColor]=\"colorSelected + '1A'\"\r\n        [style.color]=\"colorSelected\"\r\n      ></span>\r\n    </span>\r\n    <!-- <span class=\"arrow\" [class.line]=\"stylex\">\r\n      <i class=\"icons\">&#xe919;</i>\r\n    </span> -->\r\n    <div\r\n      class=\"overlay active\"\r\n      *ngIf=\"dropdownOption === true\"\r\n      (click)=\"closeDropdown()\"\r\n    ></div>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && !colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label>\r\n          <input\r\n            type=\"radio\"\r\n            [value]=\"data[valueKey]\"\r\n            name=\"sliceLabel\"\r\n            (change)=\"selectOption(data)\"\r\n            #option\r\n            (keyup.enter)=\"closeDropdown()\"\r\n            class=\"pointer-none\"\r\n          />\r\n          <span\r\n            (click)=\"closeDropdown(); selectOption(data)\"\r\n            *ngIf=\"displayProperty && displayProperty !== ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data[displayProperty]\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            >{{ data[displayProperty] }}</span\r\n          >\r\n          <span\r\n            (click)=\"closeDropdown(); selectOption(data)\"\r\n            *ngIf=\"!displayProperty || displayProperty === ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            >{{ data }}</span\r\n          >\r\n        </label>\r\n      </li>\r\n    </ul>\r\n    <ul\r\n      class=\"list-of-option\"\r\n      *ngIf=\"dropdownOption === true && colorProperty\"\r\n      #optionList\r\n      (keyup.Escape)=\"closeDropdown()\"\r\n      [style.top.px]=\"getTop\"\r\n      [style.left.px]=\"getLeft\"\r\n      [style.min-width.px]=\"getWidth\"\r\n      [style.max-width.px]=\"maxWidth\"\r\n      [class.active]=\"activeDoropdown\"\r\n    >\r\n      <li *ngFor=\"let data of dataList\">\r\n        <label class=\"colors\">\r\n          <input\r\n            type=\"radio\"\r\n            [value]=\"data[valueKey]\"\r\n            name=\"sliceLabel\"\r\n            (click)=\"selectOption(data)\"\r\n            #option\r\n            (keyup.enter)=\"closeDropdown()\"\r\n            class=\"pointer-none\"\r\n          />\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"displayProperty && displayProperty !== ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data[displayProperty]\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data[displayProperty] }}</span\r\n          >\r\n          <span\r\n            (click)=\"selectOption(data)\"\r\n            *ngIf=\"!displayProperty || displayProperty === ''\"\r\n            class=\"value\"\r\n            [arTooltip]=\"data\"\r\n            placement=\"bottom-left\"\r\n            delay=\"0\"\r\n            type=\"black\"\r\n            [tooltipMandatory]=\"true\"\r\n            [ngStyle]=\"{ color: data.segment_color }\"\r\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\r\n            >{{ data }}</span\r\n          >\r\n        </label>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{background:#fff;position:relative}.input-group .custom-select-box:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px;background:transparent}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
+            args: [{ selector: 'app-cs-select', template: "<div class=\"input-group\" (clickOutside)=\"dropdownOption = false\">\n  <label *ngIf=\"dropdownLabel != undefined\">\n    {{ dropdownLabel }} <span class=\"sub-label\">{{ dropdownSubLabel }}</span>\n    <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n  >\n  <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n    <input\n      type=\"text\"\n      [class.line]=\"stylex\"\n      [placeholder]=\"placeholder\"\n      [value]=\"selectedValue | pascal\"\n      readonly\n      (click)=\"openDropdown($event)\"\n      (keyup.enter)=\"openDropdown($event)\"\n      (keyup.arrowup)=\"openDropdown($event)\"\n      (keyup.arrowdown)=\"openDropdown($event)\"\n      *ngIf=\"!colorProperty\"\n    />\n    <span\n      class=\"show-label\"\n      *ngIf=\"colorProperty\"\n      (click)=\"openDropdown($event)\"\n    >\n      <span\n        class=\"label\"\n        [innerHTML]=\"selectedValue\"\n        [style.backgroundColor]=\"colorSelected + '1A'\"\n        [style.color]=\"colorSelected\"\n      ></span>\n    </span>\n    <!-- <span class=\"arrow\" [class.line]=\"stylex\">\n      <i class=\"icons\">&#xe919;</i>\n    </span> -->\n    <div\n      class=\"overlay active\"\n      *ngIf=\"dropdownOption === true\"\n      (click)=\"closeDropdown()\"\n    ></div>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && !colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label>\n          <input\n            type=\"radio\"\n            [value]=\"data[valueKey]\"\n            name=\"sliceLabel\"\n            (change)=\"selectOption(data)\"\n            #option\n            (keyup.enter)=\"closeDropdown()\"\n            class=\"pointer-none\"\n          />\n          <span\n            (click)=\"closeDropdown(); selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [arTooltip]=\"data[displayProperty]\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"closeDropdown(); selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [arTooltip]=\"data\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n    <ul\n      class=\"list-of-option\"\n      *ngIf=\"dropdownOption === true && colorProperty\"\n      #optionList\n      (keyup.Escape)=\"closeDropdown()\"\n      [style.top.px]=\"getTop\"\n      [style.left.px]=\"getLeft\"\n      [style.min-width.px]=\"getWidth\"\n      [style.max-width.px]=\"maxWidth\"\n      [class.active]=\"activeDoropdown\"\n    >\n      <li *ngFor=\"let data of dataList\">\n        <label class=\"colors\">\n          <input\n            type=\"radio\"\n            [value]=\"data[valueKey]\"\n            name=\"sliceLabel\"\n            (click)=\"selectOption(data)\"\n            #option\n            (keyup.enter)=\"closeDropdown()\"\n            class=\"pointer-none\"\n          />\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"displayProperty && displayProperty !== ''\"\n            class=\"value\"\n            [arTooltip]=\"data[displayProperty]\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data[displayProperty] }}</span\n          >\n          <span\n            (click)=\"selectOption(data)\"\n            *ngIf=\"!displayProperty || displayProperty === ''\"\n            class=\"value\"\n            [arTooltip]=\"data\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"true\"\n            [ngStyle]=\"{ color: data.segment_color }\"\n            [style.backgroundColor]=\"data.segment_color + '1A'\"\n            >{{ data }}</span\n          >\n        </label>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".input-group{position:relative;margin-bottom:0}.input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}.input-group label span.required{color:#eb2424;font-size:14px}.input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:3px}.input-group input[type=text],.input-group .show-label{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #dbdbdb;border-radius:4px;width:100%;padding:10px 13px;display:block;outline:none;overflow:hidden;text-overflow:ellipsis}.input-group input[type=text].line,.input-group .show-label.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}.input-group .show-label{display:flex;padding:6px;padding-right:25px!important;cursor:pointer}.input-group .show-label .label{white-space:nowrap;padding:2px 5px;height:100%;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-transform:uppercase;font-size:11px;font-weight:600;line-height:15px;pointer-events:none}.input-group:focus-within input[type=text]{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd333}.input-group:focus-within input[type=text].line{box-shadow:none}.input-group .custom-select-box{background:#fff;position:relative}.input-group .custom-select-box:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}.input-group .custom-select-box input[type=text],.input-group .custom-select-box .input{cursor:pointer;padding-right:30px;background:transparent}.input-group .custom-select-box input[type=text].line,.input-group .custom-select-box .input.line{padding-right:20px}.input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}.input-group .arrow{position:absolute;right:17px;color:#747576;bottom:8px;font-size:10px;pointer-events:none}.input-group .arrow.line{right:5px}ul.list-of-option{position:fixed;overflow:auto;max-height:200px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:2147483002;background:#fff;border-radius:2px;opacity:0}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;left:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multiselect{padding:0 15px}ul.list-of-option li label.multiselect span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option li label.colors{padding:3px 5px}ul.list-of-option li label.colors span.value{padding:3px 6px;line-height:16px;font-size:11px;font-weight:600}\n"] }]
         }], propDecorators: { dataList: [{
                 type: Input
             }], dropdownLabel: [{
@@ -2941,11 +2911,11 @@ class CsCheckboxIndeterminateComponent {
         this.ngValueChange.emit(emitValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxIndeterminateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxIndeterminateComponent, selector: "app-cs-checkbox-indeterminate", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n    <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n    <span class=\"checkbox\">\r\n      <span class=\"inner\"></span>\r\n    </span>\r\n    <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n      <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n      <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\r\n    </svg>\r\n    <span class=\"value\"><ng-content></ng-content></span>\r\n  </label>\r\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;max-width:100%;position:relative;padding:0 0 0 28px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;left:0;top:0;padding:2px;margin-top:0}label.checkbox-item span.value{display:block;color:#747576;font-size:14px;line-height:16px;font-weight:400;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsCheckboxIndeterminateComponent, selector: "app-cs-checkbox-indeterminate", inputs: { disabled: "disabled", ngValue: "ngValue", value: "value" }, outputs: { ngValueChange: "ngValueChange" }, ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n    <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n    <span class=\"checkbox\">\n      <span class=\"inner\"></span>\n    </span>\n    <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n      <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n      <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\n    </svg>\n    <span class=\"value\"><ng-content></ng-content></span>\n  </label>\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;max-width:100%;position:relative;padding:0 0 0 28px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;left:0;top:0;padding:2px;margin-top:0}label.checkbox-item span.value{display:block;color:#747576;font-size:14px;line-height:16px;font-weight:400;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsCheckboxIndeterminateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cs-checkbox-indeterminate', template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n    <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\r\n    <span class=\"checkbox\">\r\n      <span class=\"inner\"></span>\r\n    </span>\r\n    <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n      <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n      <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\r\n    </svg>\r\n    <span class=\"value\"><ng-content></ng-content></span>\r\n  </label>\r\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;max-width:100%;position:relative;padding:0 0 0 28px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;left:0;top:0;padding:2px;margin-top:0}label.checkbox-item span.value{display:block;color:#747576;font-size:14px;line-height:16px;font-weight:400;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
+            args: [{ selector: 'app-cs-checkbox-indeterminate', template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n    <input type=\"checkbox\" [name]=\"value\" [disabled]=\"disabled\" [(ngModel)]=\"ngValue\" (ngModelChange)=\"valueChanged()\" />\n    <span class=\"checkbox\">\n      <span class=\"inner\"></span>\n    </span>\n    <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n      <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n      <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\n    </svg>\n    <span class=\"value\"><ng-content></ng-content></span>\n  </label>\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;max-width:100%;position:relative;padding:0 0 0 28px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;left:0;top:0;padding:2px;margin-top:0}label.checkbox-item span.value{display:block;color:#747576;font-size:14px;line-height:16px;font-weight:400;max-width:calc(100% - 26px)}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7}.disabled{opacity:.4!important}.checkmark{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:2px;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
                 type: Input
             }], ngValue: [{
@@ -2984,11 +2954,11 @@ class CheckboxComponent {
         this.onTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "vui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminateEnabled: "indeterminateEnabled" }, providers: [CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"valueChanged()\"/>\r\n    <span class=\"checkbox\">\r\n      <span class=\"inner\"></span>\r\n    </span>\r\n    <!-- svg for checkmark -->\r\n    <ng-container *ngIf=\"!indeterminateEnabled\">\r\n        <svg  class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n            <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n          </svg>\r\n    </ng-container>\r\n   \r\n    <ng-container *ngIf=\"indeterminateEnabled\">\r\n        <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n            <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\r\n          </svg>\r\n    </ng-container>\r\n \r\n    <span class=\"value\"><ng-content></ng-content></span>\r\n  </label>\r\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;width:100%;position:relative;padding:0 0 0 16px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;top:0;left:0;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px);-webkit-user-select:none;user-select:none}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7;pointer-events:none}.disabled{opacity:.4!important;pointer-events:none}.checkmark{width:16px;height:16px;border-radius:2px;position:absolute;top:0;left:0;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "vui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminateEnabled: "indeterminateEnabled" }, providers: [CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"valueChanged()\"/>\n    <span class=\"checkbox\">\n      <span class=\"inner\"></span>\n    </span>\n    <!-- svg for checkmark -->\n    <ng-container *ngIf=\"!indeterminateEnabled\">\n        <svg  class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n    </ng-container>\n   \n    <ng-container *ngIf=\"indeterminateEnabled\">\n        <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\n          </svg>\n    </ng-container>\n \n    <span class=\"value\"><ng-content></ng-content></span>\n  </label>\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;width:100%;position:relative;padding:0 0 0 16px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;top:0;left:0;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px);-webkit-user-select:none;user-select:none}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7;pointer-events:none}.disabled{opacity:.4!important;pointer-events:none}.checkmark{width:16px;height:16px;border-radius:2px;position:absolute;top:0;left:0;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\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: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vui-checkbox', providers: [CHECKBOX_VALUE_ACCESSOR], inputs: ['disabled', 'checked', 'indeterminateEnabled'], template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\r\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"valueChanged()\"/>\r\n    <span class=\"checkbox\">\r\n      <span class=\"inner\"></span>\r\n    </span>\r\n    <!-- svg for checkmark -->\r\n    <ng-container *ngIf=\"!indeterminateEnabled\">\r\n        <svg  class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n            <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n          </svg>\r\n    </ng-container>\r\n   \r\n    <ng-container *ngIf=\"indeterminateEnabled\">\r\n        <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n            <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\r\n          </svg>\r\n    </ng-container>\r\n \r\n    <span class=\"value\"><ng-content></ng-content></span>\r\n  </label>\r\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;width:100%;position:relative;padding:0 0 0 16px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;top:0;left:0;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px);-webkit-user-select:none;user-select:none}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7;pointer-events:none}.disabled{opacity:.4!important;pointer-events:none}.checkmark{width:16px;height:16px;border-radius:2px;position:absolute;top:0;left:0;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
+            args: [{ selector: 'vui-checkbox', providers: [CHECKBOX_VALUE_ACCESSOR], inputs: ['disabled', 'checked', 'indeterminateEnabled'], template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"valueChanged()\"/>\n    <span class=\"checkbox\">\n      <span class=\"inner\"></span>\n    </span>\n    <!-- svg for checkmark -->\n    <ng-container *ngIf=\"!indeterminateEnabled\">\n        <svg  class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n    </ng-container>\n   \n    <ng-container *ngIf=\"indeterminateEnabled\">\n        <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\n          </svg>\n    </ng-container>\n \n    <span class=\"value\"><ng-content></ng-content></span>\n  </label>\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;width:100%;position:relative;padding:0 0 0 16px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;top:0;left:0;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px);-webkit-user-select:none;user-select:none}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7;pointer-events:none}.disabled{opacity:.4!important;pointer-events:none}.checkmark{width:16px;height:16px;border-radius:2px;position:absolute;top:0;left:0;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
         }] });
 
 class FormgroupModule {