import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ASSETS } from '../../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "./framework.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "../pagination/pagination/pagination.component";
import * as i5 from "@angular/forms";
import * as i6 from "../../../ui-kit/no-data/no-data.component";
import * as i7 from "../../../ui-kit/formgroup/cs-radio/cs-radio.component";
import * as i8 from "../checkbox/checkbox.component";
import * as i9 from "../floating-bar/floating-bar.component";
import * as i10 from "./loader/loader.component";
import * as i11 from "../pipes/pager.pipe";
import * as i12 from "./pipes/category-all-select.pipe";
import * as i13 from "./pipes/sub-cat-indeter.pipe";
import * as i14 from "./pipes/search.pipe";
export class DefineFrameworkListingComponent {
    set setFramework(value) {
        if (value && value?._id) {
            this.selectedFramework = value;
            this.activeFrameworkType =
                ['OTHERS', 'REGULATIONS', 'STANDARDS', 'INTERNAL_CONTROLS'][value?.type] ?? 1;
            this.currentView = 'FRAMEWORK';
            this.inScope = value?.in_scope;
            this.inScopeIds = this.inScope.map((ele) => ele?._id);
            this.loadFrameworkData();
        }
    }
    constructor(frameworkService) {
        this.frameworkService = frameworkService;
        this.cancel = new EventEmitter();
        this.next = new EventEmitter();
        this.mode = 'CREATE';
        this.ASSETS = ASSETS;
        this.animation = true;
        this.isMainLoader = true;
        this.frameworkCount = null;
        this.searchKey = '';
        this.apiFrameworkPayload = {
            page: 1,
            search: '',
            type: 1,
        };
        this.currentView = 'FRAMEWORK_CATEGORY';
        this.activeFrameworkType = 'REGULATIONS';
        this.frameworkTypes = {
            REGULATIONS: 1,
            STANDARDS: 2,
            INTERNAL_CONTROLS: 3,
            OTHERS: 0,
        };
        this.frameworkData = [];
        this.expandedFrameworkId = '';
        //////////////////
        this.searchKeyforFramework = '';
        this.selectedFrameworkData = null;
        this.allControls = [];
        this.inScope = [];
        this.outScope = [];
        this.inScopeIds = [];
        this.allControlsSelected = false;
        this.issubLoading = true;
        this.expandedSubCategoryIds = [];
    }
    ngOnInit() {
        this.animation = true;
        setTimeout(() => {
            this.animation = false;
        }, 300);
        this.fetchFrameworkCount();
        this.fetchFrameworkCategoryList();
    }
    fetchFrameworkCount() {
        this.frameworkService.fetchFrameworkCount().subscribe({
            next: (res) => {
                this.frameworkCount = res;
            },
            error: (err) => {
                //handle error here
            },
        });
    }
    changeType(type) {
        this.activeFrameworkType = type;
        this.apiFrameworkPayload.page = 1;
        this.apiFrameworkPayload.type = this.frameworkTypes[type];
        this.frameworkListSubscription
            ? this.frameworkListSubscription.unsubscribe()
            : null;
        this.fetchFrameworkCategoryList();
    }
    executeSearch() {
        this.apiFrameworkPayload.page = 1;
        this.apiFrameworkPayload.search = this.searchKey;
        this.fetchFrameworkCategoryList();
    }
    pageChanged(evt) {
        this.apiFrameworkPayload.page = evt;
        this.fetchFrameworkCategoryList();
    }
    fetchFrameworkCategoryList() {
        this.isMainLoader = true;
        this.frameworkListSubscription = this.frameworkService
            .fetchFrameworkInCategory(this.apiFrameworkPayload)
            .subscribe({
            next: (res) => {
                this.frameworkData = res;
                this.isMainLoader = false;
            },
            error: () => {
                this.isMainLoader = false;
            },
        });
    }
    selectFramework(evt, framework) {
        if (evt?.target?.checked) {
            this.selectedFramework = framework;
        }
    }
    expandCollapseFramework(framework) {
        if (this.expandedFrameworkId === framework?._id) {
            this.expandedFrameworkId = '';
        }
        else {
            this.expandedFrameworkId = framework?._id;
        }
    }
    removeSelectedFramework() {
        this.selectedFramework = null;
        this.selectedFrameworkData = null;
    }
    loadFrameworkData() {
        this.issubLoading = true;
        this.frameworkService
            .fetchCategoryForFramework(this.selectedFramework?._id)
            .subscribe({
            next: (res) => {
                this.selectedFrameworkData = res;
                this.checkAllElements(this.mode === 'EDIT' ? false : true);
                this.issubLoading = false;
            },
            error: () => {
                this.issubLoading = false;
            },
        });
    }
    checkAllElements(populateInScope) {
        let allElement = [];
        this.selectedFrameworkData.data?.child_list_details?.forEach((element) => {
            element?.controlsData.forEach((el) => {
                allElement.push(el);
            });
        });
        this.allControls = this.uniqueByProp(allElement, '_id');
        if (populateInScope) {
            this.inScope = this.uniqueByProp(allElement, '_id');
        }
        this.checkSelectAll();
        this.setInscopeIds();
    }
    checkSelectAll() {
        const allIds = this.allControls.map((ele) => ele?._id);
        const inScopeIds = this.inScope.map((ele) => ele?._id);
        this.allControlsSelected =
            allIds.sort()?.toString() === inScopeIds.sort()?.toString();
    }
    selectAll(evt) {
        if (evt?.target?.checked) {
            this.checkAllElements(true);
        }
        else {
            this.inScope = [];
            this.inScopeIds = [];
        }
        this.checkSelectAll();
    }
    setInscopeIds() {
        this.inScopeIds = this.inScope.map((el) => el?._id);
    }
    selectItem(evt, payload) {
        evt?.target?.checked === true
            ? this.manipulateItem('ADD', payload)
            : this.manipulateItem('DELETE', payload);
    }
    manipulateItem(action, payload) {
        if (action === 'ADD') {
            this.inScope = this.uniqueByProp([...this.inScope, ...[payload]], '_id');
            this.inScopeIds = this.inScope.map((ele) => ele?._id);
        }
        else if (action === 'DELETE') {
            let index = this.inScope.findIndex((ele) => ele?._id === payload?._id);
            if (index > -1) {
                this.inScope = this.inScope.filter((ele) => ele?._id !== payload?._id);
                this.inScopeIds = this.inScope.map((ele) => ele?._id);
            }
        }
        this.checkSelectAll();
    }
    selectCategory(evt, payload) {
        evt?.target?.checked === true
            ? this.manipulateCategory('ADD', payload)
            : this.manipulateCategory('DELETE', payload);
    }
    manipulateCategory(action, payload) {
        if (action === 'ADD') {
            const itemsTobeAdded = payload?.controlsData;
            this.inScope = this.uniqueByProp([...this.inScope, ...itemsTobeAdded], '_id');
            this.inScopeIds = this.inScope.map((ele) => ele?._id);
        }
        else if (action === 'DELETE') {
            const itemsTobeRemoved = payload?.controlsData.map((el) => el._id);
            this.inScope = this.inScope.filter((ele) => !itemsTobeRemoved.includes(ele._id));
            this.inScopeIds = this.inScope.map((ele) => ele?._id);
        }
        this.checkSelectAll();
    }
    nextHandler() {
        if (this.currentView === 'FRAMEWORK_CATEGORY') {
            this.currentView = 'FRAMEWORK';
            this.loadFrameworkData();
        }
        else {
            this.next.emit({
                ...this.selectedFramework,
                in_scope: this.inScope,
                out_scope: this.allControls.filter((ele) => !this.inScopeIds.includes(ele?._id)),
            });
        }
    }
    cancelHandler() {
        if (this.currentView === 'FRAMEWORK') {
            this.currentView = 'FRAMEWORK_CATEGORY';
        }
        else {
            this.cancel.emit();
        }
    }
    subCategoryExpandCollapse(category) {
        const index = this.expandedSubCategoryIds.indexOf(category?._id);
        if (index < 0 && category?.controlsData?.length) {
            this.expandedSubCategoryIds.push(category?._id);
        }
        else {
            this.expandedSubCategoryIds.splice(index, 1);
        }
    }
    uniqueByProp(array, key) {
        return Array.from(array
            .reduce((acc, item) => (item && item[key] && acc.set(item[key], item), acc), new Map())
            .values());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefineFrameworkListingComponent, deps: [{ token: i1.FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefineFrameworkListingComponent, selector: "app-define-framework-listing", inputs: { mode: "mode", setFramework: ["selectedFramework", "setFramework"] }, outputs: { cancel: "cancel", next: "next" }, ngImport: i0, template: "<div class=\"define-framework-listing\" [class.animate]=\"animation\">\n  <ng-container *ngIf=\"currentView === 'FRAMEWORK_CATEGORY'\">\n    <div class=\"define-framework-listing-head\">\n      <h3 class=\"define-framework-listing-title\">Select a Framework</h3>\n    </div>\n\n    <div *ngIf=\"true\" class=\"define-framework-listing-body\">\n      <div class=\"vx-d-flex vx-align-center vx-mb-2\">\n        <div\n          (click)=\"changeType('REGULATIONS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'REGULATIONS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >REGULATIONS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.regulations ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n        <div\n          (click)=\"changeType('STANDARDS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'STANDARDS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >STANDARDS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.standards ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n        <div\n          (click)=\"changeType('INTERNAL_CONTROLS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'INTERNAL_CONTROLS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >INTERNAL CONTROLS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.internalControls ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n        <div\n          (click)=\"changeType('OTHERS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'OTHERS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >OTHERS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.others ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n      </div>\n\n      <div class=\"search-block\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          type=\"text\"\n          placeholder=\"Search Frameworks\"\n          [(ngModel)]=\"searchKey\"\n          (keyup.enter)=\"executeSearch()\"\n        />\n      </div>\n      <div class=\"vx-mt-2\" *ngIf=\"isMainLoader\">\n        <framework-loader></framework-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isMainLoader && frameworkData?.total_items > 0\">\n        <div class=\"vx-mt-2\">\n          <vui-pagination\n            (pageChanged)=\"pageChanged($event)\"\n            [from]=\"frameworkData?.items_from\"\n            [to]=\"frameworkData?.items_to\"\n            [total]=\"frameworkData?.total_items\"\n            [totalPage]=\"frameworkData?.total_pages\"\n            [currentPage]=\"apiFrameworkPayload?.page\"\n          ></vui-pagination>\n        </div>\n        <div\n          class=\"define-framework-listing-table vx-mt-1\"\n          [class.with-pagination]=\"true\"\n        >\n          <div class=\"table-header\">\n            <!-- when checkbox was checked then show \"active\" class in table-row -->\n            <div class=\"table-row\" [class.active]=\"false\">\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                #\n                <!-- <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\n                                <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate> -->\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\"\n              >\n                FRAMEWORKS\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n              ></div>\n            </div>\n          </div>\n          <div class=\"table-body\">\n            <div\n              class=\"table-item\"\n              [class.open]=\"hideCategoryList\"\n              *ngFor=\"let framework of frameworkData?.data; let i = index\"\n            >\n              <!-- when checkbox was checked then show \"active\" class in table-row -->\n              <div\n                class=\"table-row main\"\n                (click)=\"expandCollapseFramework(framework)\"\n                [class.active]=\"\n                  selectedFramework?.framework_id === framework?.framework_id\n                \"\n                [class.disabled]=\"!framework?.child_list_details?.length\"\n              >\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                >\n                  <div class=\"sr-no\">\n                    {{ apiFrameworkPayload?.page | pager : i }}\n                  </div>\n                  <app-cs-radio\n                    [checked]=\"\n                      selectedFramework?.framework_id ===\n                      framework?.framework_id\n                    \"\n                    (checkedEvent)=\"selectFramework($event, framework)\"\n                  ></app-cs-radio>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\"\n                >\n                  <div\n                    class=\"category-name vx-fs-13 vx-label-txt\"\n                    [appTooltip]=\"framework?.framework_name\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ framework?.framework_name }}\n                  </div>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"\n                >\n                  <button\n                    class=\"arrow-btn vx-fs-14 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  >\n                    <i\n                      class=\"icons vx-d-flex\"\n                      (click)=\"expandCollapseFramework(framework)\"\n                    >\n                      <ng-container\n                        *ngIf=\"expandedFrameworkId !== framework?.framework_id\"\n                        >&#xe970;</ng-container\n                      >\n                      <ng-container\n                        *ngIf=\"expandedFrameworkId === framework?.framework_id\"\n                        >&#xe9e8;</ng-container\n                      >\n                    </i>\n                  </button>\n                </div>\n              </div>\n              <!-- sub table -->\n              <ng-container *ngIf=\"expandedFrameworkId === framework?._id\">\n                <div\n                  class=\"table-row child\"\n                  *ngFor=\"\n                    let subCat of framework?.child_list_details;\n                    let x = index\n                  \"\n                >\n                  <div\n                    class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                  >\n                    <div\n                      class=\"sr-no\"\n                      [appTooltip]=\"\"\n                      placement=\"bottom\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      {{\n                        (apiFrameworkPayload?.page | pager : i) + \".\" + (x + 1)\n                      }}\n                    </div>\n                  </div>\n                  <div\n                    class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\"\n                  >\n                    <div class=\"vx-d-block vx-w-100\">\n                      <div\n                        class=\"category-name vx-fs-12 vx-paragraph-txt\"\n                        [appTooltip]=\"subCat?.name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ subCat?.name }}\n                      </div>\n                      <div class=\"within\" *ngIf=\"false\">\n                        <div class=\"block\">WITHIN</div>\n                        <div\n                          class=\"data\"\n                          [appTooltip]=\"'Kolkata > America > South Africa'\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          Kolkata > America > South Africa\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"\n                  ></div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <app-no-data\n        *ngIf=\"!isMainLoader && frameworkData?.total_items <= 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Frameworks Found'\"\n      ></app-no-data>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"currentView === 'FRAMEWORK'\">\n    <div class=\"define-framework-listing-head\">\n      <h3 class=\"define-framework-listing-title\">\n        Framework: {{ selectedFramework?.framework_name }}\n      </h3>\n    </div>\n\n    <div\n      *ngIf=\"true\"\n      class=\"define-framework-listing-body after-framework-listing\"\n    >\n      <div class=\"vx-d-flex vx-align-center vx-mb-2\">\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"true\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >TOTAL RESPONSIBILITIES</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ allControls?.length }}</span\n            >\n          </div>\n        </div>\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"false\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >RESPONSIBILITIES IN SCOPE</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ inScope.length }}</span\n            >\n          </div>\n        </div>\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"false\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >RESPONSIBILITIES NOT IN SCOPE</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ allControls?.length - inScope?.length }}</span\n            >\n          </div>\n        </div>\n      </div>\n\n      <div class=\"search-block\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          [(ngModel)]=\"searchKeyforFramework\"\n          type=\"text\"\n          placeholder=\"Search\"\n        />\n      </div>\n      <!-- <div class=\"vx-mt-2\">\n                <vui-pagination></vui-pagination>\n            </div> -->\n      <div\n        class=\"define-framework-listing-table vx-mt-1\"\n        [class.with-pagination]=\"true\"\n      >\n        <div class=\"vx-mt-2\" *ngIf=\"issubLoading\">\n          <framework-loader></framework-loader>\n        </div>\n        <ng-container *ngIf=\"!issubLoading\">\n          <ng-container\n            *ngIf=\"\n              selectedFrameworkData?.data?.child_list_details\n                | searchPipe : searchKeyforFramework as frameworkCat\n            \"\n          >\n            <ng-container *ngIf=\"frameworkCat?.length\">\n              <div class=\"selected-area\">\n                <vui-checkbox\n                  #check\n                  (change)=\"selectAll($event)\"\n                  [disabled]=\"allControls?.length < 1\"\n                  [checked]=\"\n                    (allControlsSelected && isScope?.length > 0) ||\n                    inScope?.length > 0\n                  \"\n                  [indeterminateEnabled]=\"\n                    inScope?.length > 0 && !allControlsSelected\n                  \"\n                >\n                  {{ check?.checked ? \"Deselect All\" : \"Select All\" }}\n                </vui-checkbox>\n              </div>\n\n              <div\n                class=\"program-listing-item\"\n                [class.active]=\"subList\"\n                *ngFor=\"let subCat of frameworkCat; let k = index\"\n              >\n                <div\n                  class=\"table-row main-list\"\n                  [class.active]=\"false\"\n                  [class.disabled]=\"!subCat?.controlsData?.length\"\n                  (click)=\"subCategoryExpandCollapse(subCat)\"\n                >\n                  <div class=\"table-column serial\">\n                    <div class=\"sr-no\">{{ k + 1 }}</div>\n\n                    <vui-checkbox\n                      [indeterminateEnabled]=\"\n                        subCat?.controlsData | subCatIndeter : inScope\n                      \"\n                      [checked]=\"\n                        ((subCat?.controlsData | categoryAllSelect : inScope) ||\n                          (subCat?.controlsData | subCatIndeter : inScope)) &&\n                        subCat?.controlsData?.length\n                      \"\n                      (change)=\"selectCategory($event, subCat)\"\n                    ></vui-checkbox>\n                  </div>\n                  <div class=\"table-column name\">\n                    <div class=\"name-inner\">\n                      <div class=\"name-with-count\">\n                        <div\n                          class=\"value\"\n                          [appTooltip]=\"subCat?.name\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ subCat?.name }}\n                        </div>\n                        <span class=\"count\">{{\n                          subCat?.controlsData?.length\n                        }}</span>\n                      </div>\n                      <div class=\"within-part\" *ngIf=\"false\">\n                        <span class=\"within-box\">Within</span>\n                        <span\n                          class=\"value\"\n                          [appTooltip]=\"'South Africa > America > India'\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                          >South Africa > America > India</span\n                        >\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"table-column action\">\n                    <button\n                      class=\"arrow\"\n                      [class.disabled]=\"!subCat?.controlsData?.length\"\n                    >\n                      <i\n                        *ngIf=\"!expandedSubCategoryIds.includes(subCat?._id)\"\n                        class=\"icons\"\n                        >&#xe970;</i\n                      >\n                      <i\n                        *ngIf=\"expandedSubCategoryIds.includes(subCat?._id)\"\n                        class=\"icons\"\n                        >&#xe9e8;</i\n                      >\n                    </button>\n                  </div>\n                </div>\n                <div\n                  class=\"sub-list\"\n                  *ngIf=\"expandedSubCategoryIds.includes(subCat?._id)\"\n                >\n                  <div\n                    class=\"table-row\"\n                    [class.disabled]=\"false\"\n                    *ngFor=\"let control of subCat?.controlsData; let c = index\"\n                  >\n                    <div class=\"table-column serial\">\n                      <div class=\"sr-no\">{{ k + 1 + \".\" + (c + 1) }}</div>\n                      <vui-checkbox\n                        [checked]=\"inScopeIds.includes(control?._id)\"\n                        (change)=\"selectItem($event, control)\"\n                      ></vui-checkbox>\n                    </div>\n                    <div class=\"table-column name\">\n                      <div class=\"name-inner\">\n                        <div\n                          class=\"value\"\n                          [appTooltip]=\"control?.name\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ control?.name }}\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"table-column action\"></div>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <app-no-data\n              *ngIf=\"!frameworkCat?.length\"\n              [noDataImage]=\"ASSETS.search_data\"\n              [noDataText]=\"'No Frameworks Found'\"\n            ></app-no-data>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"define-framework-listing-footer\">\n    <vui-floating-bar\n      (closeEvent)=\"nextHandler()\"\n      (closeList)=\"cancelHandler()\"\n      *ngIf=\"currentView === 'FRAMEWORK_CATEGORY'\"\n      [nextDisabled]=\"!selectedFramework?._id\"\n    >\n      <div class=\"chip\" *ngIf=\"selectedFramework\">\n        <ng-container>\n          <i class=\"icons\" (click)=\"removeSelectedFramework()\">&#xe90d;</i>\n          <span class=\"value\"> {{ selectedFramework?.framework_name }}</span>\n        </ng-container>\n      </div>\n    </vui-floating-bar>\n    <vui-floating-bar\n      (closeEvent)=\"nextHandler()\"\n      (closeList)=\"cancelHandler()\"\n      *ngIf=\"currentView === 'FRAMEWORK'\"\n      [nextDisabled]=\"inScope?.length < 1\"\n    ></vui-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.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-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.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-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .define-framework-listing{background:#fff;position:fixed;inset:0 500px 0 0;border-top:3px solid #1E5DD3}::ng-deep .define-framework-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .define-framework-listing-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .define-framework-listing-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .define-framework-listing-body{padding:24px 40px 24px 36px;height:calc(100vh - 124px)}::ng-deep .define-framework-listing-body .search-block{position:relative}::ng-deep .define-framework-listing-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .define-framework-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .define-framework-listing-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .define-framework-listing-body.after-framework-listing .define-framework-listing-table{height:calc(100vh - 12.75rem)}::ng-deep .define-framework-listing-body.after-framework-listing .define-framework-listing-table.with-pagination{height:calc(100vh - 15.5rem)}::ng-deep .define-framework-listing-table{width:calc(100% + .75rem);height:calc(100vh - 16.75rem);overflow:auto;padding-right:.75rem}::ng-deep .define-framework-listing-table.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .define-framework-listing-table .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .define-framework-listing-table .table-header .table-row .table-column{color:#161b2f!important;min-height:1.5rem!important}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial{position:relative}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:.125rem;position:absolute;top:.25rem;left:.5rem;width:1rem;height:1rem;transition:all .2s ease-in-out;opacity:0}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-header .table-row:hover .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-header .table-row.active .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-header .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-header .table-row.active .table-column.serial app-cs-checkbox{opacity:1}::ng-deep .define-framework-listing-table .table-body{position:relative}::ng-deep .define-framework-listing-table .table-body .table-item{border:1px solid #f1f1f1;border-radius:.25rem;margin-bottom:.25rem}::ng-deep .define-framework-listing-table .table-body .table-item.open{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-body .table-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-body .table-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .table-body .table-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .define-framework-listing-table .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .define-framework-listing-table .table-row.main{cursor:pointer}::ng-deep .define-framework-listing-table .table-row.child{border-top:1px solid #f1f1f1}::ng-deep .define-framework-listing-table .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .define-framework-listing-table .table-row .table-column.serial{width:2rem;max-width:2rem;flex:0 0 2rem;justify-content:center;position:relative}::ng-deep .define-framework-listing-table .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio{background:#fff;border-radius:50%;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;transition:all .2s ease-in-out;opacity:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio .radio-item{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio .radio-item .radio,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio .radio-item .radiomark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:50%;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;transition:all .2s ease-in-out;opacity:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkboxmark,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkboxmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.category{width:calc(100% - 4.5rem);min-width:calc(100% - 4.5rem)}::ng-deep .define-framework-listing-table .table-row .table-column.category .category-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .define-framework-listing-table .table-row .table-column.category .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .define-framework-listing-table .table-row .table-column.category .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .define-framework-listing-table .table-row .table-column.category .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks{width:calc(100% - 26rem);min-width:calc(100% - 26rem)}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .frameworks-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .define-framework-listing-table .table-row .table-column.in-scope{width:10rem;min-width:10rem}::ng-deep .define-framework-listing-table .table-row .table-column.in-scope .scope{border:1px solid #dbdbdb;border-radius:.125rem;min-width:1.75rem}::ng-deep .define-framework-listing-table .table-row .table-column.not-in-scope{width:11rem;min-width:11rem}::ng-deep .define-framework-listing-table .table-row .table-column.not-in-scope .scope{border:1px solid #dbdbdb;border-radius:.125rem;min-width:1.75rem}::ng-deep .define-framework-listing-table .table-row .table-column.action{width:2.5rem;min-width:2.5rem}::ng-deep .define-framework-listing-table .table-row .table-column.action button.arrow-btn{background:transparent;border-radius:0;border:none}::ng-deep .define-framework-listing-table .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item{width:100%;position:relative}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item .checkmark,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item .value,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{color:#161b2f!important;font-size:12px!important;font-weight:500!important;margin-left:24px!important}::ng-deep .define-framework-listing-table .program-listing-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .define-framework-listing-table .program-listing-item .main-list{cursor:pointer}::ng-deep .define-framework-listing-table .program-listing-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .define-framework-listing-table .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .define-framework-listing-table .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:16px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial vui-checkbox{background:#fff;border-radius:2px;position:absolute;top:16px;left:8px;width:16px;height:16px;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial vui-checkbox .checkbox-item{position:static}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner .count{background:#1e5dd3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial vui-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial vui-checkbox{opacity:1}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .define-framework-listing-table .program-listing-item.active .table-row .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate{opacity:1}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}.disabled{pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i4.PaginationComponent, selector: "vui-pagination", inputs: ["from", "to", "total", "showPageDetail", "totalPage", "currentPage", "pageInSingleView"], outputs: ["pageChanged"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: i7.CsRadioComponentUI, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: i8.CheckboxComponent, selector: "vui-checkbox", inputs: ["disabled", "checked", "indeterminateEnabled"] }, { kind: "component", type: i9.VuiFloatingBarComponent, selector: "vui-floating-bar", inputs: ["selectedData", "groupSelected", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "nextDisabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "workflowTypeChanged"] }, { kind: "component", type: i10.LoaderFrameworkComponent, selector: "framework-loader" }, { kind: "pipe", type: i11.PagerPipe, name: "pager" }, { kind: "pipe", type: i12.CategoryAllSelectPipe, name: "categoryAllSelect" }, { kind: "pipe", type: i13.SubCatIndeterPipe, name: "subCatIndeter" }, { kind: "pipe", type: i14.SearchNewPipe, name: "searchPipe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefineFrameworkListingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-define-framework-listing', template: "<div class=\"define-framework-listing\" [class.animate]=\"animation\">\n  <ng-container *ngIf=\"currentView === 'FRAMEWORK_CATEGORY'\">\n    <div class=\"define-framework-listing-head\">\n      <h3 class=\"define-framework-listing-title\">Select a Framework</h3>\n    </div>\n\n    <div *ngIf=\"true\" class=\"define-framework-listing-body\">\n      <div class=\"vx-d-flex vx-align-center vx-mb-2\">\n        <div\n          (click)=\"changeType('REGULATIONS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'REGULATIONS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >REGULATIONS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.regulations ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n        <div\n          (click)=\"changeType('STANDARDS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'STANDARDS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >STANDARDS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.standards ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n        <div\n          (click)=\"changeType('INTERNAL_CONTROLS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'INTERNAL_CONTROLS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >INTERNAL CONTROLS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.internalControls ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n        <div\n          (click)=\"changeType('OTHERS')\"\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"activeFrameworkType === 'OTHERS'\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >OTHERS</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ frameworkCount?.others ?? \"--\" }}</span\n            >\n          </div>\n        </div>\n      </div>\n\n      <div class=\"search-block\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          type=\"text\"\n          placeholder=\"Search Frameworks\"\n          [(ngModel)]=\"searchKey\"\n          (keyup.enter)=\"executeSearch()\"\n        />\n      </div>\n      <div class=\"vx-mt-2\" *ngIf=\"isMainLoader\">\n        <framework-loader></framework-loader>\n      </div>\n\n      <ng-container *ngIf=\"!isMainLoader && frameworkData?.total_items > 0\">\n        <div class=\"vx-mt-2\">\n          <vui-pagination\n            (pageChanged)=\"pageChanged($event)\"\n            [from]=\"frameworkData?.items_from\"\n            [to]=\"frameworkData?.items_to\"\n            [total]=\"frameworkData?.total_items\"\n            [totalPage]=\"frameworkData?.total_pages\"\n            [currentPage]=\"apiFrameworkPayload?.page\"\n          ></vui-pagination>\n        </div>\n        <div\n          class=\"define-framework-listing-table vx-mt-1\"\n          [class.with-pagination]=\"true\"\n        >\n          <div class=\"table-header\">\n            <!-- when checkbox was checked then show \"active\" class in table-row -->\n            <div class=\"table-row\" [class.active]=\"false\">\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                #\n                <!-- <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\n                                <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate> -->\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\"\n              >\n                FRAMEWORKS\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n              ></div>\n            </div>\n          </div>\n          <div class=\"table-body\">\n            <div\n              class=\"table-item\"\n              [class.open]=\"hideCategoryList\"\n              *ngFor=\"let framework of frameworkData?.data; let i = index\"\n            >\n              <!-- when checkbox was checked then show \"active\" class in table-row -->\n              <div\n                class=\"table-row main\"\n                (click)=\"expandCollapseFramework(framework)\"\n                [class.active]=\"\n                  selectedFramework?.framework_id === framework?.framework_id\n                \"\n                [class.disabled]=\"!framework?.child_list_details?.length\"\n              >\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                >\n                  <div class=\"sr-no\">\n                    {{ apiFrameworkPayload?.page | pager : i }}\n                  </div>\n                  <app-cs-radio\n                    [checked]=\"\n                      selectedFramework?.framework_id ===\n                      framework?.framework_id\n                    \"\n                    (checkedEvent)=\"selectFramework($event, framework)\"\n                  ></app-cs-radio>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\"\n                >\n                  <div\n                    class=\"category-name vx-fs-13 vx-label-txt\"\n                    [appTooltip]=\"framework?.framework_name\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ framework?.framework_name }}\n                  </div>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"\n                >\n                  <button\n                    class=\"arrow-btn vx-fs-14 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  >\n                    <i\n                      class=\"icons vx-d-flex\"\n                      (click)=\"expandCollapseFramework(framework)\"\n                    >\n                      <ng-container\n                        *ngIf=\"expandedFrameworkId !== framework?.framework_id\"\n                        >&#xe970;</ng-container\n                      >\n                      <ng-container\n                        *ngIf=\"expandedFrameworkId === framework?.framework_id\"\n                        >&#xe9e8;</ng-container\n                      >\n                    </i>\n                  </button>\n                </div>\n              </div>\n              <!-- sub table -->\n              <ng-container *ngIf=\"expandedFrameworkId === framework?._id\">\n                <div\n                  class=\"table-row child\"\n                  *ngFor=\"\n                    let subCat of framework?.child_list_details;\n                    let x = index\n                  \"\n                >\n                  <div\n                    class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                  >\n                    <div\n                      class=\"sr-no\"\n                      [appTooltip]=\"\"\n                      placement=\"bottom\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      {{\n                        (apiFrameworkPayload?.page | pager : i) + \".\" + (x + 1)\n                      }}\n                    </div>\n                  </div>\n                  <div\n                    class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\"\n                  >\n                    <div class=\"vx-d-block vx-w-100\">\n                      <div\n                        class=\"category-name vx-fs-12 vx-paragraph-txt\"\n                        [appTooltip]=\"subCat?.name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ subCat?.name }}\n                      </div>\n                      <div class=\"within\" *ngIf=\"false\">\n                        <div class=\"block\">WITHIN</div>\n                        <div\n                          class=\"data\"\n                          [appTooltip]=\"'Kolkata > America > South Africa'\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          Kolkata > America > South Africa\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"\n                  ></div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <app-no-data\n        *ngIf=\"!isMainLoader && frameworkData?.total_items <= 0\"\n        [noDataImage]=\"ASSETS.search_data\"\n        [noDataText]=\"'No Frameworks Found'\"\n      ></app-no-data>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"currentView === 'FRAMEWORK'\">\n    <div class=\"define-framework-listing-head\">\n      <h3 class=\"define-framework-listing-title\">\n        Framework: {{ selectedFramework?.framework_name }}\n      </h3>\n    </div>\n\n    <div\n      *ngIf=\"true\"\n      class=\"define-framework-listing-body after-framework-listing\"\n    >\n      <div class=\"vx-d-flex vx-align-center vx-mb-2\">\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"true\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >TOTAL RESPONSIBILITIES</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ allControls?.length }}</span\n            >\n          </div>\n        </div>\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"false\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >RESPONSIBILITIES IN SCOPE</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ inScope.length }}</span\n            >\n          </div>\n        </div>\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"false\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >RESPONSIBILITIES NOT IN SCOPE</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{ allControls?.length - inScope?.length }}</span\n            >\n          </div>\n        </div>\n      </div>\n\n      <div class=\"search-block\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          [(ngModel)]=\"searchKeyforFramework\"\n          type=\"text\"\n          placeholder=\"Search\"\n        />\n      </div>\n      <!-- <div class=\"vx-mt-2\">\n                <vui-pagination></vui-pagination>\n            </div> -->\n      <div\n        class=\"define-framework-listing-table vx-mt-1\"\n        [class.with-pagination]=\"true\"\n      >\n        <div class=\"vx-mt-2\" *ngIf=\"issubLoading\">\n          <framework-loader></framework-loader>\n        </div>\n        <ng-container *ngIf=\"!issubLoading\">\n          <ng-container\n            *ngIf=\"\n              selectedFrameworkData?.data?.child_list_details\n                | searchPipe : searchKeyforFramework as frameworkCat\n            \"\n          >\n            <ng-container *ngIf=\"frameworkCat?.length\">\n              <div class=\"selected-area\">\n                <vui-checkbox\n                  #check\n                  (change)=\"selectAll($event)\"\n                  [disabled]=\"allControls?.length < 1\"\n                  [checked]=\"\n                    (allControlsSelected && isScope?.length > 0) ||\n                    inScope?.length > 0\n                  \"\n                  [indeterminateEnabled]=\"\n                    inScope?.length > 0 && !allControlsSelected\n                  \"\n                >\n                  {{ check?.checked ? \"Deselect All\" : \"Select All\" }}\n                </vui-checkbox>\n              </div>\n\n              <div\n                class=\"program-listing-item\"\n                [class.active]=\"subList\"\n                *ngFor=\"let subCat of frameworkCat; let k = index\"\n              >\n                <div\n                  class=\"table-row main-list\"\n                  [class.active]=\"false\"\n                  [class.disabled]=\"!subCat?.controlsData?.length\"\n                  (click)=\"subCategoryExpandCollapse(subCat)\"\n                >\n                  <div class=\"table-column serial\">\n                    <div class=\"sr-no\">{{ k + 1 }}</div>\n\n                    <vui-checkbox\n                      [indeterminateEnabled]=\"\n                        subCat?.controlsData | subCatIndeter : inScope\n                      \"\n                      [checked]=\"\n                        ((subCat?.controlsData | categoryAllSelect : inScope) ||\n                          (subCat?.controlsData | subCatIndeter : inScope)) &&\n                        subCat?.controlsData?.length\n                      \"\n                      (change)=\"selectCategory($event, subCat)\"\n                    ></vui-checkbox>\n                  </div>\n                  <div class=\"table-column name\">\n                    <div class=\"name-inner\">\n                      <div class=\"name-with-count\">\n                        <div\n                          class=\"value\"\n                          [appTooltip]=\"subCat?.name\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ subCat?.name }}\n                        </div>\n                        <span class=\"count\">{{\n                          subCat?.controlsData?.length\n                        }}</span>\n                      </div>\n                      <div class=\"within-part\" *ngIf=\"false\">\n                        <span class=\"within-box\">Within</span>\n                        <span\n                          class=\"value\"\n                          [appTooltip]=\"'South Africa > America > India'\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                          >South Africa > America > India</span\n                        >\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"table-column action\">\n                    <button\n                      class=\"arrow\"\n                      [class.disabled]=\"!subCat?.controlsData?.length\"\n                    >\n                      <i\n                        *ngIf=\"!expandedSubCategoryIds.includes(subCat?._id)\"\n                        class=\"icons\"\n                        >&#xe970;</i\n                      >\n                      <i\n                        *ngIf=\"expandedSubCategoryIds.includes(subCat?._id)\"\n                        class=\"icons\"\n                        >&#xe9e8;</i\n                      >\n                    </button>\n                  </div>\n                </div>\n                <div\n                  class=\"sub-list\"\n                  *ngIf=\"expandedSubCategoryIds.includes(subCat?._id)\"\n                >\n                  <div\n                    class=\"table-row\"\n                    [class.disabled]=\"false\"\n                    *ngFor=\"let control of subCat?.controlsData; let c = index\"\n                  >\n                    <div class=\"table-column serial\">\n                      <div class=\"sr-no\">{{ k + 1 + \".\" + (c + 1) }}</div>\n                      <vui-checkbox\n                        [checked]=\"inScopeIds.includes(control?._id)\"\n                        (change)=\"selectItem($event, control)\"\n                      ></vui-checkbox>\n                    </div>\n                    <div class=\"table-column name\">\n                      <div class=\"name-inner\">\n                        <div\n                          class=\"value\"\n                          [appTooltip]=\"control?.name\"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ control?.name }}\n                        </div>\n                      </div>\n                    </div>\n                    <div class=\"table-column action\"></div>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <app-no-data\n              *ngIf=\"!frameworkCat?.length\"\n              [noDataImage]=\"ASSETS.search_data\"\n              [noDataText]=\"'No Frameworks Found'\"\n            ></app-no-data>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"define-framework-listing-footer\">\n    <vui-floating-bar\n      (closeEvent)=\"nextHandler()\"\n      (closeList)=\"cancelHandler()\"\n      *ngIf=\"currentView === 'FRAMEWORK_CATEGORY'\"\n      [nextDisabled]=\"!selectedFramework?._id\"\n    >\n      <div class=\"chip\" *ngIf=\"selectedFramework\">\n        <ng-container>\n          <i class=\"icons\" (click)=\"removeSelectedFramework()\">&#xe90d;</i>\n          <span class=\"value\"> {{ selectedFramework?.framework_name }}</span>\n        </ng-container>\n      </div>\n    </vui-floating-bar>\n    <vui-floating-bar\n      (closeEvent)=\"nextHandler()\"\n      (closeList)=\"cancelHandler()\"\n      *ngIf=\"currentView === 'FRAMEWORK'\"\n      [nextDisabled]=\"inScope?.length < 1\"\n    ></vui-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.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-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.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-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .define-framework-listing{background:#fff;position:fixed;inset:0 500px 0 0;border-top:3px solid #1E5DD3}::ng-deep .define-framework-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .define-framework-listing-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .define-framework-listing-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .define-framework-listing-body{padding:24px 40px 24px 36px;height:calc(100vh - 124px)}::ng-deep .define-framework-listing-body .search-block{position:relative}::ng-deep .define-framework-listing-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .define-framework-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .define-framework-listing-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .define-framework-listing-body.after-framework-listing .define-framework-listing-table{height:calc(100vh - 12.75rem)}::ng-deep .define-framework-listing-body.after-framework-listing .define-framework-listing-table.with-pagination{height:calc(100vh - 15.5rem)}::ng-deep .define-framework-listing-table{width:calc(100% + .75rem);height:calc(100vh - 16.75rem);overflow:auto;padding-right:.75rem}::ng-deep .define-framework-listing-table.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .define-framework-listing-table .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .define-framework-listing-table .table-header .table-row .table-column{color:#161b2f!important;min-height:1.5rem!important}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial{position:relative}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:.125rem;position:absolute;top:.25rem;left:.5rem;width:1rem;height:1rem;transition:all .2s ease-in-out;opacity:0}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-header .table-row:hover .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-header .table-row.active .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-header .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-header .table-row.active .table-column.serial app-cs-checkbox{opacity:1}::ng-deep .define-framework-listing-table .table-body{position:relative}::ng-deep .define-framework-listing-table .table-body .table-item{border:1px solid #f1f1f1;border-radius:.25rem;margin-bottom:.25rem}::ng-deep .define-framework-listing-table .table-body .table-item.open{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-body .table-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-body .table-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .table-body .table-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .define-framework-listing-table .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .define-framework-listing-table .table-row.main{cursor:pointer}::ng-deep .define-framework-listing-table .table-row.child{border-top:1px solid #f1f1f1}::ng-deep .define-framework-listing-table .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .define-framework-listing-table .table-row .table-column.serial{width:2rem;max-width:2rem;flex:0 0 2rem;justify-content:center;position:relative}::ng-deep .define-framework-listing-table .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio{background:#fff;border-radius:50%;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;transition:all .2s ease-in-out;opacity:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio .radio-item{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio .radio-item .radio,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-radio .radio-item .radiomark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:50%;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;transition:all .2s ease-in-out;opacity:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkboxmark,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkboxmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-row .table-column.category{width:calc(100% - 4.5rem);min-width:calc(100% - 4.5rem)}::ng-deep .define-framework-listing-table .table-row .table-column.category .category-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .define-framework-listing-table .table-row .table-column.category .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .define-framework-listing-table .table-row .table-column.category .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .define-framework-listing-table .table-row .table-column.category .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks{width:calc(100% - 26rem);min-width:calc(100% - 26rem)}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .frameworks-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .define-framework-listing-table .table-row .table-column.frameworks .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .define-framework-listing-table .table-row .table-column.in-scope{width:10rem;min-width:10rem}::ng-deep .define-framework-listing-table .table-row .table-column.in-scope .scope{border:1px solid #dbdbdb;border-radius:.125rem;min-width:1.75rem}::ng-deep .define-framework-listing-table .table-row .table-column.not-in-scope{width:11rem;min-width:11rem}::ng-deep .define-framework-listing-table .table-row .table-column.not-in-scope .scope{border:1px solid #dbdbdb;border-radius:.125rem;min-width:1.75rem}::ng-deep .define-framework-listing-table .table-row .table-column.action{width:2.5rem;min-width:2.5rem}::ng-deep .define-framework-listing-table .table-row .table-column.action button.arrow-btn{background:transparent;border-radius:0;border:none}::ng-deep .define-framework-listing-table .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item{width:100%;position:relative}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item .checkmark,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox .checkbox-item .value,::ng-deep .define-framework-listing-table .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{color:#161b2f!important;font-size:12px!important;font-weight:500!important;margin-left:24px!important}::ng-deep .define-framework-listing-table .program-listing-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .define-framework-listing-table .program-listing-item .main-list{cursor:pointer}::ng-deep .define-framework-listing-table .program-listing-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .define-framework-listing-table .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .define-framework-listing-table .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:16px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial vui-checkbox{background:#fff;border-radius:2px;position:absolute;top:16px;left:8px;width:16px;height:16px;transition:all .2s ease-in-out}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.serial vui-checkbox .checkbox-item{position:static}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner .count{background:#1e5dd3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .define-framework-listing-table .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .program-listing-item .table-row:hover .table-column.serial vui-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .table-row.active .table-column.serial vui-checkbox{opacity:1}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox,::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .define-framework-listing-table .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .define-framework-listing-table .program-listing-item.active .table-row .table-column.serial app-cs-radio,::ng-deep .define-framework-listing-table .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .define-framework-listing-table .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate{opacity:1}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}.disabled{pointer-events:none;opacity:.7}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FrameworkService }]; }, propDecorators: { cancel: [{
                type: Output
            }], next: [{
                type: Output
            }], mode: [{
                type: Input
            }], setFramework: [{
                type: Input,
                args: ['selectedFramework']
            }] } });
//# sourceMappingURL=data:application/json;base64, 