vc-layout 0.0.1

package/fesm2022/vc-layout.mjs

@@ -0,0 +1,2457 @@
+import * as i0 from '@angular/core';
+import { Injectable, Optional, Component, NgModule, Directive, Input, HostListener, EventEmitter, Output, ViewChild, Pipe, forwardRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import * as i1$1 from '@vcomply/authorizer';
+import * as i1$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as dayjs from 'dayjs';
+import * as customParseFormat from 'dayjs/plugin/customParseFormat';
+import * as i1$3 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+
+const API = {
+    subscriptionList: `subscriptionList`,
+    organizationDetails: `orgDetails&id=`,
+    userDetails: `users&id=`,
+    queueCount: `complianceReport/TotalResponsibilityQueue`,
+};
+
+class LayoutService {
+    constructor() {
+        this.baseUrl = '';
+        this.setBaseUrl();
+    }
+    setBaseUrl() {
+        this.baseUrl = window.location.origin;
+    }
+    ConvertUtcToLocalDateTime(timestamp, TimeZone) {
+        if (typeof timestamp !== 'number' || timestamp <= 0) {
+            return 0;
+        }
+        if (!TimeZone) {
+            return 0;
+        }
+        const date = new Date(timestamp * 1000);
+        const options = {
+            timeZone: TimeZone,
+            weekday: 'long',
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        const formattedDate = new Intl.DateTimeFormat('en', options).format(date);
+        return formattedDate;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class Configurations {
+    constructor() {
+        this.envConfig = {};
+    }
+}
+
+class ApiService {
+    constructor(http, authService, layoutService, config) {
+        this.http = http;
+        this.authService = authService;
+        this.layoutService = layoutService;
+        this.userId = '';
+        this.subscriptionDetail$ = new BehaviorSubject(null);
+        this.organizationDetail$ = new BehaviorSubject(null);
+        this.loggedUserDetail$ = new BehaviorSubject(null);
+        this.queueCount$ = new BehaviorSubject(null);
+        this.env = config?.envConfig;
+        this.userDetails = authService.getUser();
+        this.getOrgDetails(this.userDetails?.organisation_id ?? 0);
+        this.getUserDetails(this.authService?.getMemberId() ?? '');
+        this.getQueueCount();
+    }
+    /**
+     *
+     * API definitions
+     */
+    // Subscription List
+    subscriptionList() {
+        return this.http.get(this.env.organizationGet + API.subscriptionList);
+    }
+    // Organization List
+    organizationDetails(id) {
+        return this.http.get(this.env.organizationGet + API.organizationDetails + id);
+    }
+    // Logged in User Details
+    loggedInUserDetails(id) {
+        return this.http.get(this.env.organizationGet + API.userDetails + id);
+    }
+    // Logged in Queue Count
+    queueCount() {
+        return this.http.get(this.env.complianceGet + API.queueCount);
+    }
+    /**
+     * ALL API CALLS
+     *
+     */
+    //fetch subscription list
+    getSubscriptionList() {
+        this.subscriptionList().subscribe((data) => {
+            if (data.length) {
+                let response = data[0];
+                response['expiredDetails'] =
+                    this.layoutService.ConvertUtcToLocalDateTime(response.expiry_date, this.userDetails.timezone);
+                this.subscriptionDetail$.next(data[0]);
+            }
+        });
+    }
+    //fetch organization details
+    getOrgDetails(id) {
+        this.organizationDetails(id).subscribe((data) => {
+            if (data) {
+                this.organizationDetail$.next(data);
+            }
+        });
+    }
+    //fetch logged in user details
+    getUserDetails(_id) {
+        this.loggedInUserDetails(_id).subscribe((data) => {
+            if (data) {
+                this.loggedUserDetail$.next(data);
+                console.log('this.loggedUserDetail$ ==>', this.loggedUserDetail$.value);
+            }
+        });
+    }
+    //fetch Queue Count
+    getQueueCount() {
+        this.queueCount().subscribe((data) => {
+            if (data) {
+                this.queueCount$.next(data);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiService, deps: [{ token: i1.HttpClient }, { token: i1$1.AuthorizerService }, { token: LayoutService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i1$1.AuthorizerService }, { type: LayoutService }, { type: Configurations, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class RbacService {
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.permissions = {};
+    }
+    /**
+     * Retrieves the RBAC (Role-Based Access Control) permissions for a given module.
+     *
+     * @param MODULE - The module for which to retrieve the permissions. Must be one of the following values:
+     *   - 'assessment'
+     *   - 'audit'
+     *   - 'issue'
+     *   - 'policy'
+     *   - 'risk'
+     *   - 'assurance'
+     *   - 'compliance'
+     *   - 'organization'
+     *
+     * @returns An array of strings representing the permissions for the specified module.
+     */
+    getRBACPermissions(MODULE) {
+        const data = this.apiService.loggedUserDetail$.value?.roleActions ?? [];
+        console.log(data);
+        if (this.permissions[MODULE]) {
+            return this.permissions[MODULE];
+        }
+        const modulePermissions = data.find((item) => item.moduleName === MODULE);
+        const PERMISSION_ARRAY = [];
+        // checked if module is active
+        if (modulePermissions?.isActive) {
+            // find all active submodules
+            modulePermissions.subModule
+                ?.filter((subModule) => subModule.isActive)
+                .forEach((subModule) => {
+                // find all active permissions
+                subModule.permissions
+                    ?.filter((permission) => permission.enable)
+                    .forEach((permission) => {
+                    PERMISSION_ARRAY.push(permission.code);
+                });
+            });
+        }
+        this.permissions[MODULE] = PERMISSION_ARRAY;
+        return PERMISSION_ARRAY;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RbacService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RbacService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RbacService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ApiService }]; } });
+
+class VcLayoutService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class VcLayoutComponent {
+    constructor() {
+        this.baseUrl = '';
+        this.setBaseUrl();
+    }
+    ngOnInit() { }
+    setBaseUrl() {
+        this.baseUrl = window.location.origin;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VcLayoutComponent, selector: "vc-layout", ngImport: i0, template: ` <p>vc-layout works!</p> `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-layout', template: ` <p>vc-layout works!</p> ` }]
+        }], ctorParameters: function () { return []; } });
+
+class VcLayoutModule {
+    static forRoot(environmentConfig) {
+        return {
+            ngModule: VcLayoutModule,
+            providers: [{ provide: Configurations, useValue: environmentConfig }],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutModule, declarations: [VcLayoutComponent], exports: [VcLayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VcLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [VcLayoutComponent],
+                    imports: [],
+                    exports: [VcLayoutComponent],
+                }]
+        }] });
+
+const BASE_URL = 'https://cdn.v-comply.com';
+const ASSETS = {
+    unauthorized: `${BASE_URL}/application/images/unauthorized-image.svg`,
+    v_icon: `${BASE_URL}/logo/prod/v-logo.svg`,
+    hamburger_icon: `${BASE_URL}/logo/prod/hamburger-icon.svg`,
+    dashboard_icon: `${BASE_URL}/logo/prod/dashboard-icon.svg`,
+    toDoResponsibility_icon: `${BASE_URL}/logo/prod/toDo-responsibility-icon.svg`,
+    organization_icon: `${BASE_URL}/logo/prod/organization-icon.svg`,
+    compliance_icon: `${BASE_URL}/logo/prod/compliance-icon.svg`,
+    assessment_icon: `${BASE_URL}/logo/prod/assessment-icon.svg`,
+    risk_icon: `${BASE_URL}/logo/prod/risk-icon.svg`,
+    assurance_icon: `${BASE_URL}/logo/prod/assurance-icon.svg`,
+    audit_icon: `${BASE_URL}/logo/prod/audit-icon.svg`,
+    issue_icon: `${BASE_URL}/logo/prod/issue-icon.svg`,
+    policy_icon: `${BASE_URL}/logo/prod/policy-icon.svg`,
+    downloadCenter_icon: `${BASE_URL}/logo/prod/download-center-icon.svg`,
+    settings_icon: `${BASE_URL}/logo/prod/settings-icon.svg`,
+    selected_dashboard_icon: `${BASE_URL}/logo/prod/selected-dashboard-icon.svg`,
+    selected_to_do_responsibility_icon: `${BASE_URL}/logo/prod/selected-toDo-responsibility-icon.svg`,
+    selected_organization_icon: `${BASE_URL}/logo/prod/selected-organization-icon.svg`,
+    selected_compliance_icon: `${BASE_URL}/logo/prod/selected-compliance-icon.svg`,
+    selected_assessment_icon: `${BASE_URL}/logo/prod/selected-assessment-icon.svg`,
+    selected_risk_icon: `${BASE_URL}/logo/prod/selected-risk-icon.svg`,
+    selected_assurance_icon: `${BASE_URL}/logo/prod/selected-assurance-icon.svg`,
+    selected_audit_icon: `${BASE_URL}/logo/prod/selected-audit-icon.svg`,
+    selected_issue_icon: `${BASE_URL}/logo/prod/selected-issue-icon.svg`,
+    selected_policy_icon: `${BASE_URL}/logo/prod/selected-policy-icon.svg`,
+    selected_download_center_icon: `${BASE_URL}/logo/prod/selected-download-center-icon.svg`,
+    selected_settings_icon: `${BASE_URL}/logo/prod/selected-settings-icon.svg`,
+    support_icon: `${BASE_URL}/libraries/support/support-icon.svg`,
+};
+
+const PRODUCT_LIST = [
+    {
+        name: 'Toggle Submenu',
+        icon: ASSETS.hamburger_icon,
+        code: 'TOGGLE',
+        class: '',
+        isActive: false,
+        linkClass: 'vc-hamburger',
+    },
+    {
+        name: 'Dashboard',
+        icon: ASSETS.dashboard_icon,
+        code: 'DASHBOARD',
+        class: 'dashboard-list',
+        isActive: true,
+        linkClass: '',
+    },
+    {
+        name: 'To-Do Responsibilities',
+        icon: ASSETS.toDoResponsibility_icon,
+        code: 'TO_DO_RESPONSIBILITIES',
+        class: 'toDoResponsibility-list',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'Organization',
+        icon: ASSETS.organization_icon,
+        code: 'ORGANIZATION',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'ComplianceOps',
+        icon: ASSETS.compliance_icon,
+        code: 'COMPLIANCE_OPS',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'Assessments',
+        icon: ASSETS.assessment_icon,
+        code: 'ASSESSMENTS',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'RiskOps',
+        icon: ASSETS.risk_icon,
+        code: 'RISK_OPS',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'Assurance',
+        icon: ASSETS.assurance_icon,
+        code: 'ASSURANCE',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'AuditOps',
+        icon: ASSETS.audit_icon,
+        code: 'AUDIT_OPS',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'IssueOps',
+        icon: ASSETS.issue_icon,
+        code: 'ISSUE_OPS',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+    {
+        name: 'PolicyOps',
+        icon: ASSETS.policy_icon,
+        code: 'POLICY_OPS',
+        class: '',
+        isActive: false,
+        linkClass: '',
+    },
+];
+
+const IN_APP_URL = {
+    MANAGE_RESPONSIBILITY: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["manage_responsibilities"],"subType":["CC"]},"byStatus":{"type":["active"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
+    MY_RESPONSIBILITY: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["my_responsibilities"],"subType":["CC"]},"byStatus":{"type":["active"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
+    QUEUE: '/compliance/#/compliance/manage-responsibility?q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}',
+    PROGRAM: '/program/manage-program-categories/programs-overview',
+    DASHBOARD: '/global-dashboard/',
+    TO_DO_RESPONSIBILITIES: 'to-do-responsibilities',
+    ORGANIZATION: '/organization/',
+    SETTINGS: '/settings',
+    ASSESSMENTS: '/assessment/',
+    RISK_OPS: '/global-dashboard/risk_dashboard?module=risk',
+    ASSURANCE: '/assurance/test_dashboard',
+    AUDIT_OPS: '/global-dashboard/audit_dashboard?module=audit',
+    ISSUE_OPS: '/global-dashboard/issue_dashboard?module=issue',
+    POLICY_OPS: '/all/policy/manage-policies',
+    EDIT_PROFILE: 'settings/settings/profile?edit_profile=true',
+};
+
+class ProductListService {
+    constructor(rbacService) {
+        this.rbacService = rbacService;
+    }
+    /**
+     * Filters the subscribed products based on the subscription flags.
+     *
+     * @param productList - The list of products.
+     * @param subscriptionList - The subscription flags.
+     * @returns The filtered list of subscribed products.
+     */
+    subscribedProduct(productList, subscriptionList) {
+        const flags = {
+            RISK: subscriptionList.risk_flag,
+            ASSURANCE: subscriptionList.assurance_flag,
+            ISSUE: subscriptionList.issue_flag,
+            AUDIT: subscriptionList.audit_flag,
+            POLICY: subscriptionList.policy_flag,
+            ASSESSMENT: subscriptionList.assessment_flag,
+        };
+        const code = Object.keys(flags).filter((key) => flags[key] === 0);
+        return productList.filter((product) => !code.includes(product.code));
+    }
+    /**
+     * Sets the product click callback based on the product details and feature flag.
+     *
+     * @param productDetails - The details of the product.
+     * @param featureFlag - The feature flag.
+     * @returns The URL for the product click callback.
+     */
+    setProductClickCallback(productDetails, featureFlag) {
+        let url = '';
+        switch (productDetails.code) {
+            case 'COMPLIANCE_OPS':
+                return this.setComplianceURL(featureFlag);
+            case 'ORGANIZATION':
+            case 'DASHBOARD':
+            case 'ASSESSMENTS':
+            case 'RISK_OPS':
+            case 'ASSURANCE':
+            case 'AUDIT_OPS':
+            case 'ISSUE_OPS':
+            case 'POLICY_OPS':
+                return IN_APP_URL[productDetails.code];
+            default:
+                return 'javascript:void(0);';
+        }
+    }
+    /**
+     * Sets the compliance URL based on the feature flag and RBAC permissions.
+     *
+     * @param featureFlag - The feature flag.
+     * @returns The URL for the compliance page.
+     */
+    setComplianceURL(featureFlag) {
+        const permissions = this.rbacService.getRBACPermissions('compliance');
+        const isManageResDefault = featureFlag?.isFeatureEnabled('ff_compliance_redirection');
+        if (isManageResDefault) {
+            return permissions.includes('CRMR')
+                ? IN_APP_URL.MANAGE_RESPONSIBILITY
+                : IN_APP_URL.MY_RESPONSIBILITY;
+        }
+        else {
+            return permissions.includes('CPMP')
+                ? IN_APP_URL.PROGRAM
+                : IN_APP_URL.MY_RESPONSIBILITY;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListService, deps: [{ token: RbacService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: RbacService }]; } });
+
+class ToolTipDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.showTooltip = true;
+        this.offset = 8;
+    }
+    ngOnInit() { }
+    onMouseEnter() {
+        this.hide();
+        this.show();
+    }
+    onMouseOver() {
+        this.hide();
+        this.show();
+    }
+    onMouseLeave() {
+        this.hide();
+    }
+    onMouseOut() {
+        this.hide();
+    }
+    onClick() {
+        this.hide();
+    }
+    show() {
+        if (!this.showTooltip) {
+            return;
+        }
+        this.create();
+        const element = this.el.nativeElement;
+        if (this.tooltipMandatory === true) {
+            this.setPosition();
+            this.renderer.addClass(this.tooltip, 'fl-tooltip-show');
+        }
+        else {
+            if (element.scrollWidth * element.scrollHeight >
+                element.offsetWidth * element.offsetHeight) {
+                this.setPosition();
+                this.renderer.addClass(this.tooltip, 'fl-tooltip-show');
+            }
+        }
+    }
+    hide() {
+        if (document.body.contains(this.tooltip)) {
+            if (this.renderer) {
+                this.renderer.removeChild(document.body, document.getElementById('tooltip'));
+            }
+        }
+    }
+    create() {
+        this.tooltip = this.renderer.createElement('span');
+        this.tooltip.setAttribute('id', 'tooltip');
+        this.tooltip.innerHTML = this.tooltipTitle;
+        this.renderer.appendChild(document.body, this.tooltip);
+        this.renderer.addClass(this.tooltip, 'fl-tooltip');
+        this.renderer.addClass(this.tooltip, `fl-tooltip-${this.placement}`);
+        this.renderer.addClass(this.tooltip, `${this.type}`);
+        if (this.animate) {
+            this.renderer.addClass(this.tooltip, `animate-${this.placement}`);
+        }
+    }
+    setPosition() {
+        const hostPos = this.el.nativeElement.getBoundingClientRect();
+        const tooltipPos = this.tooltip.getBoundingClientRect();
+        const scrollPos = window.pageYOffset ||
+            document.documentElement.scrollTop ||
+            document.body.scrollTop ||
+            0;
+        const w = window.innerWidth;
+        const h = window.innerHeight;
+        let top;
+        let left;
+        if (this.placement === 'top') {
+            top = hostPos.top - tooltipPos.height - this.offset;
+            left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+        }
+        if (this.placement === 'bottom') {
+            if (hostPos.top + tooltipPos.height > h) {
+                top = hostPos.top - tooltipPos.height;
+                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                this.renderer.removeClass(this.tooltip, `fl-tooltip-bottom`);
+                this.renderer.addClass(this.tooltip, `fl-tooltip-top`);
+            }
+            else {
+                top = hostPos.bottom + this.offset;
+                left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+            }
+        }
+        if (this.placement === 'left') {
+            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+            left = hostPos.left - tooltipPos.width - this.offset;
+        }
+        if (this.placement === 'right') {
+            top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+            left = hostPos.right + this.offset;
+        }
+        if (this.placement === 'bottom-right') {
+            top = hostPos.bottom + this.offset;
+            left = hostPos.left - (tooltipPos.width - 28);
+        }
+        if (this.placement === 'bottom-left') {
+            if (hostPos.top + tooltipPos.height > h - 30) {
+                top = hostPos.top - tooltipPos.height;
+                left = hostPos.left;
+                this.renderer.removeClass(this.tooltip, `fl-tooltip-bottom-left`);
+                this.renderer.addClass(this.tooltip, `fl-tooltip-top-left`);
+            }
+            else {
+                top = hostPos.bottom + this.offset;
+                left = hostPos.left;
+            }
+        }
+        this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+        this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolTipDirective, selector: "[arTooltip]", inputs: { tooltipTitle: ["arTooltip", "tooltipTitle"], placement: "placement", type: "type", tooltipMandatory: "tooltipMandatory", showTooltip: "showTooltip", animate: "animate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "mouseout": "onMouseOut()", "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[arTooltip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipTitle: [{
+                type: Input,
+                args: ['arTooltip']
+            }], placement: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], tooltipMandatory: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseOut: [{
+                type: HostListener,
+                args: ['mouseout']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class ModuleListComponent {
+    constructor(layoutService, productListService, apiService) {
+        this.layoutService = layoutService;
+        this.productListService = productListService;
+        this.apiService = apiService;
+        this.onToggleSubmenu = new EventEmitter();
+        this.ASSETS = ASSETS;
+        this.PRODUCT_LIST = PRODUCT_LIST;
+        this.checkModuleSubscription();
+        this.apiService.getSubscriptionList();
+        this.getUserDetails();
+    }
+    ngOnInit() { }
+    /**
+     * Handles the toggle event of the submenu for each product.
+     *
+     * @param eachProduct - The product object for which the submenu is being toggled.
+     * @returns Returns false to prevent the default behavior.
+     */
+    onSubMenuToggle(eachProduct) {
+        if (eachProduct?.code === 'TOGGLE') {
+            this.onToggleSubmenu.emit();
+        }
+        return false;
+    }
+    /**
+     * Checks the module subscription and updates the product list accordingly.
+     * Subscribes to the `subscriptionDetail$` observable from the `apiService` and updates the `PRODUCT_LIST` property of the component based on the received data.
+     *
+     * @remarks
+     * This method is typically called when the component is initialized or when the subscription details change.
+     */
+    checkModuleSubscription() {
+        this.apiService.subscriptionDetail$.subscribe((data) => {
+            if (data) {
+                this.PRODUCT_LIST = this.productListService.subscribedProduct(PRODUCT_LIST, data);
+            }
+        });
+    }
+    /**
+     * Sets the product list by mapping each product in the PRODUCT_LIST array.
+     * Each product's callback is set to the onSubMenuToggle method bound to the current instance.
+     * The product's URL is set using the setProductClickCallback method of the productListService,
+     * passing the product and the featureFlag as arguments. If the returned URL is null or undefined,
+     * an empty string is assigned to the product's URL property.
+     */
+    setProductList() {
+        this.PRODUCT_LIST = PRODUCT_LIST.map((product) => {
+            product.callback = this.onSubMenuToggle.bind(this);
+            product.url =
+                this.productListService.setProductClickCallback(product, this.featureFlag) ?? '';
+            return product;
+        });
+    }
+    getUserDetails() {
+        this.apiService.loggedUserDetail$.subscribe((data) => {
+            if (data) {
+                this.setProductList();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModuleListComponent, deps: [{ token: LayoutService }, { token: ProductListService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModuleListComponent, selector: "vc-module-list", inputs: { featureFlag: "featureFlag" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, ngImport: i0, template: `
+    <div class="module-list">
+      <ul class="vx-p-0 vx-m-0">
+        <li
+          *ngFor="let eachProduct of PRODUCT_LIST"
+          [ngClass]="eachProduct.class"
+          [class.active]="eachProduct.isActive"
+        >
+          <a
+            [href]="eachProduct.url"
+            class="vx-d-flex vx-align-center vx-justify-center"
+            [ngClass]="eachProduct?.linkClass"
+            [arTooltip]="eachProduct.name"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            (click)="eachProduct?.callback(eachProduct)"
+            ><img [src]="eachProduct.icon" alt="" width="16" height="16"
+          /></a>
+        </li>
+      </ul>
+    </div>
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.module-list ul li{position:relative;z-index:1}.module-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.module-list ul li.dashboard-list:after{background:#343952;border-radius:.25rem .25rem 0 0;content:\"\";position:absolute;top:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li.toDoResponsibility-list:after{background:#343952;border-radius:0 0 .25rem .25rem;content:\"\";position:absolute;bottom:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li a{height:3rem}.module-list ul li a.vc-hamburger{height:2rem}.module-list ul li a img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModuleListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-module-list', template: `
+    <div class="module-list">
+      <ul class="vx-p-0 vx-m-0">
+        <li
+          *ngFor="let eachProduct of PRODUCT_LIST"
+          [ngClass]="eachProduct.class"
+          [class.active]="eachProduct.isActive"
+        >
+          <a
+            [href]="eachProduct.url"
+            class="vx-d-flex vx-align-center vx-justify-center"
+            [ngClass]="eachProduct?.linkClass"
+            [arTooltip]="eachProduct.name"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            (click)="eachProduct?.callback(eachProduct)"
+            ><img [src]="eachProduct.icon" alt="" width="16" height="16"
+          /></a>
+        </li>
+      </ul>
+    </div>
+  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.module-list ul li{position:relative;z-index:1}.module-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.module-list ul li.dashboard-list:after{background:#343952;border-radius:.25rem .25rem 0 0;content:\"\";position:absolute;top:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li.toDoResponsibility-list:after{background:#343952;border-radius:0 0 .25rem .25rem;content:\"\";position:absolute;bottom:.375rem;left:.375rem;width:2.25rem;height:2.625rem;z-index:-2}.module-list ul li a{height:3rem}.module-list ul li a.vc-hamburger{height:2rem}.module-list ul li a img{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: LayoutService }, { type: ProductListService }, { type: ApiService }]; }, propDecorators: { featureFlag: [{
+                type: Input
+            }], onToggleSubmenu: [{
+                type: Output
+            }] } });
+
+class PreferenceListComponent {
+    constructor() {
+        this.ASSETS = ASSETS;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreferenceListComponent, selector: "vc-preference-list", ngImport: i0, template: `
+    <div class="preference-list">
+      <ul class="vx-p-0 vx-m-0">
+        <li>
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center"
+            [arTooltip]="'Download Center'"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            ><img
+              [src]="ASSETS.downloadCenterIcon"
+              alt=""
+              width="16"
+              height="16"
+          /></a>
+        </li>
+        <li>
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center"
+            [arTooltip]="'Settings'"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            ><img [src]="ASSETS.settingsIcon" alt="" width="16" height="16"
+          /></a>
+        </li>
+      </ul>
+    </div>
+  `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.preference-list{width:3rem;position:absolute;bottom:0;left:0}.preference-list ul li{position:relative;z-index:1}.preference-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.preference-list ul li a{height:3rem}.preference-list ul li a img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreferenceListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-preference-list', template: `
+    <div class="preference-list">
+      <ul class="vx-p-0 vx-m-0">
+        <li>
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center"
+            [arTooltip]="'Download Center'"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            ><img
+              [src]="ASSETS.downloadCenterIcon"
+              alt=""
+              width="16"
+              height="16"
+          /></a>
+        </li>
+        <li>
+          <a
+            class="vx-d-flex vx-align-center vx-justify-center"
+            [arTooltip]="'Settings'"
+            placement="right"
+            type="black"
+            delay="0"
+            [tooltipMandatory]="true"
+            [animate]="true"
+            ><img [src]="ASSETS.settingsIcon" alt="" width="16" height="16"
+          /></a>
+        </li>
+      </ul>
+    </div>
+  `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.preference-list{width:3rem;position:absolute;bottom:0;left:0}.preference-list ul li{position:relative;z-index:1}.preference-list ul li.active:before{background:#4681ef;border-radius:.25rem;content:\"\";position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;z-index:-1}.preference-list ul li a{height:3rem}.preference-list ul li a img{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class ProductListContainerComponent {
+    constructor() {
+        this.onToggleSubmenu = new EventEmitter();
+    }
+    ngOnInit() { }
+    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" }, outputs: { onToggleSubmenu: "onToggleSubmenu" }, ngImport: i0, template: `<div class="product-list-container">
+    <vc-module-list
+      [featureFlag]="featureFlag"
+      (onToggleSubmenu)="onToggleSubmenu.emit()"
+    ></vc-module-list>
+    <vc-preference-list></vc-preference-list>
+  </div> `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.product-list-container{background:#161b2f;width:3rem;height:100%;position:relative;z-index:1}\n"], dependencies: [{ kind: "component", type: ModuleListComponent, selector: "vc-module-list", inputs: ["featureFlag"], outputs: ["onToggleSubmenu"] }, { kind: "component", type: PreferenceListComponent, selector: "vc-preference-list" }] }); }
+}
+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"
+      (onToggleSubmenu)="onToggleSubmenu.emit()"
+    ></vc-module-list>
+    <vc-preference-list></vc-preference-list>
+  </div> `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.product-list-container{background:#161b2f;width:3rem;height:100%;position:relative;z-index:1}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { featureFlag: [{
+                type: Input
+            }], onToggleSubmenu: [{
+                type: Output
+            }] } });
+
+class GlobalAlertComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GlobalAlertComponent, selector: "vc-global-alert", ngImport: i0, template: "<div\r\n  class=\"global-alert vx-d-flex vx-align-center vx-justify-center\"\r\n  [class.expired]=\"true\"\r\n>\r\n  <i class=\"icons vx-fs-12 vx-mr-2\">&#xe930;</i>\r\n  <!-- <span class=\"vx-fs-13\"\r\n    >Email notifications have been paused by the Key Admin. You will not be able\r\n    to edit your email notifications until the Key Admin turns it back on.</span\r\n  > -->\r\n  <span class=\"vx-fs-13\"\r\n    >SUBSCRIPTION EXPIRED: YOU WILL NOT BE ABLE TO LOGIN TO YOUR ACCOUNT AFTER\r\n    30 DAYS.\r\n    <a href=\"https://www.v-comply.com/contact-us\" target=\"_blank\"\r\n      >CONTACT US</a\r\n    ></span\r\n  >\r\n  <div class=\"global-alert-action vx-d-flex vx-align-center vx-lh-6\">\r\n    <button\r\n      class=\"vx-fs-12 vx-p-0 vx-m-0 vx-mr-4 vx-d-flex vx-align-center disabled\"\r\n    >\r\n      <i class=\"icons\">&#xe96b;</i>\r\n    </button>\r\n    <span class=\"vx-fs-13 vx-txt-white\">1</span>\r\n    <span class=\"divider vx-fs-11 vx-txt-white\">/</span>\r\n    <span class=\"vx-fs-13 vx-fw-600 vx-txt-white\">2</span>\r\n    <button class=\"vx-fs-12 vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\">\r\n      <i class=\"icons\">&#xe970;</i>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.global-alert{background:#343952;height:2.25rem;color:#f7d873}.global-alert.expired{color:#e38b7a}.global-alert.expired a{color:#fac3b7;margin-left:.5rem}.global-alert a{color:#f7d873}.global-alert-action{position:absolute;right:.75rem;top:.375rem}.global-alert-action span{letter-spacing:2px}.global-alert-action button{background:transparent;border-radius:0;border:none;color:#fff}.global-alert-action button.disabled{pointer-events:none;opacity:.5;color:#fff}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-global-alert', template: "<div\r\n  class=\"global-alert vx-d-flex vx-align-center vx-justify-center\"\r\n  [class.expired]=\"true\"\r\n>\r\n  <i class=\"icons vx-fs-12 vx-mr-2\">&#xe930;</i>\r\n  <!-- <span class=\"vx-fs-13\"\r\n    >Email notifications have been paused by the Key Admin. You will not be able\r\n    to edit your email notifications until the Key Admin turns it back on.</span\r\n  > -->\r\n  <span class=\"vx-fs-13\"\r\n    >SUBSCRIPTION EXPIRED: YOU WILL NOT BE ABLE TO LOGIN TO YOUR ACCOUNT AFTER\r\n    30 DAYS.\r\n    <a href=\"https://www.v-comply.com/contact-us\" target=\"_blank\"\r\n      >CONTACT US</a\r\n    ></span\r\n  >\r\n  <div class=\"global-alert-action vx-d-flex vx-align-center vx-lh-6\">\r\n    <button\r\n      class=\"vx-fs-12 vx-p-0 vx-m-0 vx-mr-4 vx-d-flex vx-align-center disabled\"\r\n    >\r\n      <i class=\"icons\">&#xe96b;</i>\r\n    </button>\r\n    <span class=\"vx-fs-13 vx-txt-white\">1</span>\r\n    <span class=\"divider vx-fs-11 vx-txt-white\">/</span>\r\n    <span class=\"vx-fs-13 vx-fw-600 vx-txt-white\">2</span>\r\n    <button class=\"vx-fs-12 vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\">\r\n      <i class=\"icons\">&#xe970;</i>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.global-alert{background:#343952;height:2.25rem;color:#f7d873}.global-alert.expired{color:#e38b7a}.global-alert.expired a{color:#fac3b7;margin-left:.5rem}.global-alert a{color:#f7d873}.global-alert-action{position:absolute;right:.75rem;top:.375rem}.global-alert-action span{letter-spacing:2px}.global-alert-action button{background:transparent;border-radius:0;border:none;color:#fff}.global-alert-action button.disabled{pointer-events:none;opacity:.5;color:#fff}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+dayjs.extend(customParseFormat);
+class BusinessCycleService {
+    constructor(authorizer) {
+        this.authorizer = authorizer;
+        this.businessCycleList$ = new BehaviorSubject({});
+        this.orgDetails$ = new BehaviorSubject({});
+        this.selectedBusinessCycle$ = new BehaviorSubject({});
+        this.changeBusinessCycle$ = new BehaviorSubject(false);
+        this.isBusinessCycleAvailable();
+    }
+    /**
+     * #### Description
+     * it will check the business cycle stored in local is same business cycle as the user login
+     * Determines whether correct business cycle is
+     * @returns true if correct business cycle
+     */
+    isCorrectBusinessCycle(cycle) {
+        const localStorageData = localStorage.getItem('businessCycle') ?? '';
+        if (!localStorageData) {
+            return false;
+        }
+        if (JSON.parse(localStorageData).userId === this.authorizer.getUserId()) {
+            for (let i = 0; i < cycle.length; i++) {
+                if (cycle[i].start_date ==
+                    JSON.parse(localStorageData)?.selectedCycle?.start_date) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        else {
+            return false;
+        }
+    }
+    /**
+     * #### Description
+     * set business cycle in local storage if local storage don't have business cycle.
+     * Sets business cycle
+     * @param businessCycleList  list of all the cycle of the organization
+     */
+    setBusinessCycle(businessCycleList) {
+        let cycle = {};
+        businessCycleList?.forEach((el) => {
+            if (el.selected) {
+                cycle = el;
+            }
+        });
+        cycle['selected_cycle_arr'] = this.setSelectedCycleArray(cycle);
+        let businessCycleObject = {
+            userId: this.authorizer.getUserId(),
+            selectedCycle: {
+                start_date: cycle?.start_date,
+                end_date: cycle.end_date,
+                selected: true,
+                business_cycle: cycle?.business_cycle,
+                selected_cycle: cycle?.start_date + '-' + cycle?.end_date,
+                selected_cycle_arr: cycle?.selected_cycle_arr,
+            },
+        };
+        localStorage.setItem('businessCycle', JSON.stringify(businessCycleObject));
+        this.isBusinessCycleAvailable();
+    }
+    setSelectedCycleArray(cycle) {
+        let cycleArray = cycle.start_date + '-' + cycle.end_date;
+        return [cycleArray];
+    }
+    /**
+     * #### Description
+     * if business cycle is found in local the it will set in this selectedBusinessCycle$ variable.
+     * it is subject variable so we can use it in different component
+     */
+    isBusinessCycleAvailable() {
+        const localStorageData = localStorage.getItem('businessCycle') ?? '';
+        const businessCycleYear = JSON.parse(localStorageData)?.selectedCycle;
+        if (businessCycleYear?.selected_cycle_arr?.length === 1) {
+            this.selectedBusinessCycle$.next(businessCycleYear);
+        }
+        else if (businessCycleYear &&
+            businessCycleYear?.selected_cycle_arr?.length > 1) {
+            businessCycleYear['business_cycle'] = [];
+            businessCycleYear?.selected_cycle_arr.forEach((date) => {
+                businessCycleYear['business_cycle'].push(this.convertNumericAlpha(date));
+            });
+            this.selectedBusinessCycle$.next(businessCycleYear);
+        }
+    }
+    /**
+     * #### Description
+     *
+     * it will convert date from dd-mm-yyyy to dd mmm yyyy formate
+     * Converts date
+     * @param date
+     * @returns  date in this formate DD MMM YYYY
+     */
+    convertDate(date) {
+        return dayjs(date, 'DD-MM-YYYY').format('DD MMM YYYY');
+    }
+    /**
+     * #### Description
+     *
+     * Converts numeric alpha
+     * @param str = "01-05-2021-30-04-2022"
+     * @returns  =  "01 May 2021 - 30 Apr 2022"
+     */
+    convertNumericAlpha(str) {
+        return (this.convertDate(str.substring(0, 10)) +
+            ' - ' +
+            this.convertDate(str.substring(str.length - 10, str.lenth)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleService, deps: [{ token: i1$1.AuthorizerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.AuthorizerService }]; } });
+
+class PopoverService {
+    constructor() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class PopoverComponent {
+    constructor(popoverService) {
+        this.popoverService = popoverService;
+        this.popoverContainer = false;
+        this.closedOnOverlay = new EventEmitter();
+        this.showPopover = false;
+    }
+    ngOnInit() { }
+    popover() {
+        this.popoverContainer = false;
+        this.popoverContainer = true;
+        setTimeout(() => {
+            this.getPosition();
+            this.showPopover = true;
+        }, 10);
+        return false;
+    }
+    popoverEvent() {
+        this.popoverContainer = false;
+        this.popoverContainer = true;
+        setTimeout(() => {
+            // this.getPosition();
+            this.positionX = this.popoverService.positionX;
+            this.positionY = this.popoverService.positionY;
+            this.showPopover = true;
+        }, 10);
+        return false;
+    }
+    closePopover(top) {
+        if (!this.dontCloseonClick || top === 'top') {
+            this.popoverContainer = false;
+            this.showPopover = false;
+        }
+    }
+    close() {
+        this.popoverContainer = false;
+        this.showPopover = false;
+    }
+    clickedPopover() {
+        this.getPosition();
+    }
+    getPosition() {
+        // setTimeout(() => {
+        const elementPositionn = this.popoverService.elementPosition;
+        this.popoverHeight = this.popoverRatio.nativeElement.offsetHeight;
+        this.popoverWidth = this.popoverRatio.nativeElement.offsetWidth;
+        if (this.popoverService.elementDirection === 'left') {
+            this.leftValue = elementPositionn.left;
+            if (elementPositionn.top + elementPositionn.height + this.popoverHeight >
+                window.outerHeight - 200) {
+                this.topValue = elementPositionn.top - this.popoverHeight;
+            }
+            else {
+                this.topValue = elementPositionn.top + elementPositionn.height;
+            }
+        }
+        if (this.popoverService.elementDirection === 'right') {
+            this.leftValue =
+                elementPositionn.left + elementPositionn.width - this.popoverWidth;
+            if (elementPositionn.top + elementPositionn.height + this.popoverHeight >
+                window.outerHeight - 200) {
+                this.topValue = elementPositionn.top - this.popoverHeight;
+            }
+            else {
+                this.topValue = elementPositionn.top + elementPositionn.height;
+            }
+        }
+        if (this.popoverService.elementDirection === 'top') {
+            this.leftValue = elementPositionn.left + elementPositionn.width;
+            if (elementPositionn.top + elementPositionn.height + this.popoverHeight >
+                window.outerHeight - 200) {
+                this.topValue = elementPositionn.top - this.popoverHeight;
+            }
+            else {
+                this.topValue = elementPositionn.top - this.popoverHeight;
+            }
+        }
+        if (this.popoverService.elementDirection === 'bottom') {
+            this.leftValue = elementPositionn.left + elementPositionn.width;
+            if (elementPositionn.top + elementPositionn.height + this.popoverHeight >
+                window.outerHeight - 200) {
+                this.topValue = elementPositionn.top - this.popoverHeight;
+            }
+            else {
+                this.topValue = elementPositionn.top + elementPositionn.height;
+            }
+        }
+        if (this.popoverService.elementDirection === 'self-position') {
+            this.leftValue =
+                elementPositionn.left +
+                    elementPositionn.width / 2 -
+                    this.popoverWidth / 2;
+            this.topValue = elementPositionn.top - 15;
+        }
+        if (this.popoverService.elementDirection === 'top-center') {
+            this.leftValue =
+                elementPositionn.left +
+                    elementPositionn.width / 2 -
+                    this.popoverWidth / 2;
+            // this.topValue = elementPositionn.top - this.popoverHeight;
+            if (elementPositionn.top + elementPositionn.height + this.popoverHeight >
+                window.outerHeight) {
+                this.topValue = elementPositionn.top + elementPositionn.height;
+            }
+            else {
+                this.topValue = elementPositionn.top - this.popoverHeight;
+            }
+        }
+        if (this.popoverService.elementDirection === 'center') {
+            this.leftValue =
+                elementPositionn.left +
+                    elementPositionn.width / 2 -
+                    this.popoverWidth / 2;
+            this.topValue = elementPositionn.top + elementPositionn.height;
+        }
+        this.positionX = this.leftValue;
+        this.positionY = this.topValue;
+        // }, 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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { dontCloseonClick: [{
+                type: Input
+            }], popoverRatio: [{
+                type: ViewChild,
+                args: ['popoverRatio']
+            }], popoverContent: [{
+                type: ViewChild,
+                args: ['popoverContent']
+            }], closedOnOverlay: [{
+                type: Output
+            }] } });
+
+class PopoverDirective {
+    constructor(elRef, popoverService) {
+        this.elRef = elRef;
+        this.popoverService = popoverService;
+    }
+    click() {
+        this.popoverService.elementPosition = this.elRef.nativeElement.getBoundingClientRect();
+        this.popoverService.elementDirection = this.position;
+        // this.getPosition();
+    }
+    getPosition() {
+        setTimeout(() => {
+            // this.popoverService.elementPosition = this.elRef.nativeElement.getBoundingClientRect();
+            const elementPositionn = this.elRef.nativeElement.getBoundingClientRect();
+            if (this.position === 'left') {
+                this.leftValue = elementPositionn.left;
+                if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
+                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
+                }
+                else {
+                    this.topValue = elementPositionn.top + elementPositionn.height;
+                }
+            }
+            if (this.position === 'right') {
+                this.leftValue = elementPositionn.left + elementPositionn.width - this.popoverService.popoverWidth;
+                if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
+                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
+                }
+                else {
+                    this.topValue = elementPositionn.top + elementPositionn.height;
+                }
+            }
+            if (this.position === 'top') {
+                this.leftValue = elementPositionn.left + elementPositionn.width;
+                if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
+                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
+                }
+                else {
+                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
+                }
+            }
+            if (this.position === 'bottom') {
+                this.leftValue = elementPositionn.left + elementPositionn.width;
+                if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
+                    this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
+                }
+                else {
+                    this.topValue = elementPositionn.top + elementPositionn.height;
+                }
+            }
+            if (this.position === 'self-position') {
+                this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
+                this.topValue = elementPositionn.top - 15;
+            }
+            if (this.position === 'top-center') {
+                this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
+                this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
+            }
+            this.popoverService.positionX = this.leftValue;
+            this.popoverService.positionY = this.topValue;
+        }, 10);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverDirective, deps: [{ token: i0.ElementRef }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverDirective, selector: "[appPopover]", inputs: { refrence: "refrence", position: "position" }, host: { listeners: { "click": "click()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appPopover]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PopoverService }]; }, propDecorators: { refrence: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class CsCheckboxComponent {
+    constructor() {
+        this.disabled = false;
+        this.ngValueChange = new EventEmitter();
+    }
+    ngOnInit() { }
+    valueChanged() {
+        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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input
+            }], ngValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], ngValueChange: [{
+                type: Output
+            }] } });
+
+class DateFormatPipe {
+    transform(value) {
+        // Split the input date string
+        const [day, month, year] = value.split('-');
+        // Convert month number to month name
+        const monthNames = [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+        ];
+        const monthName = monthNames[parseInt(month, 10) - 1];
+        // Return the formatted date
+        return `${day} ${monthName} ${year}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DateFormatPipe, name: "dateFormat" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateFormat',
+                }]
+        }] });
+
+class BusinessCycleComponent {
+    constructor(authService, businessCycleService, apiService) {
+        this.authService = authService;
+        this.businessCycleService = businessCycleService;
+        this.apiService = apiService;
+        this.cycleToShow = 'Business Cycle';
+        this.businessCycleArr = [];
+        this.hiddenCycle = [];
+        this.tempBusinessCycleArr = [];
+        this.tempHiddenCycle = [0];
+        this.businessCyclesList = [];
+        this.tempSelectedCycle = [];
+        this.userId = '';
+        this.businessCycleChange = new EventEmitter();
+        this.userId = this.authService.getMemberId() ?? '';
+        this.businessCycleService.isBusinessCycleAvailable();
+        this.setSelectedBusinessCycle();
+        this.getOrgDetails();
+    }
+    ngOnInit() { }
+    getOrgDetails() {
+        this.apiService.organizationDetail$.subscribe((res) => {
+            console.log('org Details', res);
+            if (res) {
+                this.setBusinessCycleKey(res.business_cycles_arr);
+                this.setBusinessCycle();
+            }
+        });
+    }
+    setSelectedBusinessCycle() {
+        this.businessCycleService.selectedBusinessCycle$.subscribe((res) => {
+            if (res) {
+                console.log('res ==>', res);
+                this.selectedBusinessCycle = res;
+                this.setTempSelectedCycle(res);
+            }
+        });
+    }
+    /**
+     * #### Description
+     * it will set a new key in every cycle
+     * key will use for disabled or enable the cycle from business cycle list.
+     * @param businessCycle this the business cycle list
+     */
+    setBusinessCycleKey(businessCycle) {
+        this.businessCycleList = businessCycle;
+        if (this.businessCycleList.length)
+            this.businessCycleList.map((cycle) => {
+                cycle['isDisabled'] = false;
+            });
+    }
+    /**
+     * #### Description
+     * it will check the cycle if it is not checked.
+     * if it has checked then it will uncheck that cycle.
+     * @param cycle checked or unchecked cycle from business cycle list.
+     * @param index it give the index value of business cycle list which is selected.
+     */
+    selectCycle(cycle, index) {
+        const isExist = this.tempSelectedCycle.findIndex((el) => el.start_date == cycle.start_date);
+        if (isExist >= 0) {
+            this.tempSelectedCycle.splice(isExist, 1);
+        }
+        else if (this.tempSelectedCycle?.length === 0) {
+            this.tempSelectedCycle.push(cycle);
+        }
+        else {
+            const selectedIndex = this.businessCycleList.findIndex((el) => el.start_date == this.tempSelectedCycle[0]?.start_date);
+            if (selectedIndex < index) {
+                this.tempSelectedCycle.unshift(cycle);
+            }
+            else {
+                this.tempSelectedCycle.push(cycle);
+            }
+        }
+        this.setCycleEnableDisable();
+    }
+    /**
+     * #### Description
+     *
+     * need to check cycle includes in selected cycle array
+     * Determines whether selected cycle is
+     * @param selectedCycle selected Cycle which user checked or auto selected cycle.
+     * @param cycle all indivisible cycle of business cycle of the organization.
+     * @returns boolean value is cycle exist in selected cycle or not.
+     */
+    isSelectedCycle(selectedCycle, cycle) {
+        let isSelected = false;
+        selectedCycle.forEach((el) => {
+            if (el.start_date == cycle.start_date) {
+                isSelected = true;
+            }
+        });
+        return isSelected;
+    }
+    /**
+     * #### Description
+     *
+     * set selected businessCycle to temp business cycle indivisible if there is two selected cycle
+     * Sets temp selected cycle
+     * @param cycle selected business cycle from local storage
+     */
+    setTempSelectedCycle(cycle) {
+        this.tempSelectedCycle = [];
+        if (cycle?.selected_cycle_arr?.length === 1) {
+            this.tempSelectedCycle.push(cycle);
+            this.setCycleToShow(cycle);
+            // this.cycleToShow = cycle.business_cycle;
+        }
+        else {
+            cycle?.selected_cycle_arr?.forEach((el, i) => {
+                let payload = {
+                    start_date: el.substring(0, 10),
+                    end_date: el.substring(el?.length - 10, el?.lenth),
+                    selected: true,
+                    business_cycle: cycle?.business_cycle[i],
+                    selected_cycle: cycle?.selected_cycle[i],
+                    selected_cycle_arr: [el],
+                };
+                this.tempSelectedCycle.push(payload);
+            });
+            this.setCycleToShow(cycle);
+            // this.cycleToShow = cycle?.business_cycle[0]?.substring(0,11) + " - " + cycle?.business_cycle[1].substring(cycle?.business_cycle[1]?.length-11, cycle?.business_cycle[1]?.lenth);
+        }
+        // this.setCycleToShow(cycle);
+        this.setCycleEnableDisable();
+    }
+    /**
+     * #### Description
+     *  when user select one cycle then their besides cycles are enable and other are disabled.
+     *  if user select two cycles then all the cycles get disabled except selected cycles.
+     *
+     *  In businessCycleList array we set a isDisabled key, we are set it true when need to disabled the cycle.
+     */
+    setCycleEnableDisable() {
+        if (!this.tempSelectedCycle?.length) {
+            if (this.businessCycleList?.length)
+                this.businessCycleList.map((cycle) => {
+                    cycle['isDisabled'] = false;
+                });
+        }
+        else if (this.tempSelectedCycle?.length === 1) {
+            const index = this.businessCycleList?.findIndex((el) => el.start_date == this.tempSelectedCycle[0].start_date);
+            this.businessCycleList?.forEach((cycle, i) => {
+                if (index - 1 === i || index === i || index + 1 === i) {
+                    cycle.isDisabled = false;
+                }
+                else {
+                    cycle.isDisabled = true;
+                }
+            });
+        }
+        else {
+            this.businessCycleList.forEach((cycle) => {
+                let isDisabled = true;
+                this.tempSelectedCycle.forEach((el) => {
+                    if (cycle.start_date == el.start_date) {
+                        isDisabled = false;
+                    }
+                });
+                cycle.isDisabled = isDisabled;
+            });
+        }
+    }
+    /**
+     * #### Description
+     *  When user click apply then selected cycle is set in local storage.
+     *
+     */
+    setBusinessCycle() {
+        let businessCycleObject = {};
+        if (this.tempSelectedCycle?.length === 1) {
+            businessCycleObject = {
+                userId: this.userId,
+                selectedCycle: {
+                    start_date: this.tempSelectedCycle[0]?.start_date,
+                    end_date: this.tempSelectedCycle[0]?.end_date,
+                    selected: true,
+                    business_cycle: this.tempSelectedCycle[0]?.business_cycle,
+                    selected_cycle: this.tempSelectedCycle[0]?.start_date +
+                        '-' +
+                        this.tempSelectedCycle[0]?.end_date,
+                    selected_cycle_arr: [
+                        this.tempSelectedCycle[0]?.start_date +
+                            '-' +
+                            this.tempSelectedCycle[0]?.end_date,
+                    ],
+                },
+            };
+            this.setCycleToShow(businessCycleObject?.selectedCycle);
+            // this.cycleToShow = this.tempSelectedCycle[0]?.business_cycle;
+        }
+        else {
+            let business_cycle = [];
+            let selected_cycle_arr = [];
+            this.tempSelectedCycle?.forEach((el) => {
+                business_cycle.push(el?.business_cycle);
+                selected_cycle_arr.push(el?.start_date + '-' + el?.end_date);
+            });
+            businessCycleObject = {
+                userId: this.userId,
+                selectedCycle: {
+                    start_date: this.tempSelectedCycle[0]?.start_date,
+                    end_date: this.tempSelectedCycle[1]?.end_date,
+                    selected: true,
+                    business_cycle: business_cycle,
+                    selected_cycle: this.tempSelectedCycle[0]?.start_date +
+                        '-' +
+                        this.tempSelectedCycle[1]?.end_date,
+                    selected_cycle_arr: selected_cycle_arr,
+                },
+            };
+            this.setCycleToShow(businessCycleObject?.selectedCycle);
+            // this.cycleToShow = business_cycle[0].substring(0,11) + " - " + business_cycle[1].substring(business_cycle[1]?.length-11, business_cycle[1]?.lenth);
+        }
+        // this.setCycleToShow(businessCycleObject?.selectedCycle);
+        localStorage.setItem('businessCycle', JSON.stringify(businessCycleObject));
+        this.selectedBusinessCycle = businessCycleObject?.selectedCycle;
+        this.businessCycleChange.emit(this.selectedBusinessCycle);
+        this.businessCycleService.changeBusinessCycle$.next(true);
+    }
+    /**
+     * #### Description
+     * when user click cancel then it will close the popover.
+     * remove temp value from term selected array and set the previous selected cycle in it.
+     */
+    cancelBusinessCycle() {
+        this.setTempSelectedCycle(this.selectedBusinessCycle);
+    }
+    /**
+     * #### Description
+     * this will set the string of business cycle which  will display in the header.
+     * @param cycle object which is selected and apply. the same object will store in local storage.
+     */
+    setCycleToShow(cycle) {
+        if (cycle?.selected_cycle_arr?.length === 1) {
+            if (cycle?.business_cycle?.toLowerCase() == 'show future due dates') {
+                this.cycleToShow = 'Future Due Dates';
+            }
+            else {
+                this.cycleToShow = cycle.business_cycle;
+            }
+        }
+        else {
+            if (cycle?.business_cycle?.length > 0 &&
+                cycle?.business_cycle[1]?.toLowerCase() == 'show future due dates') {
+                this.cycleToShow = cycle?.business_cycle[0]?.substring(0, 11);
+            }
+            else if (cycle?.business_cycle?.length) {
+                this.cycleToShow =
+                    cycle?.business_cycle[0]?.substring(0, 11) +
+                        ' - ' +
+                        cycle?.business_cycle[1].substring(cycle?.business_cycle[1]?.length - 11, cycle?.business_cycle[1]?.lenth);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleComponent, deps: [{ token: i1$1.AuthorizerService }, { token: BusinessCycleService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: { orgDetails: "orgDetails" }, outputs: { businessCycleChange: "businessCycleChange" }, ngImport: i0, template: "<div\r\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\r\n  appPopover\r\n  (click)=\"businessCyclePop.popover()\"\r\n  position=\"left\"\r\n>\r\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\r\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\r\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\r\n        cycleToShow === \"Show Future Due Dates\"\r\n          ? \"Future Due Dates\"\r\n          : cycleToShow\r\n      }}</span>\r\n    </div>\r\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\r\n  </div>\r\n</div>\r\n\r\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\r\n  <div class=\"vc-business-cycle-popover-container\">\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n    >\r\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\r\n        You can select upto a max of two consecutive years\r\n      </p>\r\n    </div>\r\n    <div class=\"vc-business-cycle-popover-container-body\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <ng-container\r\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\r\n        >\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() ===\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n            [class.future-cycle]=\"true\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >Show Future Due Dates</app-cs-checkbox\r\n            >\r\n            <i\r\n              class=\"icons info-icon vx-fs-12\"\r\n              [arTooltip]=\"\r\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\r\n              \"\r\n              placement=\"bottom\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </li>\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() !==\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >{{ eachCycle?.start_date | dateFormat }} -\r\n              <ng-container>\r\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\r\n              >\r\n            </app-cs-checkbox>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\r\n    >\r\n      <button\r\n        (click)=\"businessCyclePop.closePopover('top')\"\r\n        class=\"white vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-blue\"\r\n      >\r\n        CANCEL\r\n      </button>\r\n      <button\r\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\r\n        [class.disabled]=\"false\"\r\n        class=\"blue vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-white\"\r\n      >\r\n        APPLY\r\n      </button>\r\n    </div>\r\n  </div>\r\n</vui-popover>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .vc-business-cycle{position:relative;width:12.5rem;height:3rem;cursor:pointer;z-index:1}::ng-deep .vc-business-cycle .heading{color:#e3e3e9}::ng-deep .vc-business-cycle i.calendar{color:#e3e3e9}::ng-deep .vc-business-cycle i.arrow{color:#f1f1f1}::ng-deep .vc-business-cycle-popover-container{width:15.625rem;background:#fff;box-shadow:0 4px 8px #1e5dd326;border:1px solid #e3e3e9;border-radius:.25rem;z-index:4}::ng-deep .vc-business-cycle-popover-container-top{background:#f8f8f8}::ng-deep .vc-business-cycle-popover-container-top p{line-height:.875rem}::ng-deep .vc-business-cycle-popover-container-body{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li{list-style:none;margin:0;position:relative}::ng-deep .vc-business-cycle-popover-container-body ul li:before{background:#f1f1f1;content:\"\";position:absolute;left:.75rem;right:.75rem;bottom:0;height:.0625rem;width:calc(100% - 1.5rem)}::ng-deep .vc-business-cycle-popover-container-body ul li:last-of-type:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle{background:#fadd8a}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.checkbox{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.value i{margin-left:.375rem}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle .info-icon{margin-left:.375rem;cursor:context-menu}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox{display:flex}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#161b2f!important;max-width:100%!important}::ng-deep .vc-business-cycle-popover-container-footer{background:#f8f8f8;border-radius:0 0 .25rem .25rem}::ng-deep .vc-business-cycle-popover-container-footer button{width:calc(50% - .125rem);height:1.5rem;border:1px solid transparent;text-transform:uppercase;border-radius:.125rem;line-height:1.375rem}::ng-deep .vc-business-cycle-popover-container-footer button.white{background:#fff;border-color:#dbdbdb}::ng-deep .vc-business-cycle-popover-container-footer button.blue{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .vc-business-cycle-popover-container-footer button.disabled{background:#dbdbdb;color:#747576;border:none;pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "vui-popover", inputs: ["dontCloseonClick"], outputs: ["closedOnOverlay"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "position"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BusinessCycleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-business-cycle', template: "<div\r\n  class=\"vc-business-cycle vx-pt-2 vx-pb-2\"\r\n  appPopover\r\n  (click)=\"businessCyclePop.popover()\"\r\n  position=\"left\"\r\n>\r\n  <div class=\"heading vx-fs-9 vx-tt-uppercase vx-mb-1 vx-lh-3\">\r\n    SHOWING DATA {{ cycleToShow === \"Show Future Due Dates\" ? \"For\" : \"From\" }}\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center vx-justify-between vx-lh-4\">\r\n    <div class=\"vx-d-flex vx-align-center\">\r\n      <i class=\"icons calendar vx-fs-12 vx-mr-2\">&#xe996;</i>\r\n      <span class=\"vx-fs-11 vx-txt-white vx-d-inline-block\">{{\r\n        cycleToShow === \"Show Future Due Dates\"\r\n          ? \"Future Due Dates\"\r\n          : cycleToShow\r\n      }}</span>\r\n    </div>\r\n    <i class=\"icons arrow vx-fs-10 vx-mr-2\">&#xe9e8;</i>\r\n  </div>\r\n</div>\r\n\r\n<vui-popover #businessCyclePop [dontCloseonClick]=\"true\">\r\n  <div class=\"vc-business-cycle-popover-container\">\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-top vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n    >\r\n      <p class=\"vx-fs-11 vx-fw-400 vx-label-txt vx-p-0 vx-m-0\">\r\n        You can select upto a max of two consecutive years\r\n      </p>\r\n    </div>\r\n    <div class=\"vc-business-cycle-popover-container-body\">\r\n      <ul class=\"vx-p-0 vx-m-0\">\r\n        <ng-container\r\n          *ngFor=\"let eachCycle of businessCycleList; let i = index\"\r\n        >\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() ===\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n            [class.future-cycle]=\"true\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >Show Future Due Dates</app-cs-checkbox\r\n            >\r\n            <i\r\n              class=\"icons info-icon vx-fs-12\"\r\n              [arTooltip]=\"\r\n                'This option lets you view data that lies outside the current business cycle and are due in the future.'\r\n              \"\r\n              placement=\"bottom\"\r\n              type=\"black\"\r\n              delay=\"0\"\r\n              [tooltipMandatory]=\"true\"\r\n              >&#xe91f;</i\r\n            >\r\n          </li>\r\n          <li\r\n            *ngIf=\"\r\n              eachCycle?.business_cycle?.toLowerCase() !==\r\n              'show future due dates'\r\n            \"\r\n            class=\"vx-d-flex vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3\"\r\n          >\r\n            <app-cs-checkbox\r\n              [ngValue]=\"businessCycleArr.includes(eachCycle?.business_cycle)\"\r\n              (ngValueChange)=\"selectCycle(eachCycle, i)\"\r\n              [disabled]=\"eachCycle?.isDisabled\"\r\n              >{{ eachCycle?.start_date | dateFormat }} -\r\n              <ng-container>\r\n                {{ eachCycle?.end_date | dateFormat }}</ng-container\r\n              >\r\n            </app-cs-checkbox>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div\r\n      class=\"vc-business-cycle-popover-container-footer vx-d-flex vx-justify-between vx-p-3\"\r\n    >\r\n      <button\r\n        (click)=\"businessCyclePop.closePopover('top')\"\r\n        class=\"white vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-blue\"\r\n      >\r\n        CANCEL\r\n      </button>\r\n      <button\r\n        (click)=\"setBusinessCycle(); businessCyclePop.closePopover('top')\"\r\n        [class.disabled]=\"false\"\r\n        class=\"blue vx-fs-11 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-tt-uppercase vx-p-0 vx-m-0 vx-txt-white\"\r\n      >\r\n        APPLY\r\n      </button>\r\n    </div>\r\n  </div>\r\n</vui-popover>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";::ng-deep .vc-business-cycle{position:relative;width:12.5rem;height:3rem;cursor:pointer;z-index:1}::ng-deep .vc-business-cycle .heading{color:#e3e3e9}::ng-deep .vc-business-cycle i.calendar{color:#e3e3e9}::ng-deep .vc-business-cycle i.arrow{color:#f1f1f1}::ng-deep .vc-business-cycle-popover-container{width:15.625rem;background:#fff;box-shadow:0 4px 8px #1e5dd326;border:1px solid #e3e3e9;border-radius:.25rem;z-index:4}::ng-deep .vc-business-cycle-popover-container-top{background:#f8f8f8}::ng-deep .vc-business-cycle-popover-container-top p{line-height:.875rem}::ng-deep .vc-business-cycle-popover-container-body{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li{list-style:none;margin:0;position:relative}::ng-deep .vc-business-cycle-popover-container-body ul li:before{background:#f1f1f1;content:\"\";position:absolute;left:.75rem;right:.75rem;bottom:0;height:.0625rem;width:calc(100% - 1.5rem)}::ng-deep .vc-business-cycle-popover-container-body ul li:last-of-type:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle{background:#fadd8a}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle:before{display:none}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.checkbox{background:#fff}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle app-cs-checkbox label.checkbox-item span.value i{margin-left:.375rem}::ng-deep .vc-business-cycle-popover-container-body ul li.future-cycle .info-icon{margin-left:.375rem;cursor:context-menu}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox{display:flex}::ng-deep .vc-business-cycle-popover-container-body ul li app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#161b2f!important;max-width:100%!important}::ng-deep .vc-business-cycle-popover-container-footer{background:#f8f8f8;border-radius:0 0 .25rem .25rem}::ng-deep .vc-business-cycle-popover-container-footer button{width:calc(50% - .125rem);height:1.5rem;border:1px solid transparent;text-transform:uppercase;border-radius:.125rem;line-height:1.375rem}::ng-deep .vc-business-cycle-popover-container-footer button.white{background:#fff;border-color:#dbdbdb}::ng-deep .vc-business-cycle-popover-container-footer button.blue{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .vc-business-cycle-popover-container-footer button.disabled{background:#dbdbdb;color:#747576;border:none;pointer-events:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.AuthorizerService }, { type: BusinessCycleService }, { type: ApiService }]; }, propDecorators: { businessCycleChange: [{
+                type: Output
+            }], orgDetails: [{
+                type: Input
+            }] } });
+
+class SearchComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", ngImport: i0, template: "<div class=\"vc-search\">\r\n  <input type=\"text\" placeholder=\"Search\" />\r\n  <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n  <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n  <div\r\n    class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n    [arTooltip]=\"'Advance Search'\"\r\n    placement=\"bottom\"\r\n    type=\"black\"\r\n    delay=\"0\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:#282e48;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-search', template: "<div class=\"vc-search\">\r\n  <input type=\"text\" placeholder=\"Search\" />\r\n  <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n  <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n  <div\r\n    class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n    [arTooltip]=\"'Advance Search'\"\r\n    placement=\"bottom\"\r\n    type=\"black\"\r\n    delay=\"0\"\r\n    [tooltipMandatory]=\"true\"\r\n  >\r\n    <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:#282e48;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class CreateWorkflowComponent {
+    constructor() {
+        this.openWorkflow = new EventEmitter();
+    }
+    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", outputs: { openWorkflow: "openWorkflow" }, ngImport: i0, template: "<div\r\n  (click)=\"openWorkflow.emit()\"\r\n  class=\"header-create-workflow vx-fs-16 vx-txt-white vx-d-flex vx-align-center vx-justify-center\"\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}\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  (click)=\"openWorkflow.emit()\"\r\n  class=\"header-create-workflow vx-fs-16 vx-txt-white vx-d-flex vx-align-center vx-justify-center\"\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}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { openWorkflow: [{
+                type: Output
+            }] } });
+
+class QueueComponent {
+    constructor(apiService, layoutService) {
+        this.apiService = apiService;
+        this.layoutService = layoutService;
+        this.queueURL = '';
+        this.setQueueURl();
+    }
+    setQueueURl() {
+        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>
+  `, 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>
+  `, 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 }]; } });
+
+class GetFileUrlPipe {
+    constructor(config) {
+        this.environmentValue = config?.envConfig;
+    }
+    transform(value, ...args) {
+        return `${this.environmentValue.s3Url}${this.environmentValue.s3Bucket}/profile_pic/thumb/${value}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetFileUrlPipe, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GetFileUrlPipe, name: "getFileUrl" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetFileUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getFileUrl',
+                }]
+        }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class AvatarComponent {
+    constructor(authService) {
+        this.authService = authService;
+        this.baseUrl = '';
+        this.shortName = '';
+        this.type = 'md';
+        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>
+  `, 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>
+  `, 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
+            }], type: [{
+                type: Input
+            }] } });
+
+class UserDetailsComponent {
+    constructor(layoutService, authService) {
+        this.layoutService = layoutService;
+        this.authService = authService;
+    }
+    editProfile() {
+        const URL = this.layoutService.baseUrl + IN_APP_URL.editProfile;
+        window.open(URL);
+    }
+    logout() {
+        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>\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        Logout\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: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>\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        Logout\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: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: [{
+                type: Input
+            }] } });
+
+class SupportComponent {
+    constructor() {
+        this.ASSETS = ASSETS;
+        this.openSupport = new EventEmitter();
+    }
+    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-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-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
+            }] } });
+
+class CreatePermissionPipe {
+    //TODO in case of light user when policy is stand alone module
+    transform(value, args) {
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreatePermissionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CreatePermissionPipe, name: "checkPermission" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreatePermissionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'checkPermission',
+                }]
+        }] });
+
+class HeaderContainerComponent {
+    constructor(apiService) {
+        this.apiService = apiService;
+        this.ASSETS = ASSETS;
+        this.showBusinessCycle = ['/'];
+        this.currentUrl = '';
+        this.businessCycleChange = new EventEmitter();
+        this.openDialog = new EventEmitter();
+        this.currentUrl = window.location.pathname;
+        console.log('currentUrl', this.currentUrl);
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderContainerComponent, selector: "vc-header-container", outputs: { openDialog: "openDialog" }, ngImport: i0, template: "<vc-global-alert *ngIf=\"false\"></vc-global-alert>\r\n<div\r\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <a\r\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n      [arTooltip]=\"'Go to Dashboard'\"\r\n      placement=\"right\"\r\n      type=\"white\"\r\n      delay=\"0\"\r\n      [tooltipMandatory]=\"true\"\r\n      [animate]=\"true\"\r\n      ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n      (businessCycleChange)=\"businessCycleChange.emit($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search *ngIf=\"false\"></vc-search>\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n    <vc-create-workflow\r\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n    ></vc-create-workflow>\r\n    <vc-queue></vc-queue>\r\n    <vc-user-details\r\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n    ></vc-user-details>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{background:#161b2f;height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: GlobalAlertComponent, selector: "vc-global-alert" }, { kind: "component", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: ["orgDetails"], outputs: ["businessCycleChange"] }, { kind: "component", type: SearchComponent, selector: "vc-search" }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", outputs: ["openWorkflow"] }, { kind: "component", type: QueueComponent, selector: "vc-queue" }, { kind: "component", type: UserDetailsComponent, selector: "vc-user-details", inputs: ["userDetails", "subscriptionDetails"] }, { kind: "component", type: SupportComponent, selector: "vc-support", outputs: ["openSupport"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CreatePermissionPipe, name: "checkPermission" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vc-header-container', template: "<vc-global-alert *ngIf=\"false\"></vc-global-alert>\r\n<div\r\n  class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <a\r\n      class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n      [arTooltip]=\"'Go to Dashboard'\"\r\n      placement=\"right\"\r\n      type=\"white\"\r\n      delay=\"0\"\r\n      [tooltipMandatory]=\"true\"\r\n      [animate]=\"true\"\r\n      ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n    /></a>\r\n    <vc-business-cycle\r\n      *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n      (businessCycleChange)=\"businessCycleChange.emit($event)\"\r\n    ></vc-business-cycle>\r\n  </div>\r\n  <div class=\"search-area\">\r\n    <vc-search *ngIf=\"false\"></vc-search>\r\n  </div>\r\n  <div class=\"vx-d-flex vx-align-center\">\r\n    <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n    <vc-create-workflow\r\n      *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n      (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n    ></vc-create-workflow>\r\n    <vc-queue></vc-queue>\r\n    <vc-user-details\r\n      [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n      [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n    ></vc-user-details>\r\n  </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{background:#161b2f;height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: ApiService }]; }, propDecorators: { openDialog: [{
+                type: Output
+            }] } });
+
+class SubMenuContainerComponent {
+    constructor() {
+        this.subMenuData = [
+            {
+                name: 'Policy',
+                code: 'POLICY',
+                callback: () => { },
+                href: '#',
+                class: 'active',
+            },
+            {
+                name: 'Issue',
+                code: 'ISSUE',
+                callback: () => { },
+                href: '#',
+                class: '',
+            },
+            {
+                name: 'Risk',
+                code: 'RISK',
+                callback: () => { },
+                href: '#',
+                class: '',
+            },
+        ];
+        this.onCloseSubMenu = new EventEmitter();
+    }
+    ngOnInit() { }
+    onSubMenuClose() {
+        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" }, 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-end vx-mb-2"
+      >
+        <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="black"
+          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% - .5rem);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-end vx-mb-2"
+      >
+        <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="black"
+          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% - .5rem);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
+            }], onCloseSubMenu: [{
+                type: Output
+            }] } });
+
+class TooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, declarations: [ToolTipDirective], imports: [CommonModule], exports: [ToolTipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolTipDirective],
+                    imports: [CommonModule],
+                    exports: [ToolTipDirective],
+                }]
+        }] });
+
+class ProductListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, declarations: [ProductListContainerComponent,
+            ModuleListComponent,
+            PreferenceListComponent], imports: [CommonModule, TooltipModule], exports: [ProductListContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, imports: [CommonModule, TooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProductListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ProductListContainerComponent,
+                        ModuleListComponent,
+                        PreferenceListComponent,
+                    ],
+                    imports: [CommonModule, TooltipModule],
+                    exports: [ProductListContainerComponent],
+                }]
+        }] });
+
+class PipesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, declarations: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe], imports: [CommonModule], exports: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe],
+                    imports: [CommonModule],
+                    exports: [GetFileUrlPipe, CreatePermissionPipe, DateFormatPipe],
+                }]
+        }] });
+
+class AvatarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule, PipesModule], exports: [AvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, imports: [CommonModule, PipesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AvatarComponent],
+                    imports: [CommonModule, PipesModule],
+                    exports: [AvatarComponent],
+                }]
+        }] });
+
+class PopoverEventDirective {
+    constructor(popoverService) {
+        this.popoverService = popoverService;
+    }
+    contextmenu(event) {
+        this.getEventPosition(event);
+    }
+    getEventPosition(event) {
+        // const container = event.currentTarget;
+        this.popoverService.positionX = event.clientX;
+        this.popoverService.positionY = event.clientY;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverEventDirective, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverEventDirective, selector: "[appPopoverEvent]", host: { listeners: { "contextmenu": "contextmenu($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverEventDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appPopoverEvent]',
+                }]
+        }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { contextmenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
+class PopoverLongpressDirective {
+    constructor(popoverService) {
+        this.popoverService = popoverService;
+        this.longPressPopover = new EventEmitter();
+    }
+    mousedown(event) {
+        alert('Tong');
+        this.currentTime = Date.now();
+        // 
+        this.timer = setInterval(() => {
+            if (Date.now() - this.currentTime > 1000) {
+                this.longPressPopover.emit();
+                clearInterval(this.timer);
+                this.getEventPosition(event);
+                alert('Ting tong');
+            }
+        }, 10);
+    }
+    mouseup() {
+        clearInterval(this.timer);
+        this.currentTime = undefined;
+        // 
+    }
+    getEventPosition(event) {
+        this.popoverService.positionX = event.clientX;
+        this.popoverService.positionY = event.clientY;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverLongpressDirective, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverLongpressDirective, selector: "[appPopoverLongpress]", outputs: { longPressPopover: "longPressPopover" }, host: { listeners: { "mousedown": "mousedown($event)", "mouseup": "mouseup()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverLongpressDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appPopoverLongpress]',
+                }]
+        }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { longPressPopover: [{
+                type: Output
+            }], mousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], mouseup: [{
+                type: HostListener,
+                args: ['mouseup']
+            }] } });
+
+class PopoverModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, declarations: [PopoverComponent, PopoverDirective, PopoverEventDirective, PopoverLongpressDirective], imports: [CommonModule], exports: [PopoverComponent, PopoverDirective, PopoverEventDirective, PopoverLongpressDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, providers: [PopoverService], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PopoverComponent, PopoverDirective, PopoverEventDirective, PopoverLongpressDirective],
+                    imports: [CommonModule],
+                    exports: [PopoverComponent, PopoverDirective, PopoverEventDirective, PopoverLongpressDirective],
+                    providers: [PopoverService],
+                }]
+        }] });
+
+class CsRadioComponent {
+    constructor() {
+        this.checkedEvent = new EventEmitter();
+    }
+    ngOnInit() { }
+    changeState(evt) {
+        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"] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], checkedEvent: [{
+                type: Output
+            }] } });
+
+class CsSwitchComponent {
+    constructor() {
+        this.ngValueChange = new EventEmitter();
+    }
+    ngOnInit() {
+        // 
+    }
+    valueChanged() {
+        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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input
+            }], ngValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], ngValueChange: [{
+                type: Output
+            }], tooltipMessage: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+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"] }] }); }
+}
+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" }]
+        }], ctorParameters: function () { return []; } });
+
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.clickOutside = new EventEmitter();
+    }
+    onMouseEnter(targetElement) {
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
+        if (!clickedInside) {
+            this.clickOutside.emit(null);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onMouseEnter($event.target)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+                type: Output,
+                args: ['clickOutside']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+class PascalPipe {
+    transform(value, ...args) {
+        if (typeof value !== 'string') {
+            return value;
+        }
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PascalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PascalPipe, name: "pascal" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PascalPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'pascal',
+                }]
+        }] });
+
+class CsSelectComponent {
+    constructor() {
+        this.selectedData = new EventEmitter();
+        this.selectedValueChange = new EventEmitter();
+        this.dropdownOption = false;
+        this.activeDoropdown = false;
+    }
+    set content(content) {
+        if (content) {
+            // initially setter gets called with undefined
+            this.optionList = content;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['selectedValue']) {
+            this.selectedValue = this.selectedValue || '--';
+        }
+    }
+    openDropdown(event) {
+        this.dropdownOption = true;
+        setTimeout(() => {
+            const dropdown = event.target.getBoundingClientRect();
+            const selectOption = this.optionList.nativeElement.offsetHeight;
+            if (dropdown.top + selectOption * 2 > window.innerHeight) {
+                this.getTop = dropdown.top - selectOption;
+            }
+            else {
+                this.getTop = dropdown.top + dropdown.height;
+            }
+            this.getLeft = dropdown.left;
+            this.getWidth = dropdown.width;
+            this.maxWidth = dropdown.width * 1.25;
+        }, 10);
+        setTimeout(() => {
+            this.activeDoropdown = true;
+        }, 100);
+    }
+    selectOption(selectedData) {
+        if (typeof selectedData === 'object') {
+            this.selectedValue = selectedData[this.displayProperty];
+            this.colorSelected = selectedData[this.colorProperty];
+        }
+        else {
+            this.selectedValue = selectedData;
+        }
+        this.selectedData.emit(selectedData);
+        this.selectedValueChange.emit(selectedData);
+        this.dropdownOption = false;
+    }
+    closeDropdown() {
+        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" }] }); }
+}
+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"] }]
+        }], propDecorators: { dataList: [{
+                type: Input
+            }], dropdownLabel: [{
+                type: Input
+            }], displayProperty: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], dropdownSubLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], option: [{
+                type: ViewChild,
+                args: ['option']
+            }], selectedData: [{
+                type: Output
+            }], selectedValueChange: [{
+                type: Output
+            }], placeholder: [{
+                type: Input
+            }], stylex: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], multipleSelect: [{
+                type: Input
+            }], colorProperty: [{
+                type: Input
+            }], colorSelected: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: ['optionList']
+            }] } });
+
+class SearchMultiSelectPipe {
+    transform(value, key, searchKey) {
+        if (searchKey && searchKey.length > 0) {
+            searchKey = searchKey.toLowerCase();
+            return value.filter((item) => {
+                if (item[key].toLowerCase().includes(searchKey)) {
+                    return item;
+                }
+            });
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchMultiSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SearchMultiSelectPipe, name: "searchMultiSelect" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchMultiSelectPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'searchMultiSelect',
+                }]
+        }] });
+
+class CsCheckboxIndeterminateComponent {
+    constructor() {
+        this.ngValueChange = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    valueChanged() {
+        const emitValue = {
+            value: this.value,
+            checked: this.ngValue
+        };
+        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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
+                type: Input
+            }], ngValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], ngValueChange: [{
+                type: Output
+            }] } });
+
+const CHECKBOX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckboxComponent),
+    multi: true,
+};
+class CheckboxComponent {
+    constructor() {
+        this.onChanged = (value) => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.checked = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    valueChanged() {
+        this.checked = !this.checked;
+        this.onChanged(this.checked);
+        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"] }] }); }
+}
+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"] }]
+        }] });
+
+class FormgroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, declarations: [CsCheckboxComponent,
+            CsRadioComponent,
+            CsSwitchComponent,
+            CsRadioGroupComponent,
+            CsSelectComponent,
+            PascalPipe,
+            SearchMultiSelectPipe,
+            ClickOutsideDirective,
+            CsCheckboxIndeterminateComponent,
+            CheckboxComponent], imports: [CommonModule, FormsModule, TooltipModule], exports: [CsCheckboxComponent,
+            CsRadioComponent,
+            CsSwitchComponent,
+            CsRadioGroupComponent,
+            CsSelectComponent,
+            SearchMultiSelectPipe,
+            CsCheckboxIndeterminateComponent,
+            CheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, imports: [CommonModule, FormsModule, TooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormgroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CsCheckboxComponent,
+                        CsRadioComponent,
+                        CsSwitchComponent,
+                        CsRadioGroupComponent,
+                        CsSelectComponent,
+                        PascalPipe,
+                        SearchMultiSelectPipe,
+                        ClickOutsideDirective,
+                        CsCheckboxIndeterminateComponent,
+                        CheckboxComponent
+                    ],
+                    imports: [CommonModule, FormsModule, TooltipModule],
+                    exports: [
+                        CsCheckboxComponent,
+                        CsRadioComponent,
+                        CsSwitchComponent,
+                        CsRadioGroupComponent,
+                        CsSelectComponent,
+                        SearchMultiSelectPipe,
+                        CsCheckboxIndeterminateComponent,
+                        CheckboxComponent
+                    ],
+                }]
+        }] });
+
+class GlobalAlertModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertModule, declarations: [GlobalAlertComponent], imports: [CommonModule], exports: [GlobalAlertComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GlobalAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GlobalAlertComponent],
+                    imports: [CommonModule],
+                    exports: [GlobalAlertComponent],
+                }]
+        }] });
+
+class HeaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, declarations: [HeaderContainerComponent,
+            BusinessCycleComponent,
+            SearchComponent,
+            CreateWorkflowComponent,
+            QueueComponent,
+            UserDetailsComponent,
+            SupportComponent], imports: [CommonModule,
+            TooltipModule,
+            AvatarModule,
+            PopoverModule,
+            FormgroupModule,
+            GlobalAlertModule,
+            PipesModule], exports: [HeaderContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [CommonModule,
+            TooltipModule,
+            AvatarModule,
+            PopoverModule,
+            FormgroupModule,
+            GlobalAlertModule,
+            PipesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        HeaderContainerComponent,
+                        BusinessCycleComponent,
+                        SearchComponent,
+                        CreateWorkflowComponent,
+                        QueueComponent,
+                        UserDetailsComponent,
+                        SupportComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        TooltipModule,
+                        AvatarModule,
+                        PopoverModule,
+                        FormgroupModule,
+                        GlobalAlertModule,
+                        PipesModule,
+                    ],
+                    exports: [HeaderContainerComponent],
+                }]
+        }] });
+
+class SubMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SubMenuModule, declarations: [SubMenuContainerComponent], imports: [CommonModule, TooltipModule], exports: [SubMenuContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubMenuModule, imports: [CommonModule, TooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SubMenuContainerComponent],
+                    imports: [CommonModule, TooltipModule],
+                    exports: [SubMenuContainerComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of vc-layout
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HeaderContainerComponent, HeaderModule, ProductListContainerComponent, ProductListModule, RbacService, SubMenuContainerComponent, SubMenuModule, VcLayoutComponent, VcLayoutModule, VcLayoutService };
+//# sourceMappingURL=vc-layout.mjs.map