vcomply-workflow-engine 2.0.4 → 2.1.4

package/esm2015/lib/workflow-program/create-program-ui/define-framework-listing/define-framework-listing.component.js

@@ -1,29 +1,112 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FrameworkService } from './framework.service';
 export class DefineFrameworkListingComponent {
-    constructor() {
+    constructor(frameworkService) {
+        this.frameworkService = frameworkService;
+        this.cancel = new EventEmitter();
+        this.next = new EventEmitter();
         this.animation = true;
-        this.hideCategoryList = false;
-        this.hideFrameworkList = false;
+        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 = '';
     }
     ngOnInit() {
         this.animation = true;
         setTimeout(() => {
             this.animation = false;
         }, 300);
+        this.fetchFrameworkCount();
+        this.fetchFrameworkCategoryList();
     }
-    clickCategoryList() {
-        this.hideCategoryList = !this.hideCategoryList;
+    fetchFrameworkCount() {
+        this.frameworkService.fetchFrameworkCount().subscribe({
+            next: (res) => { this.frameworkCount = res; },
+            error: (err) => {
+                //handle error here
+            }
+        });
     }
-    clickFrameworkList() {
-        this.hideFrameworkList = !this.hideFrameworkList;
+    nextHandler() {
+        if (this.currentView === 'FRAMEWORK_CATEGORY') {
+            this.currentView = 'FRAMEWORK';
+        }
+        else {
+            this.next.emit();
+        }
+    }
+    cancelHandler() {
+        if (this.currentView === 'FRAMEWORK') {
+            this.currentView = 'FRAMEWORK_CATEGORY';
+        }
+        else {
+            this.cancel.emit();
+        }
+    }
+    changeType(type) {
+        this.activeFrameworkType = type;
+        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) => { console.log("response", res); this.frameworkData = res; this.isMainLoader = false; },
+            error: () => { this.isMainLoader = false; }
+        });
+    }
+    selectFramework(evt, framework) {
+        var _a;
+        if ((_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.checked) {
+            this.selectedFramework = framework;
+            console.log(this.selectedFramework);
+        }
+    }
+    expandCollapseFramework(framework) {
+        if (this.expandedFrameworkId === (framework === null || framework === void 0 ? void 0 : framework.framework_id)) {
+            this.expandedFrameworkId = '';
+        }
+        else {
+            this.expandedFrameworkId = framework === null || framework === void 0 ? void 0 : framework.framework_id;
+        }
     }
 }
 DefineFrameworkListingComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-define-framework-listing',
-                template: "<div class=\"define-framework-listing\" [class.animate]=\"animation\">\r\n    <div class=\"define-framework-listing-head\">\r\n      <h3 class=\"define-framework-listing-title\">Select Framework</h3>\r\n    </div>\r\n  \r\n    <div *ngIf=\"true\" class=\"define-framework-listing-body\">\r\n        <div class=\"vx-d-flex vx-align-center vx-mb-2\">\r\n            <div 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\" [class.active]=\"true\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">100</span>\r\n                </div>\r\n            </div>\r\n            <div 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\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">100</span>\r\n                </div>\r\n            </div>\r\n            <div 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\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">100</span>\r\n                </div>\r\n            </div>\r\n            <div 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\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">100</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"search-block\">\r\n          <i class=\"icons\">&#xe90b;</i>\r\n          <input type=\"text\" placeholder=\"Search Frameworks\" />\r\n        </div>\r\n        <ng-container *ngIf=\"true\">\r\n            <!-- <app-pagination></app-pagination> -->\r\n            <div class=\"define-framework-listing-table vx-mt-1\" [class.with-pagination]=\"true\">\r\n                <div class=\"table-header\">\r\n                    <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                    <div class=\"table-row\" [class.active]=\"false\">\r\n                        <div 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\">\r\n                            #\r\n                            <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\r\n                            <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate>\r\n                        </div>\r\n                        <div 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\">RESPONSIBILITY CATEGORIES</div>\r\n                        <div 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\"></div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"table-body\">\r\n                    <div class=\"table-item\" [class.open]=\"hideCategoryList\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                        <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                        <div class=\"table-row main\" (click)=\"clickCategoryList()\" [class.active]=\"false\">\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                                <div class=\"sr-no\" [appTooltip]=\"'1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1</div>\r\n                                <app-cs-radio></app-cs-radio>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\">\r\n                                <div class=\"category-name vx-fs-13 vx-label-txt\" [appTooltip]=\"'Federal Emergency Management Agency (FEMA)'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Federal Emergency Management Agency (FEMA)</div>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\">\r\n                                <button class=\"arrow-btn vx-fs-14 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\r\n                                    <i class=\"icons vx-d-flex\">\r\n                                        <ng-container *ngIf=\"!hideCategoryList\">&#xe970;</ng-container>\r\n                                        <ng-container *ngIf=\"hideCategoryList\">&#xe9e8;</ng-container>\r\n                                    </i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <!-- sub table -->\r\n                        <ng-container *ngIf=\"hideCategoryList\">\r\n                            <div class=\"table-row child\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                                    <div class=\"sr-no\" [appTooltip]=\"'1.1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1.1</div>\r\n                                </div>\r\n                                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\">\r\n                                    <div class=\"vx-d-block vx-w-100\">\r\n                                        <div class=\"category-name vx-fs-12 vx-paragraph-txt\" [appTooltip]=\"'Threat Analysis & Flaw Remediation During Development (IAO-04)'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Threat Analysis & Flaw Remediation During Development (IAO-04)</div>\r\n                                        <div class=\"within\">\r\n                                            <div class=\"block\">WITHIN</div>\r\n                                            <div class=\"data\" [appTooltip]=\"'Kolkata > America > South Africa'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Kolkata > America > South Africa</div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"></div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        <app-no-data *ngIf=\"false\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Frameworks Found'\"></app-no-data>\r\n    </div>\r\n\r\n    <div *ngIf=\"false\" class=\"define-framework-listing-body after-framework-listing\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search associated Responsibilities/ Categories within this framework\" />\r\n        </div>\r\n        <!-- <app-pagination></app-pagination> -->\r\n        <div class=\"define-framework-listing-table vx-mt-1\" [class.with-pagination]=\"true\">\r\n            <div class=\"table-header\">\r\n                <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                <div class=\"table-row\" [class.active]=\"false\">\r\n                    <div 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\">\r\n                        #\r\n                        <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\r\n                        <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate>\r\n                    </div>\r\n                    <div class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center frameworks\">FRAMEWORKS</div>\r\n                    <div class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center in-scope\">RESPONSIBILITIES IN SCOPE</div>\r\n                    <div class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center not-in-scope\">RESPONSIBILITIES NOT IN SCOPE</div>\r\n                    <div 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\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"table-body\">\r\n                <div class=\"table-item\" [class.open]=\"hideFrameworkList\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                    <div class=\"table-row main\" (click)=\"clickFrameworkList()\" [class.active]=\"false\">\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"'1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1</div>\r\n                            <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\r\n                            <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center frameworks\">\r\n                            <div class=\"vx-d-block vx-w-100 vx-pr-3\">\r\n                                <div class=\"frameworks-name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Physical and environmental security'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Physical and environmental security</div>\r\n                                <div class=\"within\">\r\n                                    <div class=\"block\">WITHIN</div>\r\n                                    <div class=\"data\" [appTooltip]=\"'Kolkata > America > South Africa'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Kolkata > America > South Africa</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center in-scope\">\r\n                            <div class=\"scope vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-6 vx-d-flex vx-align-center vx-justify-center\">\r\n                                <span *ngIf=\"true\" class=\"vx-txt-blue\">45</span>\r\n                                <span *ngIf=\"false\" class=\"vx-paragraph-txt\">--</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center not-in-scope\">\r\n                            <div class=\"scope vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-6 vx-d-flex vx-align-center vx-justify-center\">\r\n                                <span *ngIf=\"true\" class=\"vx-txt-blue\">8</span>\r\n                                <span *ngIf=\"false\" class=\"vx-paragraph-txt\">--</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\">\r\n                            <button class=\"arrow-btn vx-fs-14 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\r\n                                <i class=\"icons vx-d-flex\">\r\n                                    <ng-container *ngIf=\"!hideFrameworkList\">&#xe970;</ng-container>\r\n                                    <ng-container *ngIf=\"hideFrameworkList\">&#xe9e8;</ng-container>\r\n                                </i>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <!-- sub table -->\r\n                    <ng-container *ngIf=\"hideFrameworkList\">\r\n                        <div class=\"table-row child\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                                <div class=\"sr-no\" [appTooltip]=\"'1.1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1.1</div>\r\n                                <app-cs-checkbox></app-cs-checkbox>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\">\r\n                                <div class=\"vx-d-block vx-w-100\">\r\n                                    <div class=\"category-name vx-fs-12 vx-paragraph-txt\" [appTooltip]=\"'Threat Analysis & Flaw Remediation During Development (IAO-04)'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Threat Analysis & Flaw Remediation During Development (IAO-04)</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"></div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"define-framework-listing-footer\">\r\n        <vui-floating-bar></vui-floating-bar>\r\n    </div>\r\n</div>",
+                template: "<div class=\"define-framework-listing\" [class.animate]=\"animation\">\r\n    <ng-container *ngIf=\"currentView==='FRAMEWORK_CATEGORY'\">\r\n\r\n  \r\n    <div class=\"define-framework-listing-head\">\r\n      <h3 class=\"define-framework-listing-title\">Select Framework</h3>\r\n    </div>\r\n  \r\n    <div *ngIf=\"true\" class=\"define-framework-listing-body\">\r\n        <div class=\"vx-d-flex vx-align-center vx-mb-2\">\r\n            <div (click)=\"changeType('REGULATIONS')\" 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\" [class.active]=\"activeFrameworkType ==='REGULATIONS'\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{frameworkCount?.regulations ?? '--'}}</span>\r\n                </div>\r\n            </div>\r\n            <div (click)=\"changeType('STANDARDS')\" 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\" [class.active]=\"activeFrameworkType ==='STANDARDS'\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{frameworkCount?.standards ??'--'}}</span>\r\n                </div>\r\n            </div>\r\n            <div (click)=\"changeType('INTERNAL_CONTROLS')\" 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\" [class.active]=\"activeFrameworkType ==='INTERNAL_CONTROLS'\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{frameworkCount?.internalControls??'--'}}</span>\r\n                </div>\r\n            </div>\r\n            <div (click)=\"changeType('OTHERS')\" 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\" [class.active]=\"activeFrameworkType ==='OTHERS'\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{frameworkCount?.others ?? '--'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"search-block\">\r\n          <i class=\"icons\">&#xe90b;</i>\r\n          <input type=\"text\" placeholder=\"Search Frameworks\" [(ngModel)]=\"searchKey\" (keyup.enter)=\"executeSearch()\"/>\r\n        </div>\r\n        <div class=\"vx-mt-2\" *ngIf=\"isMainLoader\">\r\n            <framework-loader></framework-loader>\r\n        </div>\r\n        \r\n        <ng-container *ngIf=\"!isMainLoader\">\r\n            <div class=\"vx-mt-2\">\r\n                <vui-pagination (pageChanged)=\"pageChanged($event)\" [from]=\"frameworkData?.items_from\" [to]=\"frameworkData?.items_to\" [total]=\"frameworkData?.total_items\" [totalPage]=\"frameworkData?.total_pages\" [currentPage]=\"apiFrameworkPayload?.page\"></vui-pagination>\r\n            </div>\r\n            <div class=\"define-framework-listing-table vx-mt-1\" [class.with-pagination]=\"true\">\r\n                <div class=\"table-header\">\r\n                    <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                    <div class=\"table-row\" [class.active]=\"false\">\r\n                        <div 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\">\r\n                            #\r\n                            <!-- <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\r\n                            <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate> -->\r\n                        </div>\r\n                        <div 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\">FRAMEWORKS</div>\r\n                        <div 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\"></div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"table-body\">\r\n                    <div class=\"table-item\" [class.open]=\"hideCategoryList\" *ngFor=\"let framework of frameworkData?.data;let i=index\">\r\n                        <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                        <div class=\"table-row main\" (click)=\"expandCollapseFramework(framework)\" [class.active]=\"selectedFramework?.framework_id === framework?.framework_id\">\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                                <div class=\"sr-no\" [appTooltip]=\"'1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{apiFrameworkPayload?.page | pager:i}}</div>\r\n                                <app-cs-radio [checked]=\"selectedFramework?.framework_id === framework?.framework_id\" (checkedEvent)=\"selectFramework($event,framework)\"></app-cs-radio>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\">\r\n                                <div class=\"category-name vx-fs-13 vx-label-txt\" [appTooltip]=\"framework?.framework_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{framework?.framework_name}}</div>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\">\r\n                                <button class=\"arrow-btn vx-fs-14 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\r\n                                    <i class=\"icons vx-d-flex\" (click)=\"expandCollapseFramework(framework)\">\r\n                                        <ng-container *ngIf=\"expandedFrameworkId !== framework?.framework_id\">&#xe970;</ng-container>\r\n                                        <ng-container *ngIf=\"expandedFrameworkId === framework?.framework_id\">&#xe9e8;</ng-container>\r\n                                    </i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <!-- sub table -->\r\n                        <ng-container *ngIf=\"expandedFrameworkId === framework?.framework_id\">\r\n                            <div class=\"table-row child\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                                    <div class=\"sr-no\" [appTooltip]=\"'1.1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1.1</div>\r\n                                </div>\r\n                                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\">\r\n                                    <div class=\"vx-d-block vx-w-100\">\r\n                                        <div class=\"category-name vx-fs-12 vx-paragraph-txt\" [appTooltip]=\"'Threat Analysis & Flaw Remediation During Development (IAO-04)'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Threat Analysis & Flaw Remediation During Development (IAO-04)</div>\r\n                                        <div class=\"within\">\r\n                                            <div class=\"block\">WITHIN</div>\r\n                                            <div class=\"data\" [appTooltip]=\"'Kolkata > America > South Africa'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Kolkata > America > South Africa</div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"></div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        <app-no-data *ngIf=\"false\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Frameworks Found'\"></app-no-data>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"currentView==='FRAMEWORK'\">\r\n\r\n\r\n    <div *ngIf=\"true\" class=\"define-framework-listing-body after-framework-listing\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search associated Responsibilities/ Categories within this framework\" />\r\n        </div>\r\n        <!-- <app-pagination></app-pagination> -->\r\n        <div class=\"define-framework-listing-table vx-mt-1\" [class.with-pagination]=\"true\">\r\n            <div class=\"table-header\">\r\n                <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                <div class=\"table-row\" [class.active]=\"false\">\r\n                    <div 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\">\r\n                        #\r\n                        <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\r\n                        <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate>\r\n                    </div>\r\n                    <div class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center frameworks\">FRAMEWORKS</div>\r\n                    <div class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center in-scope\">RESPONSIBILITIES IN SCOPE</div>\r\n                    <div class=\"table-column vx-fs-10 vx-fw-500 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center not-in-scope\">RESPONSIBILITIES NOT IN SCOPE</div>\r\n                    <div 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\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"table-body\">\r\n                <div class=\"table-item\" [class.open]=\"hideFrameworkList\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                    <!-- when checkbox was checked then show \"active\" class in table-row -->\r\n                    <div class=\"table-row main\" (click)=\"clickFrameworkList()\" [class.active]=\"false\">\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"'1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1</div>\r\n                            <app-cs-checkbox *ngIf=\"true\"></app-cs-checkbox>\r\n                            <app-cs-checkbox-indeterminate *ngIf=\"false\"></app-cs-checkbox-indeterminate>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center frameworks\">\r\n                            <div class=\"vx-d-block vx-w-100 vx-pr-3\">\r\n                                <div class=\"frameworks-name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Physical and environmental security'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Physical and environmental security</div>\r\n                                <div class=\"within\">\r\n                                    <div class=\"block\">WITHIN</div>\r\n                                    <div class=\"data\" [appTooltip]=\"'Kolkata > America > South Africa'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Kolkata > America > South Africa</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center in-scope\">\r\n                            <div class=\"scope vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-6 vx-d-flex vx-align-center vx-justify-center\">\r\n                                <span *ngIf=\"true\" class=\"vx-txt-blue\">45</span>\r\n                                <span *ngIf=\"false\" class=\"vx-paragraph-txt\">--</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center not-in-scope\">\r\n                            <div class=\"scope vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-6 vx-d-flex vx-align-center vx-justify-center\">\r\n                                <span *ngIf=\"true\" class=\"vx-txt-blue\">8</span>\r\n                                <span *ngIf=\"false\" class=\"vx-paragraph-txt\">--</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\">\r\n                            <button class=\"arrow-btn vx-fs-14 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\r\n                                <i class=\"icons vx-d-flex\">\r\n                                    <ng-container *ngIf=\"!hideFrameworkList\">&#xe970;</ng-container>\r\n                                    <ng-container *ngIf=\"hideFrameworkList\">&#xe9e8;</ng-container>\r\n                                </i>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <!-- sub table -->\r\n                    <ng-container *ngIf=\"hideFrameworkList\">\r\n                        <div class=\"table-row child\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                                <div class=\"sr-no\" [appTooltip]=\"'1.1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">1.1</div>\r\n                                <app-cs-checkbox></app-cs-checkbox>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category\">\r\n                                <div class=\"vx-d-block vx-w-100\">\r\n                                    <div class=\"category-name vx-fs-12 vx-paragraph-txt\" [appTooltip]=\"'Threat Analysis & Flaw Remediation During Development (IAO-04)'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Threat Analysis & Flaw Remediation During Development (IAO-04)</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center action\"></div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n    <div class=\"define-framework-listing-footer\">\r\n        <vui-floating-bar (closeEvent)=\"nextHandler()\"></vui-floating-bar>\r\n    </div>\r\n</div>",
                 styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .define-framework-listing{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .define-framework-listing.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;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-indeterminate .checkbox-item,::ng-deep .define-framework-listing-table .table-header .table-row .table-column.serial app-cs-checkbox .checkbox-item{position:absolute;top:0;left:0}::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-indeterminate .checkbox-item .checkmark,::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 .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .define-framework-listing-table .table-header .table-row.active .table-column.serial app-cs-checkbox,::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:hover .table-column.serial app-cs-radio{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.active .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-indeterminate,::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:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .define-framework-listing-table .table-body .table-item .table-row:hover .table-column.serial app-cs-radio{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;-ms-writing-mode:tb-lr;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-indeterminate .checkbox-item,::ng-deep .define-framework-listing-table .table-row .table-column.serial app-cs-checkbox .checkbox-item{position:absolute;top:0;left:0}::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-indeterminate .checkbox-item .checkboxmark,::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 .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}"]
             },] }
 ];
-DefineFrameworkListingComponent.ctorParameters = () => [];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmaW5lLWZyYW1ld29yay1saXN0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3dvcmtmbG93LXByb2dyYW0vY3JlYXRlLXByb2dyYW0tdWkvZGVmaW5lLWZyYW1ld29yay1saXN0aW5nL2RlZmluZS1mcmFtZXdvcmstbGlzdGluZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQU9sRCxNQUFNLE9BQU8sK0JBQStCO0lBSzFDO1FBSkEsY0FBUyxHQUFHLElBQUksQ0FBQztRQUNqQixxQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFDekIsc0JBQWlCLEdBQUcsS0FBSyxDQUFDO0lBRVYsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNWLENBQUM7SUFFRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUM7SUFDakQsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbkQsQ0FBQzs7O1lBekJGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsOEJBQThCO2dCQUN4Qyx1cmVBQXdEOzthQUV6RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1kZWZpbmUtZnJhbWV3b3JrLWxpc3RpbmcnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kZWZpbmUtZnJhbWV3b3JrLWxpc3RpbmcuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2RlZmluZS1mcmFtZXdvcmstbGlzdGluZy5jb21wb25lbnQubGVzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEZWZpbmVGcmFtZXdvcmtMaXN0aW5nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBhbmltYXRpb24gPSB0cnVlO1xyXG4gIGhpZGVDYXRlZ29yeUxpc3QgPSBmYWxzZTtcclxuICBoaWRlRnJhbWV3b3JrTGlzdCA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuYW5pbWF0aW9uID0gdHJ1ZTtcclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLmFuaW1hdGlvbiA9IGZhbHNlO1xyXG4gICAgfSwgMzAwKTtcclxuICB9XHJcblxyXG4gIGNsaWNrQ2F0ZWdvcnlMaXN0KCkge1xyXG4gICAgdGhpcy5oaWRlQ2F0ZWdvcnlMaXN0ID0gIXRoaXMuaGlkZUNhdGVnb3J5TGlzdDtcclxuICB9XHJcblxyXG4gIGNsaWNrRnJhbWV3b3JrTGlzdCgpIHtcclxuICAgIHRoaXMuaGlkZUZyYW1ld29ya0xpc3QgPSAhdGhpcy5oaWRlRnJhbWV3b3JrTGlzdDtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==
+DefineFrameworkListingComponent.ctorParameters = () => [
+    { type: FrameworkService }
+];
+DefineFrameworkListingComponent.propDecorators = {
+    cancel: [{ type: Output }],
+    next: [{ type: Output }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmaW5lLWZyYW1ld29yay1saXN0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3dvcmtmbG93LXByb2dyYW0vY3JlYXRlLXByb2dyYW0tdWkvZGVmaW5lLWZyYW1ld29yay1saXN0aW5nL2RlZmluZS1mcmFtZXdvcmstbGlzdGluZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXhFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBT3ZELE1BQU0sT0FBTywrQkFBK0I7SUFLMUMsWUFBb0IsZ0JBQWlDO1FBQWpDLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBaUI7UUFKM0MsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDNUIsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDcEMsY0FBUyxHQUFHLElBQUksQ0FBQztRQWFqQixpQkFBWSxHQUFHLElBQUksQ0FBQztRQUNwQixtQkFBYyxHQUFNLElBQUksQ0FBQztRQVMzQixjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2Isd0JBQW1CLEdBQUc7WUFDcEIsSUFBSSxFQUFDLENBQUM7WUFDTixNQUFNLEVBQUMsRUFBRTtZQUNULElBQUksRUFBQyxDQUFDO1NBRU4sQ0FBQTtRQUNGLGdCQUFXLEdBQXNDLG9CQUFvQixDQUFDO1FBQ3RFLHdCQUFtQixHQUErRCxhQUFhLENBQUM7UUFFaEcsbUJBQWMsR0FBRztZQUNmLGFBQWEsRUFBQyxDQUFDO1lBQ2YsV0FBVyxFQUFDLENBQUM7WUFDYixtQkFBbUIsRUFBQyxDQUFDO1lBQ3JCLFFBQVEsRUFBQyxDQUFDO1NBQ1gsQ0FBQTtRQW1CRCxrQkFBYSxHQUFPLEVB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LE1BQUEsR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE1BQU0sMENBQUUsT0FBTyxFQUFDO1lBQ3RCLElBQUksQ0FBQyxpQkFBaUIsR0FBSSxTQUFTLENBQUM7WUFDcEMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQTtTQUNwQztJQUNILENBQUM7SUFHRCx1QkFBdUIsQ0FBQyxTQUFhO1FBQ25DLElBQUcsSUFBSSxDQUFDLG1CQUFtQixNQUFLLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxZQUFZLENBQUEsRUFBQztZQUN0RCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsRUFBRSxDQUFBO1NBQzlCO2FBQUk7WUFDSCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsU0FBUyxhQUFULFNBQVMsdUJBQVQsU0FBUyxDQUFFLFlBQVksQ0FBQztTQUNwRDtJQUNILENBQUM7OztZQTVHRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDhCQUE4QjtnQkFDeEMsd3JoQkFBd0Q7O2FBRXpEOzs7WUFOUSxnQkFBZ0I7OztxQkFRdEIsTUFBTTttQkFDTixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiXHJcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgRnJhbWV3b3JrU2VydmljZSB9IGZyb20gJy4vZnJhbWV3b3JrLnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtZGVmaW5lLWZyYW1ld29yay1saXN0aW5nJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZGVmaW5lLWZyYW1ld29yay1saXN0aW5nLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9kZWZpbmUtZnJhbWV3b3JrLWxpc3RpbmcuY29tcG9uZW50Lmxlc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGVmaW5lRnJhbWV3b3JrTGlzdGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQE91dHB1dCgpIGNhbmNlbCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgbmV4dCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBhbmltYXRpb24gPSB0cnVlO1xyXG4gIGZyYW1ld29ya0xpc3RTdWJzY3JpcHRpb24gITpTdWJzY3JpcHRpb247XHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBmcmFtZXdvcmtTZXJ2aWNlOkZyYW1ld29ya1NlcnZpY2UpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuYW5pbWF0aW9uID0gdHJ1ZTtcclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLmFuaW1hdGlvbiA9IGZhbHNlO1xyXG4gICAgfSwgMzAwKTtcclxuICAgIHRoaXMuZmV0Y2hGcmFtZXdvcmtDb3VudCgpO1xyXG4gICAgdGhpcy5mZXRjaEZyYW1ld29ya0NhdGVnb3J5TGlzdCgpO1xyXG4gIH1cclxuXHJcbiAgaXNNYWluTG9hZGVyID0gdHJ1ZTtcclxuICBmcmFtZXdvcmtDb3VudDphbnk9IG51bGw7XHJcbiAgZmV0Y2hGcmFtZXdvcmtDb3VudCgpe1xyXG4gICAgdGhpcy5mcmFtZXdvcmtTZXJ2aWNlLmZldGNoRnJhbWV3b3JrQ291bnQoKS5zdWJzY3JpYmUoe1xyXG4gICAgICBuZXh0OihyZXM6YW55KT0+e3RoaXMuZnJhbWV3b3JrQ291bnQgPSByZXN9LFxyXG4gICAgICBlcnJvcjooZXJyOmFueSk9PntcclxuICAgICAgICAvL2hhbmRsZSBlcnJvciBoZXJlXHJcbiAgICAgIH1cclxuICAgIH0pXHJcbiAgfVxyXG5zZWFyY2hLZXkgPSAnJztcclxuICBhcGlGcmFtZXdvcmtQYXlsb2FkID0ge1xyXG4gICAgcGFnZToxLFxyXG4gICAgc2VhcmNoOicnLFxyXG4gICAgdHlwZToxLFxyXG5cclxuICAgfVxyXG4gIGN1cnJlbnRWaWV3IDogJ0ZSQU1FV09SS19DQVRFR09SWScgfCAnRlJBTUVXT1JLJz0nRlJBTUVXT1JLX0NBVEVHT1JZJztcclxuICBhY3RpdmVGcmFtZXdvcmtUeXBlIDonUkVHVUxBVElPTlMnIHwgJ1NUQU5EQVJEUycgfCAnSU5URVJOQUxfQ09OVFJPTFMnIHwnT1RIRVJTJz0gJ1JFR1VMQVRJT05TJztcclxuXHJcbiAgZnJhbWV3b3JrVHlwZXMgPSB7XHJcbiAgICAnUkVHVUxBVElPTlMnOjEsXHJcbiAgICAnU1RBTkRBUkRTJzoyLFxyXG4gICAgJ0lOVEVSTkFMX0NPTlRST0xTJzozLFxyXG4gICAgJ09USEVSUyc6MFxyXG4gIH1cclxuXHJcbiAgbmV4dEhhbmRsZXIoKXtcclxuICAgIGlmKHRoaXMuY3VycmVudFZpZXcgPT09ICdGUkFNRVdPUktfQ0FURUdPUlknKXtcclxuICAgICAgdGhpcy5jdXJyZW50VmlldyA9ICdGUkFNRVdPUksnO1xyXG4gICAgfVxyXG4gICAgZWxzZXtcclxuICAgICAgdGhpcy5uZXh0LmVtaXQoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNhbmNlbEhhbmRsZXIoKXtcclxuICAgIGlmKHRoaXMuY3VycmVudFZpZXcgPT09ICdGUkFNRVdPUksnKXtcclxuICAgICAgdGhpcy5jdXJyZW50VmlldyA9ICdGUkFNRVdPUktfQ0FURUdPUlknO1xyXG4gICAgfWVsc2V7XHJcbiAgICAgIHRoaXMuY2FuY2VsLmVtaXQoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGZyYW1ld29ya0RhdGE6YW55ID0gW11cclxuICBjaGFuZ2VUeXBlKHR5cGU6J1JFR1VMQVRJT05TJyB8ICdTVEFOREFSRFMnIHwgJ0lOVEVSTkFMX0NPTlRST0xTJyB8J09USEVSUycpe1xyXG4gICAgdGhpcy5hY3RpdmVGcmFtZXdvcmtUeXBlID0gdHlwZTtcclxuICAgIHRoaXMuYXBpRnJhbWV3b3JrUGF5bG9hZC50eXBlID0gdGhpcy5mcmFtZXdvcmtUeXBlc1t0eXBlXTtcclxuICAgIHRoaXMuZnJhbWV3b3JrTGlzdFN1YnNjcmlwdGlvbiA/ICB0aGlzLmZyYW1ld29ya0xpc3RTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKSA6bnVsbDtcclxuICAgIHRoaXMuZmV0Y2hGcmFtZXdvcmtDYXRlZ29yeUxpc3QoKVxyXG4gIH1cclxuXHJcbiAgZXhlY3V0ZVNlYXJjaCgpe1xyXG4gICAgdGhpcy5hcGlGcmFtZXdvcmtQYXlsb2FkLnBhZ2U9MTtcclxuICAgIHRoaXMuYXBpRnJhbWV3b3JrUGF5bG9hZC5zZWFyY2ggPSB0aGlzLnNlYXJjaEtleTtcclxuICAgIHRoaXMuZmV0Y2hGcmFtZXdvcmtDYXRlZ29yeUxpc3QoKTtcclxuICB9XHJcblxyXG4gIHBhZ2VDaGFuZ2VkKGV2dDphbnkpe1xyXG5cclxuICAgIHRoaXMuYXBpRnJhbWV3b3JrUGF5bG9hZC5wYWdlID0gZXZ0O1xyXG4gICAgdGhpcy5mZXRjaEZyYW1ld29ya0NhdGVnb3J5TGlzdCgpXHJcbiAgfVxyXG5cclxuXHJcbiAgZmV0Y2hGcmFtZXdvcmtDYXRlZ29yeUxpc3QoKXtcclxuICAgIHRoaXMuaXNNYWluTG9hZGVyID0gdHJ1ZTtcclxuICAgIHRoaXMuZnJhbWV3b3JrTGlzdFN1YnNjcmlwdGlvbiA9IHRoaXMuZnJhbWV3b3JrU2VydmljZS5mZXRjaEZyYW1ld29ya0luQ2F0ZWdvcnkodGhpcy5hcGlGcmFtZXdvcmtQYXlsb2FkKS5zdWJzY3JpYmUoe1xyXG4gICAgbmV4dDoocmVzOmFueSk9Pntjb25zb2xlLmxvZyhcInJlc3BvbnNlXCIscmVzKTt0aGlzLmZyYW1ld29ya0RhdGEgPSByZXMgOyB0aGlzLmlzTWFpbkxvYWRlciA9IGZhbHNlfSxcclxuICAgIGVycm9yOigpPT57dGhpcy5pc01haW5Mb2FkZXIgPSBmYWxzZX1cclxuICB9KVxyXG4gIH1cclxuICBzZWxlY3RlZEZyYW1ld29yayAhOmFueVxyXG4gIHNlbGVjdEZyYW1ld29yayhldnQ6YW55LGZyYW1ld29yazphbnkpe1xyXG4gICAgaWYoZXZ0Py50YXJnZXQ/LmNoZWNrZWQpe1xyXG4gICAgICB0aGlzLnNlbGVjdGVkRnJhbWV3b3JrICA9IGZyYW1ld29yaztcclxuICAgICAgY29uc29sZS5sb2codGhpcy5zZWxlY3RlZEZyYW1ld29yaylcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGV4cGFuZGVkRnJhbWV3b3JrSWQ6YW55ID0gJyc7XHJcbiAgZXhwYW5kQ29sbGFwc2VGcmFtZXdvcmsoZnJhbWV3b3JrOmFueSl7XHJcbiAgICBpZih0aGlzLmV4cGFuZGVkRnJhbWV3b3JrSWQgPT09IGZyYW1ld29yaz8uZnJhbWV3b3JrX2lkKXtcclxuICAgICAgdGhpcy5leHBhbmRlZEZyYW1ld29ya0lkID0gJydcclxuICAgIH1lbHNle1xyXG4gICAgICB0aGlzLmV4cGFuZGVkRnJhbWV3b3JrSWQgPSBmcmFtZXdvcms/LmZyYW1ld29ya19pZDtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiJdfQ==