vcomply-workflow-engine 3.1.30 → 3.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/more-option/more-option.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/table-card-loader/table-card-loader.component.mjs +3 -3
- package/esm2020/lib/workflow/grc-object/grc-object-container/grc-object-container.component.mjs +9 -3
- package/esm2020/lib/workflow/shared/components/risk-category-risk-listing/risk-category-risk-listing.component.mjs +3 -3
- package/esm2020/lib/workflow-risk/workflow-risk.component.mjs +9 -5
- package/fesm2015/vcomply-workflow-engine.mjs +30 -20
- package/fesm2015/vcomply-workflow-engine.mjs.map +1 -1
- package/fesm2020/vcomply-workflow-engine.mjs +22 -12
- package/fesm2020/vcomply-workflow-engine.mjs.map +1 -1
- package/lib/workflow/grc-object/grc-object-container/grc-object-container.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3205,10 +3205,10 @@ class TableCardLoaderComponent {
|
|
|
3205
3205
|
ngOnInit() { }
|
|
3206
3206
|
}
|
|
3207
3207
|
TableCardLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableCardLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3208
|
-
TableCardLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableCardLoaderComponent, isStandalone: true, selector: "app-table-card-loader", ngImport: i0, template: "<div class=\"table-card-area vx-d-flex vx-align-center vx-mb-2\">\n <div *ngFor=\"let data of [1,1,1,1]\" class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-mr-1 vx-w-100\">\n <div class=\"left vx-d-block vx-w-100\">\n <div class=\"label vx-d-flex vx-align-center\">\n <div class=\"loader\"></div>\n </div>\n </div>\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center loader\"></span>\n </div>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .table-card-area .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .table-card-area .vx-table-card .left .label .loader{width:100%}::ng-deep .table-card-area .vx-table-card .right span{width:1.75rem;height:1.75rem}.loader{background:#f1f1f1!important;height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
3208
|
+
TableCardLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableCardLoaderComponent, isStandalone: true, selector: "app-table-card-loader", ngImport: i0, template: "<div class=\"table-card-area vx-d-flex vx-align-center vx-mb-2\">\r\n <div *ngFor=\"let data of [1,1,1,1]\" class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-mr-1 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 <div class=\"loader\"></div>\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 loader\"></span>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .table-card-area .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .table-card-area .vx-table-card .left .label .loader{width:100%}::ng-deep .table-card-area .vx-table-card .right span{width:1.75rem;height:1.75rem}.loader{background:#f1f1f1!important;height:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
3209
3209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableCardLoaderComponent, decorators: [{
|
|
3210
3210
|
type: Component,
|
|
3211
|
-
args: [{ selector: 'app-table-card-loader', standalone: true, imports: [CommonModule], template: "<div class=\"table-card-area vx-d-flex vx-align-center vx-mb-2\">\n <div *ngFor=\"let data of [1,1,1,1]\" class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-mr-1 vx-w-100\">\n <div class=\"left vx-d-block vx-w-100\">\n <div class=\"label vx-d-flex vx-align-center\">\n <div class=\"loader\"></div>\n </div>\n </div>\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center loader\"></span>\n </div>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .table-card-area .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .table-card-area .vx-table-card .left .label .loader{width:100%}::ng-deep .table-card-area .vx-table-card .right span{width:1.75rem;height:1.75rem}.loader{background:#f1f1f1!important;height:.5rem}\n"] }]
|
|
3211
|
+
args: [{ selector: 'app-table-card-loader', standalone: true, imports: [CommonModule], template: "<div class=\"table-card-area vx-d-flex vx-align-center vx-mb-2\">\r\n <div *ngFor=\"let data of [1,1,1,1]\" class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-mr-1 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 <div class=\"loader\"></div>\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 loader\"></span>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .table-card-area .vx-table-card:last-of-type{margin-right:0!important}::ng-deep .table-card-area .vx-table-card .left .label .loader{width:100%}::ng-deep .table-card-area .vx-table-card .right span{width:1.75rem;height:1.75rem}.loader{background:#f1f1f1!important;height:.5rem}\n"] }]
|
|
3212
3212
|
}], ctorParameters: function () { return []; } });
|
|
3213
3213
|
|
|
3214
3214
|
class GrcObjectListComponent {
|
|
@@ -4091,7 +4091,7 @@ class RiskCategoryRiskListingComponent {
|
|
|
4091
4091
|
}
|
|
4092
4092
|
}
|
|
4093
4093
|
RiskCategoryRiskListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RiskCategoryRiskListingComponent, deps: [{ token: GrcService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4094
|
-
RiskCategoryRiskListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RiskCategoryRiskListingComponent, isStandalone: true, selector: "app-risk-category-risk-listing", inputs: { selectedTab: "selectedTab", selectedCatAndRiskData: ["selectedCatAndRisk", "selectedCatAndRiskData"] }, outputs: { closeUsersList: "closeUsersList" }, viewQueries: [{ propertyName: "responsibilityListingComponent", first: true, predicate: ["dataListing"], descendants: true }], ngImport: i0, template: "<div class=\"risk-category-risk-listing\" [class.animate]=\"animation\">\r\n <div class=\"risk-category-risk-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risks</h3></div>\r\n <div class=\"risk-category-risk-listing-body\">\r\n <app-table-card class=\"vx-w-100\" [tableCard]=\"tableCard\" [singleSelectedText]=\"'Category Selected'\" [multipleSelectedText]=\"'Categories Selected'\" (setSelectedTab)=\"setSelectedTab($event)\" [selectedTab]=\"1\"></app-table-card>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\" placeholder=\"Search Risk Categories\" />\r\n </div>\r\n <div class=\"risk-category-risk-listing-body-inner vx-mb-2 vx-d-flex\" [class.with-noData]=\"(!isCategoryLoader && !categoriesList?.length)\">\r\n <ng-container *ngIf=\"isCategoryLoader || categoriesList?.length\">\r\n <div class=\"inner-item-left vx-pr-2\">\r\n <app-grc-category-listing *ngIf=\"!isCategoryLoader\" [headerText]=\"'Risk Categories'\" [categories]=\"categoriesList\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [tableCard]=\"tableCard\" [currentPage]=\"categoryCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedCategoryIds\" (activeSelectedCategory)=\"activeSelectedCategory($event)\" (onCategoryPageChange)=\"onCategoryPageChange($event)\"></app-grc-category-listing>\r\n <app-list-loader *ngIf=\"isCategoryLoader\"></app-list-loader>\r\n </div>\r\n <div class=\"inner-item-right\">\r\n <app-grc-responsibility-listing #dataListing *ngIf=\"!isRiskLoader && !isCategoryLoader && risksList?.length\" [headerText]=\"'Risk Name'\" [dataList]=\"risksList\" [activeCategory]=\"activeCategory\" [selectedCatAndRisk]=\"selectedCatAndRisk\" (changeSelectedCatAndRisk)=\"changeSelectedCatAndRisk($event)\" [currentPage]=\"riskCurrentPage\" [perPageLimit]=\"activeCategory?.categoryRiskLimit\" [totalListData]=\"activeCategory?.categoryRiskCount\" [totalPages]=\"getTotalRiskPage()\" (getUpdatedDataList)=\"getUpdatedDataList($event)\" ></app-grc-responsibility-listing>\r\n <app-list-loader *ngIf=\"isRiskLoader || isCategoryLoader\"></app-list-loader>\r\n <app-no-data *ngIf=\"risksList?.length === 0 && !(isRiskLoader || isCategoryLoader)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n <app-no-data *ngIf=\"(!isCategoryLoader && !categoriesList?.length)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n <app-floating-bar [selectedData]=\"selectedRisks?.length ? selectedRisks : []\" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'name'\" [singularText]=\"'
|
|
4094
|
+
RiskCategoryRiskListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RiskCategoryRiskListingComponent, isStandalone: true, selector: "app-risk-category-risk-listing", inputs: { selectedTab: "selectedTab", selectedCatAndRiskData: ["selectedCatAndRisk", "selectedCatAndRiskData"] }, outputs: { closeUsersList: "closeUsersList" }, viewQueries: [{ propertyName: "responsibilityListingComponent", first: true, predicate: ["dataListing"], descendants: true }], ngImport: i0, template: "<div class=\"risk-category-risk-listing\" [class.animate]=\"animation\">\r\n <div class=\"risk-category-risk-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risks</h3></div>\r\n <div class=\"risk-category-risk-listing-body\">\r\n <app-table-card class=\"vx-w-100\" [tableCard]=\"tableCard\" [singleSelectedText]=\"'Category Selected'\" [multipleSelectedText]=\"'Categories Selected'\" (setSelectedTab)=\"setSelectedTab($event)\" [selectedTab]=\"1\"></app-table-card>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\" placeholder=\"Search Risk Categories\" />\r\n </div>\r\n <div class=\"risk-category-risk-listing-body-inner vx-mb-2 vx-d-flex\" [class.with-noData]=\"(!isCategoryLoader && !categoriesList?.length)\">\r\n <ng-container *ngIf=\"isCategoryLoader || categoriesList?.length\">\r\n <div class=\"inner-item-left vx-pr-2\">\r\n <app-grc-category-listing *ngIf=\"!isCategoryLoader\" [headerText]=\"'Risk Categories'\" [categories]=\"categoriesList\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [tableCard]=\"tableCard\" [currentPage]=\"categoryCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedCategoryIds\" (activeSelectedCategory)=\"activeSelectedCategory($event)\" (onCategoryPageChange)=\"onCategoryPageChange($event)\"></app-grc-category-listing>\r\n <app-list-loader *ngIf=\"isCategoryLoader\"></app-list-loader>\r\n </div>\r\n <div class=\"inner-item-right\">\r\n <app-grc-responsibility-listing #dataListing *ngIf=\"!isRiskLoader && !isCategoryLoader && risksList?.length\" [headerText]=\"'Risk Name'\" [dataList]=\"risksList\" [activeCategory]=\"activeCategory\" [selectedCatAndRisk]=\"selectedCatAndRisk\" (changeSelectedCatAndRisk)=\"changeSelectedCatAndRisk($event)\" [currentPage]=\"riskCurrentPage\" [perPageLimit]=\"activeCategory?.categoryRiskLimit\" [totalListData]=\"activeCategory?.categoryRiskCount\" [totalPages]=\"getTotalRiskPage()\" (getUpdatedDataList)=\"getUpdatedDataList($event)\" ></app-grc-responsibility-listing>\r\n <app-list-loader *ngIf=\"isRiskLoader || isCategoryLoader\"></app-list-loader>\r\n <app-no-data *ngIf=\"risksList?.length === 0 && !(isRiskLoader || isCategoryLoader)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n <app-no-data *ngIf=\"(!isCategoryLoader && !categoriesList?.length)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n <app-floating-bar [selectedData]=\"selectedRisks?.length ? selectedRisks : []\" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'name'\" [singularText]=\"'Risk selected'\" [pluralText]=\"'Risks selected'\" (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .risk-category-risk-listing{position:fixed;inset:0 30px 0 0}::ng-deep .risk-category-risk-listing:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .risk-category-risk-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .risk-category-risk-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-risk-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .risk-category-risk-listing-body .search-block{position:relative}::ng-deep .risk-category-risk-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-risk-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .risk-category-risk-listing-body .search-block input::placeholder{color:#747576}::ng-deep .risk-category-risk-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .risk-category-risk-listing-body-inner{height:calc(100vh - 17.5rem)}::ng-deep .risk-category-risk-listing-body-inner.with-noData{align-items:center;justify-content:center}::ng-deep .risk-category-risk-listing-body-inner .inner-item-left{width:25%}::ng-deep .risk-category-risk-listing-body-inner .inner-item-right{width:75%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: FormgroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: TableCardComponent, selector: "app-table-card", inputs: ["singleSelectedText", "multipleSelectedText", "selectedTab", "tableCard"], outputs: ["setSelectedTab"] }, { kind: "component", type: GrcCategoryListingComponent, selector: "app-grc-category-listing", inputs: ["tableCard", "headerText", "currentPage", "selectedTabIndex", "selectedCatAndRisk", "selectedCategoryIds", "categories"], outputs: ["activeSelectedCategory", "onCategoryPageChange"] }, { kind: "component", type: GrcResponsibilityListingComponent, selector: "app-grc-responsibility-listing", inputs: ["tableCard", "activeCategory", "headerText", "currentPage", "perPageLimit", "totalListData", "totalPages", "selectedListData", "selectedListDataIds", "selectedCatAndRisk", "dataList"], outputs: ["getUpdatedDataList", "changeSelectedCatAndRisk"] }, { kind: "ngmodule", type: ListLoaderModule }, { kind: "component", type: ListLoaderComponent, selector: "app-list-loader" }, { kind: "ngmodule", type: NoDataModule }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }] });
|
|
4095
4095
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RiskCategoryRiskListingComponent, decorators: [{
|
|
4096
4096
|
type: Component,
|
|
4097
4097
|
args: [{ selector: 'app-risk-category-risk-listing', standalone: true, imports: [
|
|
@@ -4106,7 +4106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4106
4106
|
GrcResponsibilityListingComponent,
|
|
4107
4107
|
ListLoaderModule,
|
|
4108
4108
|
NoDataModule,
|
|
4109
|
-
], inputs: ['selectedTab'], outputs: ['closeUsersList'], template: "<div class=\"risk-category-risk-listing\" [class.animate]=\"animation\">\r\n <div class=\"risk-category-risk-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risks</h3></div>\r\n <div class=\"risk-category-risk-listing-body\">\r\n <app-table-card class=\"vx-w-100\" [tableCard]=\"tableCard\" [singleSelectedText]=\"'Category Selected'\" [multipleSelectedText]=\"'Categories Selected'\" (setSelectedTab)=\"setSelectedTab($event)\" [selectedTab]=\"1\"></app-table-card>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\" placeholder=\"Search Risk Categories\" />\r\n </div>\r\n <div class=\"risk-category-risk-listing-body-inner vx-mb-2 vx-d-flex\" [class.with-noData]=\"(!isCategoryLoader && !categoriesList?.length)\">\r\n <ng-container *ngIf=\"isCategoryLoader || categoriesList?.length\">\r\n <div class=\"inner-item-left vx-pr-2\">\r\n <app-grc-category-listing *ngIf=\"!isCategoryLoader\" [headerText]=\"'Risk Categories'\" [categories]=\"categoriesList\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [tableCard]=\"tableCard\" [currentPage]=\"categoryCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedCategoryIds\" (activeSelectedCategory)=\"activeSelectedCategory($event)\" (onCategoryPageChange)=\"onCategoryPageChange($event)\"></app-grc-category-listing>\r\n <app-list-loader *ngIf=\"isCategoryLoader\"></app-list-loader>\r\n </div>\r\n <div class=\"inner-item-right\">\r\n <app-grc-responsibility-listing #dataListing *ngIf=\"!isRiskLoader && !isCategoryLoader && risksList?.length\" [headerText]=\"'Risk Name'\" [dataList]=\"risksList\" [activeCategory]=\"activeCategory\" [selectedCatAndRisk]=\"selectedCatAndRisk\" (changeSelectedCatAndRisk)=\"changeSelectedCatAndRisk($event)\" [currentPage]=\"riskCurrentPage\" [perPageLimit]=\"activeCategory?.categoryRiskLimit\" [totalListData]=\"activeCategory?.categoryRiskCount\" [totalPages]=\"getTotalRiskPage()\" (getUpdatedDataList)=\"getUpdatedDataList($event)\" ></app-grc-responsibility-listing>\r\n <app-list-loader *ngIf=\"isRiskLoader || isCategoryLoader\"></app-list-loader>\r\n <app-no-data *ngIf=\"risksList?.length === 0 && !(isRiskLoader || isCategoryLoader)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n <app-no-data *ngIf=\"(!isCategoryLoader && !categoriesList?.length)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n <app-floating-bar [selectedData]=\"selectedRisks?.length ? selectedRisks : []\" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'name'\" [singularText]=\"'
|
|
4109
|
+
], inputs: ['selectedTab'], outputs: ['closeUsersList'], template: "<div class=\"risk-category-risk-listing\" [class.animate]=\"animation\">\r\n <div class=\"risk-category-risk-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Risks</h3></div>\r\n <div class=\"risk-category-risk-listing-body\">\r\n <app-table-card class=\"vx-w-100\" [tableCard]=\"tableCard\" [singleSelectedText]=\"'Category Selected'\" [multipleSelectedText]=\"'Categories Selected'\" (setSelectedTab)=\"setSelectedTab($event)\" [selectedTab]=\"1\"></app-table-card>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\" placeholder=\"Search Risk Categories\" />\r\n </div>\r\n <div class=\"risk-category-risk-listing-body-inner vx-mb-2 vx-d-flex\" [class.with-noData]=\"(!isCategoryLoader && !categoriesList?.length)\">\r\n <ng-container *ngIf=\"isCategoryLoader || categoriesList?.length\">\r\n <div class=\"inner-item-left vx-pr-2\">\r\n <app-grc-category-listing *ngIf=\"!isCategoryLoader\" [headerText]=\"'Risk Categories'\" [categories]=\"categoriesList\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [tableCard]=\"tableCard\" [currentPage]=\"categoryCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedCategoryIds\" (activeSelectedCategory)=\"activeSelectedCategory($event)\" (onCategoryPageChange)=\"onCategoryPageChange($event)\"></app-grc-category-listing>\r\n <app-list-loader *ngIf=\"isCategoryLoader\"></app-list-loader>\r\n </div>\r\n <div class=\"inner-item-right\">\r\n <app-grc-responsibility-listing #dataListing *ngIf=\"!isRiskLoader && !isCategoryLoader && risksList?.length\" [headerText]=\"'Risk Name'\" [dataList]=\"risksList\" [activeCategory]=\"activeCategory\" [selectedCatAndRisk]=\"selectedCatAndRisk\" (changeSelectedCatAndRisk)=\"changeSelectedCatAndRisk($event)\" [currentPage]=\"riskCurrentPage\" [perPageLimit]=\"activeCategory?.categoryRiskLimit\" [totalListData]=\"activeCategory?.categoryRiskCount\" [totalPages]=\"getTotalRiskPage()\" (getUpdatedDataList)=\"getUpdatedDataList($event)\" ></app-grc-responsibility-listing>\r\n <app-list-loader *ngIf=\"isRiskLoader || isCategoryLoader\"></app-list-loader>\r\n <app-no-data *ngIf=\"risksList?.length === 0 && !(isRiskLoader || isCategoryLoader)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n <app-no-data *ngIf=\"(!isCategoryLoader && !categoriesList?.length)\" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n <app-floating-bar [selectedData]=\"selectedRisks?.length ? selectedRisks : []\" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'name'\" [singularText]=\"'Risk selected'\" [pluralText]=\"'Risks selected'\" (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .risk-category-risk-listing{position:fixed;inset:0 30px 0 0}::ng-deep .risk-category-risk-listing:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .risk-category-risk-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .risk-category-risk-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .risk-category-risk-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .risk-category-risk-listing-body .search-block{position:relative}::ng-deep .risk-category-risk-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .risk-category-risk-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .risk-category-risk-listing-body .search-block input::placeholder{color:#747576}::ng-deep .risk-category-risk-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .risk-category-risk-listing-body-inner{height:calc(100vh - 17.5rem)}::ng-deep .risk-category-risk-listing-body-inner.with-noData{align-items:center;justify-content:center}::ng-deep .risk-category-risk-listing-body-inner .inner-item-left{width:25%}::ng-deep .risk-category-risk-listing-body-inner .inner-item-right{width:75%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
|
|
4110
4110
|
}], ctorParameters: function () { return [{ type: GrcService }]; }, propDecorators: { selectedCatAndRiskData: [{
|
|
4111
4111
|
type: Input,
|
|
4112
4112
|
args: ['selectedCatAndRisk']
|
|
@@ -5663,6 +5663,7 @@ class GrcObjectContainerComponent {
|
|
|
5663
5663
|
this.updateGRCObject();
|
|
5664
5664
|
return;
|
|
5665
5665
|
}
|
|
5666
|
+
this.grcPayload.owners = this.getOwnersExceptDefault(this.grcPayload.owners);
|
|
5666
5667
|
this.apiService.addGRCObject(this.grcPayload).subscribe({
|
|
5667
5668
|
next: (data) => {
|
|
5668
5669
|
this.showSmiley = true;
|
|
@@ -5791,17 +5792,18 @@ class GrcObjectContainerComponent {
|
|
|
5791
5792
|
this.selectedRisks = [];
|
|
5792
5793
|
this.selectedCategories = [];
|
|
5793
5794
|
selectedData.forEach((item) => {
|
|
5794
|
-
var _a, _b;
|
|
5795
|
+
var _a, _b, _c, _d;
|
|
5795
5796
|
riskCategoryPayload.push({
|
|
5796
|
-
category_id: [(_a = item === null || item === void 0 ? void 0 : item.category) === null || _a === void 0 ? void 0 : _a.category_id],
|
|
5797
|
-
risk_ids: (
|
|
5797
|
+
category_id: [(_b = (_a = item === null || item === void 0 ? void 0 : item.category) === null || _a === void 0 ? void 0 : _a.category_id) !== null && _b !== void 0 ? _b : []],
|
|
5798
|
+
risk_ids: (_c = item === null || item === void 0 ? void 0 : item.risks) === null || _c === void 0 ? void 0 : _c.map((risk) => risk === null || risk === void 0 ? void 0 : risk.RiskId),
|
|
5798
5799
|
});
|
|
5799
|
-
this.selectedRisks.push(...item === null || item === void 0 ? void 0 : item.risks);
|
|
5800
|
+
(_d = this.selectedRisks) === null || _d === void 0 ? void 0 : _d.push(...item === null || item === void 0 ? void 0 : item.risks);
|
|
5800
5801
|
this.selectedCategories.push(item === null || item === void 0 ? void 0 : item.category);
|
|
5801
5802
|
});
|
|
5802
5803
|
return riskCategoryPayload;
|
|
5803
5804
|
}
|
|
5804
5805
|
updateGRCObject() {
|
|
5806
|
+
this.grcPayload.owners = this.getOwnersExceptDefault(this.grcPayload.owners);
|
|
5805
5807
|
this.apiService.updateGRCObject(this.grcPayload, this.ID).subscribe({
|
|
5806
5808
|
next: (data) => {
|
|
5807
5809
|
this.showSmiley = true;
|
|
@@ -5885,6 +5887,10 @@ class GrcObjectContainerComponent {
|
|
|
5885
5887
|
this.listObject.RISK_CATEGORY.selectedData = updatedData;
|
|
5886
5888
|
return this.getRiskCategoryPayload(updatedData);
|
|
5887
5889
|
}
|
|
5890
|
+
getOwnersExceptDefault(users) {
|
|
5891
|
+
const usersId = users.filter((user) => !this.disabledIds.includes(user));
|
|
5892
|
+
return usersId || [];
|
|
5893
|
+
}
|
|
5888
5894
|
}
|
|
5889
5895
|
GrcObjectContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GrcObjectContainerComponent, deps: [{ token: GrcService }, { token: ResponsibilityService }, { token: AuthService }, { token: UiKitService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5890
5896
|
GrcObjectContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GrcObjectContainerComponent, selector: "lib-grc-object-container", inputs: { grcType: "grcType", MODE: "MODE", ID: "ID" }, outputs: { populateOption: "populateOption", pickerChanged: "pickerChanged", closeWorkflow: "closeWorkflow", disconnectRefresh: "disconnectRefresh", resetForm: "resetForm" }, ngImport: i0, template: "<ng-container *ngIf=\"!showSmiley\">\r\n <div class=\"workflow-grc\">\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"openedPopup && dialogFields?.includes(openedPopup)\"\r\n *ngIf=\"!isLoading\"\r\n >\r\n <lib-text-field-icon\r\n [disabled]=\"openedPopup && dialogFields?.includes(openedPopup)\"\r\n [cdnLink]=\"CDN_LINK.grcType\"\r\n [isChecked]=\"true\"\r\n field-icons\r\n >\r\n </lib-text-field-icon>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n GRC OBJECT TYPE<span class=\"required\">*</span>\r\n </label>\r\n <div class=\"select\">\r\n <tab-selector\r\n [selectedItem]=\"grcPayload.type\"\r\n [displayArray]=\"OBJECT_TYPE\"\r\n (onValueChanged)=\"changeAttributesType($event)\"\r\n ></tab-selector>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Object name field -->\r\n <lib-text-field\r\n [disabled]=\"\r\n openedPopup &&\r\n openedPopup !== INPUT_TYPE.name &&\r\n dialogFields?.includes(openedPopup)\r\n \"\r\n [isEditMode]=\"grcPayload.name && openedPopup !== INPUT_TYPE.name\"\r\n [titleText]=\"ALL_TEXT?.grcObjectName\"\r\n [placeholderText]=\"ALL_TEXT?.grcObjectPlaceholder\"\r\n [(textValue)]=\"grcPayload.name\"\r\n (textValueChange)=\"onTextChange($event)\"\r\n (clickOutside)=\"onClickOutside()\"\r\n (onClick)=\"onPopupOpen(INPUT_TYPE.name)\"\r\n >\r\n <lib-text-field-icon\r\n [cdnLink]=\"CDN_LINK.grcObjectName\"\r\n [isChecked]=\"grcPayload.name\"\r\n field-icons\r\n >\r\n </lib-text-field-icon>\r\n <span class=\"required\" is-required>*</span>\r\n <lib-edit-mode\r\n *ngIf=\"grcPayload.name && openedPopup !== INPUT_TYPE.name\"\r\n [selectedData]=\"[grcPayload]\"\r\n [type]=\"'text'\"\r\n (isOnEdit)=\"onEdit(INPUT_TYPE.name)\"\r\n edit-mode\r\n ></lib-edit-mode>\r\n <p\r\n *ngIf=\"grcValidationCheck || isDuplicateName\"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n error-message\r\n >\r\n {{ grcNameValidationError }}\r\n </p>\r\n <vcomply-editor\r\n [editorConfig]=\"EDITOR_CONFIG\"\r\n [(ngModel)]=\"grcPayload.description\"\r\n rich-text-editor\r\n ></vcomply-editor>\r\n </lib-text-field>\r\n\r\n <!-- Specify Owners -->\r\n <lib-text-field\r\n [disabled]=\"\r\n openedPopup &&\r\n openedPopup !== INPUT_TYPE.owner &&\r\n dialogFields?.includes(openedPopup)\r\n \"\r\n [active]=\"openedPopup && openedPopup == INPUT_TYPE.owner\"\r\n [isEditMode]=\"\r\n listObject.OWNER?.selectedData?.length &&\r\n openedPopup !== INPUT_TYPE.owner\r\n \"\r\n [titleText]=\"ALL_TEXT?.grcOwnersTitle\"\r\n [placeholderText]=\"ALL_TEXT?.grcOwnersPlaceholder\"\r\n [isReadOnly]=\"true\"\r\n (onClick)=\"onPopupOpen(INPUT_TYPE.owner)\"\r\n >\r\n <lib-text-field-icon\r\n [cdnLink]=\"CDN_LINK.grcOwners\"\r\n [isChecked]=\"listObject.OWNER?.selectedData?.length > 0\"\r\n field-icons\r\n >\r\n </lib-text-field-icon>\r\n <span class=\"required\" is-required>*</span>\r\n <lib-edit-mode\r\n *ngIf=\"\r\n listObject.OWNER?.selectedData?.length &&\r\n openedPopup !== INPUT_TYPE.owner\r\n \"\r\n [nonRemovableIds]=\"disabledIds\"\r\n [selectedData]=\"listObject.OWNER?.selectedData\"\r\n [type]=\"'list'\"\r\n (isOnEdit)=\"onEdit(INPUT_TYPE.owner)\"\r\n (onRemoveData)=\"onRemoveData($event, INPUT_TYPE.owner)\"\r\n edit-mode\r\n ></lib-edit-mode>\r\n </lib-text-field>\r\n\r\n <!-- Link Responsibility Centers (RC) -->\r\n <lib-text-field\r\n [disabled]=\"\r\n openedPopup &&\r\n openedPopup !== INPUT_TYPE.RC &&\r\n dialogFields?.includes(openedPopup)\r\n \"\r\n [active]=\"openedPopup && openedPopup == INPUT_TYPE.RC\"\r\n [isEditMode]=\"\r\n listObject.RC?.selectedData?.length && openedPopup !== INPUT_TYPE.RC\r\n \"\r\n [titleText]=\"ALL_TEXT?.grcRCTitle\"\r\n [placeholderText]=\"ALL_TEXT?.grcRCPlaceholder\"\r\n [isReadOnly]=\"true\"\r\n (onClick)=\"onPopupOpen(INPUT_TYPE.RC)\"\r\n >\r\n <lib-text-field-icon\r\n [cdnLink]=\"CDN_LINK.grcRC\"\r\n [isChecked]=\"listObject.RC?.selectedData?.length > 0\"\r\n field-icons\r\n >\r\n </lib-text-field-icon>\r\n <span class=\"required\" is-required>*</span>\r\n <lib-edit-mode\r\n *ngIf=\"\r\n listObject.RC?.selectedData?.length && openedPopup !== INPUT_TYPE.RC\r\n \"\r\n (onRemoveData)=\"onRemoveData($event, INPUT_TYPE.RC)\"\r\n [selectedData]=\"listObject.RC?.selectedData\"\r\n [type]=\"'list'\"\r\n (isOnEdit)=\"onEdit(INPUT_TYPE.RC)\"\r\n edit-mode\r\n ></lib-edit-mode>\r\n <p\r\n *ngIf=\"isFormSubmitted && !listObject.RC?.selectedData?.length\"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n error-message\r\n >\r\n {{ VALIDATION_MESSAGE.grcRC }}\r\n </p>\r\n </lib-text-field>\r\n\r\n <!-- Link Risk Categories and Risk -->\r\n <lib-text-field\r\n [disabled]=\"\r\n openedPopup &&\r\n openedPopup !== INPUT_TYPE?.riskCategory &&\r\n dialogFields?.includes(openedPopup)\r\n \"\r\n [active]=\"openedPopup && openedPopup == INPUT_TYPE?.riskCategory\"\r\n *ngIf=\"grcForm?.linkRisk\"\r\n [titleText]=\"ALL_TEXT?.grcRiskCategoryTitle\"\r\n [placeholderText]=\"ALL_TEXT?.grcRiskCategoryPlaceholder\"\r\n [isReadOnly]=\"true\"\r\n (onClick)=\"onPopupOpen(INPUT_TYPE.riskCategory)\"\r\n [isEditMode]=\"\r\n listObject?.RISK_CATEGORY?.selectedData?.length &&\r\n openedPopup !== INPUT_TYPE?.riskCategory\r\n \"\r\n >\r\n <lib-text-field-icon\r\n [cdnLink]=\"CDN_LINK.linkGRC\"\r\n [isChecked]=\"listObject.RISK_CATEGORY?.selectedData?.length > 0\"\r\n field-icons\r\n >\r\n </lib-text-field-icon>\r\n\r\n <lib-edit-mode\r\n *ngIf=\"\r\n listObject.RISK_CATEGORY?.selectedData?.length &&\r\n openedPopup !== INPUT_TYPE.RISK_CATEGORY\r\n \"\r\n (onRemoveData)=\"onRemoveData($event, INPUT_TYPE?.riskCategory)\"\r\n [selectedData]=\"selectedRisks\"\r\n [type]=\"'list'\"\r\n (isOnEdit)=\"onEdit(INPUT_TYPE.riskCategory, data?.key)\"\r\n edit-mode\r\n >\r\n </lib-edit-mode>\r\n </lib-text-field>\r\n </div>\r\n\r\n <!-- Link Other GRC Objects -->\r\n <lib-text-field\r\n *ngIf=\"grcForm?.otherGrcObjects\"\r\n [disabled]=\"\r\n openedPopup &&\r\n openedPopup !== INPUT_TYPE?.otherGrcObjects &&\r\n dialogFields?.includes(openedPopup)\r\n \"\r\n [active]=\"openedPopup && openedPopup == INPUT_TYPE?.otherGrcObjects\"\r\n [titleText]=\"ALL_TEXT?.otherGRCObjectsTitle\"\r\n [placeholderText]=\"ALL_TEXT?.otherGRCObjectsPlaceholder\"\r\n [isReadOnly]=\"true\"\r\n (onClick)=\"onPopupOpen(INPUT_TYPE.otherGrcObjects)\"\r\n [isEditMode]=\"\r\n listObject?.OTHER_GRC_OBJECTS?.selectedData?.length &&\r\n openedPopup !== INPUT_TYPE?.otherGrcObjects\r\n \"\r\n >\r\n <lib-text-field-icon\r\n [cdnLink]=\"CDN_LINK.linkOthers\"\r\n [isChecked]=\"listObject?.OTHER_GRC_OBJECTS?.selectedData?.length > 0\"\r\n field-icons\r\n >\r\n </lib-text-field-icon>\r\n\r\n <lib-edit-mode\r\n *ngFor=\"let data of grcDataWithTypes | keyvalue : originalOrder\"\r\n (onRemoveData)=\"onRemoveData($event, INPUT_TYPE?.otherGrcObjects)\"\r\n [selectedData]=\"data?.value\"\r\n [type]=\"'list'\"\r\n [isMultiple]=\"true\"\r\n (isOnEdit)=\"onEdit(INPUT_TYPE.otherGrcObjects, data?.key)\"\r\n edit-mode\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ data?.key | titlecase }}\r\n </div>\r\n </lib-edit-mode>\r\n </lib-text-field>\r\n <lib-attributes\r\n [disabled]=\"openedPopup && dialogFields?.includes(openedPopup)\"\r\n *ngIf=\"selectedAttributes?.attributes?.length && this.grcForm.grcObjectType\"\r\n [attributesInfo]=\"selectedAttributes\"\r\n [isFormSubmitted]=\"isFormSubmitted\"\r\n ></lib-attributes>\r\n <lib-list-popup\r\n [openedPopup]=\"openedPopup\"\r\n [listObject]=\"listObject\"\r\n [tableCard]=\"otherGRCCard\"\r\n [otherGrcCardLoader]=\"grcTabLoader\"\r\n [GRCSelectedTab]=\"GRCSelectedTab\"\r\n (onSaveSelectedList)=\"onSaveSelectedList($event)\"\r\n (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n ></lib-list-popup>\r\n</ng-container>\r\n<app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"smileyActions($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\"\r\n></app-smiley-dialog-inline>\r\n<app-loader-inline *ngIf=\"isLoading\"></app-loader-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-grc{position:relative}.disabled{opacity:.5;pointer-events:none}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.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/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextFieldComponent, selector: "lib-text-field", inputs: ["titleText", "placeholderText", "textValue", "isReadOnly", "isEditMode", "disabled", "active"], outputs: ["textValueChange", "onClick", "clickOutside"] }, { kind: "component", type: TextFieldIconComponent, selector: "lib-text-field-icon", inputs: ["cdnLink", "altName", "isChecked"] }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "component", type: ListPopupComponent, selector: "lib-list-popup", inputs: ["openedPopup", "listObject", "tableCard", "GRCSelectedTab"], outputs: ["onSaveSelectedList", "getOtherGRCObjects"] }, { kind: "component", type: TabSelector, selector: "tab-selector", inputs: ["disabled", "selectedItem", "displayArray"], outputs: ["onValueChanged"] }, { kind: "component", type: EditModeComponent, selector: "lib-edit-mode", inputs: ["selectedData", "type", "nonRemovableIds", "isMultiple"], outputs: ["isOnEdit", "onRemoveData"] }, { kind: "component", type: AttributesComponent, selector: "lib-attributes", inputs: ["attributesInfo", "isFormSubmitted", "disabled"], outputs: ["onAttributesSelection"] }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }] });
|
|
@@ -9946,7 +9952,7 @@ class WorkflowRiskComponent {
|
|
|
9946
9952
|
}
|
|
9947
9953
|
getRiskDetails(riskId) {
|
|
9948
9954
|
this.riskService.getRiskDetail(riskId).subscribe((res) => {
|
|
9949
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
9955
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
9950
9956
|
this.loader = false;
|
|
9951
9957
|
this.uiKitService.isLoader = false;
|
|
9952
9958
|
this.editDetails = cloneDeep(res);
|
|
@@ -9964,11 +9970,11 @@ class WorkflowRiskComponent {
|
|
|
9964
9970
|
this.riskForm.groupsList = this.setList(this.groupsList, res === null || res === void 0 ? void 0 : res.usergroup_ids, '_id');
|
|
9965
9971
|
this.riskForm.mitigationDescriptionPlan = res.mitigationDescriptionPlan;
|
|
9966
9972
|
const type = this.setCategoryType(res.category_type[0]);
|
|
9967
|
-
const categoryIndex = (_b = this.categoryList[type]) === null || _b === void 0 ? void 0 : _b.data.findIndex((element) => element.category_id == res.category[0]);
|
|
9973
|
+
const categoryIndex = (_c = (_b = this.categoryList[type]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.findIndex((element) => element.category_id == res.category[0]);
|
|
9968
9974
|
if (categoryIndex != -1) {
|
|
9969
9975
|
this.riskForm.category = {
|
|
9970
9976
|
type,
|
|
9971
|
-
selectedCategory: (
|
|
9977
|
+
selectedCategory: (_d = this.categoryList[type]) === null || _d === void 0 ? void 0 : _d.data[categoryIndex],
|
|
9972
9978
|
};
|
|
9973
9979
|
this.riskForm.categoryCustomTags = res.category_custom_tag;
|
|
9974
9980
|
}
|
|
@@ -9976,19 +9982,19 @@ class WorkflowRiskComponent {
|
|
|
9976
9982
|
this.riskForm.overseersGroupList = this.setList(this.groupsList, res === null || res === void 0 ? void 0 : res.overseergroup_ids, '_id');
|
|
9977
9983
|
this.riskForm.mitigation = (res === null || res === void 0 ? void 0 : res.mitigation)
|
|
9978
9984
|
? res === null || res === void 0 ? void 0 : res.mitigation
|
|
9979
|
-
: (
|
|
9985
|
+
: (_e = this.riskForm) === null || _e === void 0 ? void 0 : _e.mitigation;
|
|
9980
9986
|
this.riskForm.assessment_deadline_days = res.assessment_deadline_days;
|
|
9981
9987
|
this.riskForm.addOverseer =
|
|
9982
|
-
res.manage_oversight.length > 0 || ((
|
|
9988
|
+
res.manage_oversight.length > 0 || ((_f = res === null || res === void 0 ? void 0 : res.overseergroup_ids) === null || _f === void 0 ? void 0 : _f.length) > 0
|
|
9983
9989
|
? true
|
|
9984
9990
|
: false;
|
|
9985
9991
|
this.riskForm.addMitigation = res.mitigation ? true : false;
|
|
9986
9992
|
this.organizationId = res.organisation_id;
|
|
9987
9993
|
this.riskForm.head_ids = (res === null || res === void 0 ? void 0 : res.head_ids) ? res === null || res === void 0 ? void 0 : res.head_ids : [];
|
|
9988
9994
|
this.riskForm.mitigationDescriptionPlan =
|
|
9989
|
-
(
|
|
9995
|
+
(_g = res === null || res === void 0 ? void 0 : res.mitigation_plan_recommendation) !== null && _g !== void 0 ? _g : '';
|
|
9990
9996
|
this.riskForm.addMitigationPlan =
|
|
9991
|
-
((
|
|
9997
|
+
((_h = res === null || res === void 0 ? void 0 : res.mitigation_plan_recommendation.trim()) === null || _h === void 0 ? void 0 : _h.length) ? true : false;
|
|
9992
9998
|
this.riskForm.addRiskLabel = res.risk_label ? true : false;
|
|
9993
9999
|
if (res.assessment_date_timestamp) {
|
|
9994
10000
|
this.date = new Date(res.assessment_date);
|
|
@@ -10015,6 +10021,7 @@ class WorkflowRiskComponent {
|
|
|
10015
10021
|
...this.getCurrentlyLoggedInUser(),
|
|
10016
10022
|
]));
|
|
10017
10023
|
}
|
|
10024
|
+
this.rcSelected.emit(1);
|
|
10018
10025
|
this.saveSelectedList(res.linkedGrcDetails);
|
|
10019
10026
|
this.getOtherGRCTabCount({ rc_ids: '' });
|
|
10020
10027
|
this.getOtherGRCObjects({ rc_ids: '' });
|
|
@@ -10034,6 +10041,7 @@ class WorkflowRiskComponent {
|
|
|
10034
10041
|
populateOptionalFields() {
|
|
10035
10042
|
var _a;
|
|
10036
10043
|
const activatedOptions = [];
|
|
10044
|
+
console.log('this.riskForm. ===>', this.riskForm);
|
|
10037
10045
|
if (this.riskForm.addMitigation) {
|
|
10038
10046
|
activatedOptions.push('MITIGATION');
|
|
10039
10047
|
}
|
|
@@ -10047,7 +10055,7 @@ class WorkflowRiskComponent {
|
|
|
10047
10055
|
activatedOptions.push('RISK_LABEL');
|
|
10048
10056
|
}
|
|
10049
10057
|
if ((_a = this.riskForm.selectedGRCObjects) === null || _a === void 0 ? void 0 : _a.length) {
|
|
10050
|
-
activatedOptions.push('
|
|
10058
|
+
activatedOptions.push('GRC_OBJECTS');
|
|
10051
10059
|
this.riskForm.GRC = true;
|
|
10052
10060
|
}
|
|
10053
10061
|
this.populateOption.emit(activatedOptions);
|
|
@@ -10542,6 +10550,8 @@ class WorkflowRiskComponent {
|
|
|
10542
10550
|
},
|
|
10543
10551
|
riskLabelValue: 1,
|
|
10544
10552
|
addRiskLabel: false,
|
|
10553
|
+
GRC: false,
|
|
10554
|
+
selectedGRCObjects: [],
|
|
10545
10555
|
};
|
|
10546
10556
|
this.nonRemovableUsersList = [];
|
|
10547
10557
|
this.organizationId = this.authService.getOrganizationId();
|
|
@@ -11191,10 +11201,10 @@ class WorkflowRiskComponent {
|
|
|
11191
11201
|
}
|
|
11192
11202
|
}
|
|
11193
11203
|
WorkflowRiskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WorkflowRiskComponent, deps: [{ token: AddRiskService }, { token: AuthService }, { token: UiKitService }, { token: SnackBarService }, { token: FrequencyService }, { token: GrcService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
11194
|
-
WorkflowRiskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WorkflowRiskComponent, selector: "app-workflow-risk", inputs: { feature: "feature", mode: "mode", riskId: "riskId", defaultRiskType: "defaultRiskType", moveToRegisterMode: "moveToRegisterMode", secondaryOpenPortal: "secondaryOpenPortal", openedFrom: "openedFrom" }, outputs: { showConfirmationAlert: "showConfirmationAlert", pickerChanged: "pickerChanged", populateOption: "populateOption", closeWorkflow: "closeWorkflow", disconnectRefresh: "disconnectRefresh", refreshForm: "refreshForm", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", rcSelected: "rcSelected" }, ngImport: i0, template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n <!-- Risk Type -->\r\n <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/type.svg\"\r\n alt=\"im\"\r\n *ngIf=\"true\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Type <span class=\"required\">*</span></label\r\n >\r\n <div class=\"risk-type-field\">\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('NORMAL')\"\r\n >\r\n ADD TO RISK REGISTER\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('REPORTED')\"\r\n >\r\n REPORT A RISK\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <span class=\"background-glider\"></span>\r\n </div>\r\n <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'name' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"im\"\r\n *ngIf=\"\r\n riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n \"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n <span class=\"required\">*</span></label\r\n >\r\n <input\r\n spaceTrim\r\n type=\"text\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n [(ngModel)]=\"riskForm.title\"\r\n placeholder=\"Add a risk name\"\r\n *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n />\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n >\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{ riskForm.title }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n (click)=\"activateSelector('name', true)\"\r\n type=\"button\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n Add a risk name\r\n </p>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.description\"\r\n [editorConfig]=\"description\"\r\n (clickOutside)=\"checkDescription()\"\r\n ></vcomply-editor>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n riskForm.riskType === 'REPORTED' &&\r\n !riskForm?.description?.trim()?.length\r\n \"\r\n class=\"error-message\"\r\n >\r\n Add a risk description\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Owner -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'owner'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'owner' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('owner', true)\"\r\n placeholder=\"Select Risk Owner(s)\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\r\n \"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"!featureflag_groups\"\r\n >\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerList\r\n \"\r\n >\r\n <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner?.member_name }}</span\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOwner.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\"></i> {{owner?.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n </ng-container>\r\n </div> -->\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(\r\n riskForm?.ownersList[0]?.member_id\r\n )\r\n \"\r\n (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.ownersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"popoverUser.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.ownersList.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.groupsList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"group.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n >\r\n +{{ riskForm?.groupsList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n <div class=\"chip-inner\" >\r\n <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" ></i>\r\n <span class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" ></i>\r\n <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n </div>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'owner'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('owner', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n class=\"error-message\"\r\n >\r\n Select Owner(s) for this risk.\r\n </p>\r\n <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rc' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length == 0 ||\r\n activeSelector === 'rc'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length > 0 &&\r\n activeSelector !== 'rc'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Responsibility Center <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('rc', true)\"\r\n placeholder=\"Select Responsibility Center(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <ng-container\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rcName)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"rcName.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rcName.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n >\r\n +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\"></i> {{rcName.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'rc'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('rc', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n class=\"error-message\"\r\n >\r\n Assign this risk to a Responsibility Center(s)\r\n </p>\r\n <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc', rcName)\"></i>\r\n {{ rcName.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Frequency -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n sideSelectorElements?.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '' ||\r\n activeSelector === 'frequency'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n (riskForm?.frequency_details?.frequency &&\r\n riskForm?.frequency_details?.frequency !== '') ||\r\n activeSelector !== 'frequency'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'The option lets you specify the risk reassessment frequency.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <input\r\n type=\"text\"\r\n placeholder=\"Set a Reassessment Frequency\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected button-sec\"\r\n *ngIf=\"riskForm?.frequency_details?.frequency\"\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"frequencyPlaceholder\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ frequencyPlaceholder }}</span\r\n >\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <div class=\"vx-mt-1\">\r\n <app-cs-switch\r\n [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n </app-cs-switch>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n (!riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '')\r\n \"\r\n class=\"error-message\"\r\n >\r\n Please select the frequency of occurrence for this risk.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'category' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.category?.selectedCategory && activeSelector !== 'category'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Category\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('category', true)\"\r\n placeholder=\"Select Risk Category\"\r\n readonly\r\n />\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('category', riskForm.category.selectedCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n >\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\"></i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n </div> -->\r\n <button\r\n *ngIf=\"activeSelector !== 'category'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('category', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n <div\r\n class=\"vx-form-group\"\r\n *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n >\r\n <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"tag.custom_tag_value\"\r\n [placeholder]=\"tag.custom_tag_name\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Assessment Deadline -->\r\n <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'assessment'\"\r\n id=\"deadline\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'assessment' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days < 1 ||\r\n activeSelector === 'assessment'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days >= 1 &&\r\n activeSelector !== 'assessment'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Assessment Deadline <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the date that the inherent risk assessment must be completed by.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"input\">\r\n <span class=\"text\">Set Number of days</span>\r\n <div class=\"input-group counter\">\r\n <button (click)=\"changeRiskAssessment('subtract')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <input\r\n type=\"number\"\r\n [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n (focusin)=\"activateSelector('assessment', true)\"\r\n (focusout)=\"activateSelector('assessment', false)\"\r\n name=\"riskAssessmentDeadline\"\r\n validateAssessment\r\n #deadline=\"ngModel\"\r\n (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n onkeydown=\"return event.keyCode !== 190\"\r\n min=\"0\"\r\n oninput=\"this.value = Math.abs(this.value)\"\r\n />\r\n <button (click)=\"changeRiskAssessment('add')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n class=\"error-message\"\r\n >\r\n Enter a value greater than 0.\r\n </p>\r\n <label\r\n class=\"vx-control-panel\"\r\n *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n >\r\n This risk assessment needs to be completed by\r\n {{ date | date : \"dd MMM yyyy\" }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Overseer -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'overseer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'overseer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addOverseer\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n <img\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Oversight<i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 &&\r\n riskForm?.overseersGroupList?.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n placeholder=\"Select Risk Oversight(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 ||\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >\r\n <ng-container *ngIf=\"!featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let owner of riskForm?.overseersList?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner.member_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOverseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n *ngIf=\"riskForm?.overseersList.length > 0\"\r\n >{{ riskForm?.overseersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"overseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n riskForm?.overseersList.length > 0 &&\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.overseersGroupList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"\r\n remove('overseergroup', riskForm?.overseersGroupList[0])\r\n \"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.overseersGroupList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"overseerGroup.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"activeSelector !== 'overseer'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Mitigation Priority -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addMitigation\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n *ngIf=\"!riskForm.mitigation\"\r\n alt=\"\"\r\n />\r\n <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n </svg> -->\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"riskForm.mitigation\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Mitigation Priority\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This sets the priority level for the mitigation of each risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n\r\n <cs-select\r\n [(ngModel)]=\"riskForm.mitigation\"\r\n [placeholder]=\"'Select a mitigation priority'\"\r\n name=\"riskForm.mitigation\"\r\n >\r\n <cs-option\r\n *ngFor=\"let data of mitigationDetails\"\r\n [value]=\"data?.mitigation_id\"\r\n [color]=\"data?.mitigation_color\"\r\n >\r\n {{ data.mitigation_name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Recommended Mitigation Plan -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n *ngIf=\"riskForm?.addMitigationPlan\"\r\n >\r\n <div\r\n id=\"riskSpace\"\r\n class=\"left\"\r\n [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n >\r\n <img\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label for=\"\" class=\"vx-control-panel\"\r\n >Recommended Mitigation Plans<link\r\n rel=\"manifest\"\r\n href=\"./manifest.json\"\r\n />\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n [editorConfig]=\"mitigationDescriptionPlan\"\r\n (clickOutside)=\"checkMitigationPlan()\"\r\n >\r\n </vcomply-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Label -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.addRiskLabel\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <!-- <img *ngIf=\"true\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >RISK LABEL\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk label info text here...'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <cs-select\r\n [(ngModel)]=\"riskForm.riskLabelValue\"\r\n [placeholder]=\"'Select a risk label'\"\r\n name=\"riskForm?.riskLabelValue\"\r\n >\r\n <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n {{ data?.name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link with GRC -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'GRC'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'GRC' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.GRC\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg alt=\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">LINK GRC OBJECT(S) </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('GRC', true)\"\r\n placeholder=\"Select GRC object(s) to link with this risk.\"\r\n readonly\r\n />\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.selectedGRCObjects?.length\">\r\n <ng-container\r\n *ngFor=\"\r\n let selectedGRC of grcDataWithTypes | keyvalue : originalOrder;\r\n let i = index\r\n \"\r\n >\r\n <div *ngIf=\"selectedGRC?.value?.length\" class=\"selected\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let grc of selectedGRC?.value?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('GRC', grc, 0)\"\r\n ></i\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ selectedGRC?.key | titlecase }}\r\n </div>\r\n\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"grc?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ grc?.name }}</span\r\n >\r\n </ng-container>\r\n\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverGRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"selectedGRC?.value?.length > 1\"\r\n >\r\n +{{ selectedGRC?.value.length - 1 }}\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'GRC'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"\r\n selectedGRCTab = selectedGRC?.value[0]?.type;\r\n getOtherGRCObjects();\r\n activateSelector('GRC', true)\r\n \"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverGRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let grc of selectedGRC?.value | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('GRC', grc, j + 1)\"\r\n ></i\r\n >\r\n {{ grc.name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<app-responsibility-centers-list\r\n *ngIf=\"activeSelector === 'rc'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n [rcIdKey]=\"'rc_id'\"\r\n (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n (closeRcList)=\"activateSelector('rc', false)\"\r\n [singularText]=\"'Responsibility Center selected'\"\r\n [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n [usersList]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n (closeUsersList)=\"activateSelector('owner', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n [userlist]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [groupList]=\"groupsList\"\r\n [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n (save)=\"saveSelectedOwnersList($event)\"\r\n [selectedGroups]=\"riskForm.groupsList\"\r\n (cancel)=\"activateSelector('owner', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n [userlist]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [groupList]=\"overseersGroupList\"\r\n (save)=\"saveSelectedOverseersList($event)\"\r\n [selectedGroups]=\"riskForm.overseersGroupList\"\r\n (cancel)=\"activateSelector('overseer', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n *ngIf=\"activeSelector === 'category'\"\r\n [categoryList]=\"categoryList\"\r\n [selectedCategory]=\"riskForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n [usersList]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n (closeUsersList)=\"activateSelector('overseer', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\"\r\n (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n *ngIf=\"activeSelector === 'GRC'\"\r\n [grcObject]=\"grcList\"\r\n [selectedGRC]=\"riskForm.selectedGRCObjects | refDisconnect\"\r\n [loader]=\"grcLoader\"\r\n [tableCard]=\"otherGRCCard | refDisconnect\"\r\n [selectedTab]=\"selectedGRCTab\"\r\n (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n (saveOtherGRC)=\"saveSelectedList($event)\"\r\n (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-list>\r\n\r\n<app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.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/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsSwitchComponent$1, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GrcObjectListComponent, selector: "app-grc-object-list", inputs: ["grcObject", "currentPage", "loader", "tableCard", "selectedTab", "cardLoader", "selectedGRC"], outputs: ["saveOtherGRC", "closeOtherGRC", "getOtherGRCObjects"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: CategoryListComponent, selector: "app-category-list", inputs: ["categoryList", "selectedCategory"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "directive", type: spaceTrimDirective, selector: "[spaceTrim]" }, { kind: "component", type: FrequencyDialogContainerComponent, selector: "app-frequency-dialog-container", inputs: ["mode", "frequencyDetails"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }, { kind: "pipe", type: ShortMergePipe, name: "shortMerge" }, { kind: "pipe", type: SpaceTrimPipe, name: "spaceTrim" }] });
|
|
11204
|
+
WorkflowRiskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WorkflowRiskComponent, selector: "app-workflow-risk", inputs: { feature: "feature", mode: "mode", riskId: "riskId", defaultRiskType: "defaultRiskType", moveToRegisterMode: "moveToRegisterMode", secondaryOpenPortal: "secondaryOpenPortal", openedFrom: "openedFrom" }, outputs: { showConfirmationAlert: "showConfirmationAlert", pickerChanged: "pickerChanged", populateOption: "populateOption", closeWorkflow: "closeWorkflow", disconnectRefresh: "disconnectRefresh", refreshForm: "refreshForm", hideElementsFromMoreOptions: "hideElementsFromMoreOptions", rcSelected: "rcSelected" }, ngImport: i0, template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n <!-- Risk Type -->\r\n <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/type.svg\"\r\n alt=\"im\"\r\n *ngIf=\"true\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Type <span class=\"required\">*</span></label\r\n >\r\n <div class=\"risk-type-field\">\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('NORMAL')\"\r\n >\r\n ADD TO RISK REGISTER\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('REPORTED')\"\r\n >\r\n REPORT A RISK\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <span class=\"background-glider\"></span>\r\n </div>\r\n <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'name' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"im\"\r\n *ngIf=\"\r\n riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n \"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n <span class=\"required\">*</span></label\r\n >\r\n <input\r\n spaceTrim\r\n type=\"text\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n [(ngModel)]=\"riskForm.title\"\r\n placeholder=\"Add a risk name\"\r\n *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n />\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n >\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{ riskForm.title }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n (click)=\"activateSelector('name', true)\"\r\n type=\"button\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n Add a risk name\r\n </p>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.description\"\r\n [editorConfig]=\"description\"\r\n (clickOutside)=\"checkDescription()\"\r\n ></vcomply-editor>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n riskForm.riskType === 'REPORTED' &&\r\n !riskForm?.description?.trim()?.length\r\n \"\r\n class=\"error-message\"\r\n >\r\n Add a risk description\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Owner -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'owner'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'owner' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('owner', true)\"\r\n placeholder=\"Select Risk Owner(s)\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\r\n \"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"!featureflag_groups\"\r\n >\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerList\r\n \"\r\n >\r\n <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner?.member_name }}</span\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOwner.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\"></i> {{owner?.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n </ng-container>\r\n </div> -->\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(\r\n riskForm?.ownersList[0]?.member_id\r\n )\r\n \"\r\n (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.ownersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"popoverUser.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.ownersList.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.groupsList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"group.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n >\r\n +{{ riskForm?.groupsList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n <div class=\"chip-inner\" >\r\n <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" ></i>\r\n <span class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" ></i>\r\n <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n </div>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'owner'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('owner', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n class=\"error-message\"\r\n >\r\n Select Owner(s) for this risk.\r\n </p>\r\n <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rc' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length == 0 ||\r\n activeSelector === 'rc'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length > 0 &&\r\n activeSelector !== 'rc'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Responsibility Center <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('rc', true)\"\r\n placeholder=\"Select Responsibility Center(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <ng-container\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rcName)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"rcName.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rcName.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n >\r\n +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\"></i> {{rcName.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'rc'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('rc', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n class=\"error-message\"\r\n >\r\n Assign this risk to a Responsibility Center(s)\r\n </p>\r\n <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc', rcName)\"></i>\r\n {{ rcName.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Frequency -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n sideSelectorElements?.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '' ||\r\n activeSelector === 'frequency'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n (riskForm?.frequency_details?.frequency &&\r\n riskForm?.frequency_details?.frequency !== '') ||\r\n activeSelector !== 'frequency'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'The option lets you specify the risk reassessment frequency.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <input\r\n type=\"text\"\r\n placeholder=\"Set a Reassessment Frequency\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected button-sec\"\r\n *ngIf=\"riskForm?.frequency_details?.frequency\"\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"frequencyPlaceholder\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ frequencyPlaceholder }}</span\r\n >\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <div class=\"vx-mt-1\">\r\n <app-cs-switch\r\n [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n </app-cs-switch>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n (!riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '')\r\n \"\r\n class=\"error-message\"\r\n >\r\n Please select the frequency of occurrence for this risk.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'category' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.category?.selectedCategory && activeSelector !== 'category'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Category\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('category', true)\"\r\n placeholder=\"Select Risk Category\"\r\n readonly\r\n />\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('category', riskForm.category.selectedCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n >\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\"></i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n </div> -->\r\n <button\r\n *ngIf=\"activeSelector !== 'category'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('category', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n <div\r\n class=\"vx-form-group\"\r\n *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n >\r\n <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"tag.custom_tag_value\"\r\n [placeholder]=\"tag.custom_tag_name\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Assessment Deadline -->\r\n <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'assessment'\"\r\n id=\"deadline\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'assessment' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days < 1 ||\r\n activeSelector === 'assessment'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days >= 1 &&\r\n activeSelector !== 'assessment'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Assessment Deadline <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the date that the inherent risk assessment must be completed by.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"input\">\r\n <span class=\"text\">Set Number of days</span>\r\n <div class=\"input-group counter\">\r\n <button (click)=\"changeRiskAssessment('subtract')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <input\r\n type=\"number\"\r\n [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n (focusin)=\"activateSelector('assessment', true)\"\r\n (focusout)=\"activateSelector('assessment', false)\"\r\n name=\"riskAssessmentDeadline\"\r\n validateAssessment\r\n #deadline=\"ngModel\"\r\n (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n onkeydown=\"return event.keyCode !== 190\"\r\n min=\"0\"\r\n oninput=\"this.value = Math.abs(this.value)\"\r\n />\r\n <button (click)=\"changeRiskAssessment('add')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n class=\"error-message\"\r\n >\r\n Enter a value greater than 0.\r\n </p>\r\n <label\r\n class=\"vx-control-panel\"\r\n *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n >\r\n This risk assessment needs to be completed by\r\n {{ date | date : \"dd MMM yyyy\" }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Overseer -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'overseer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'overseer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addOverseer\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n <img\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Oversight<i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 &&\r\n riskForm?.overseersGroupList?.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n placeholder=\"Select Risk Oversight(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 ||\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >\r\n <ng-container *ngIf=\"!featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let owner of riskForm?.overseersList?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner.member_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOverseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n *ngIf=\"riskForm?.overseersList.length > 0\"\r\n >{{ riskForm?.overseersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"overseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n riskForm?.overseersList.length > 0 &&\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.overseersGroupList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"\r\n remove('overseergroup', riskForm?.overseersGroupList[0])\r\n \"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.overseersGroupList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"overseerGroup.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"activeSelector !== 'overseer'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Mitigation Priority -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addMitigation\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n *ngIf=\"!riskForm.mitigation\"\r\n alt=\"\"\r\n />\r\n <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n </svg> -->\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"riskForm.mitigation\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Mitigation Priority\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This sets the priority level for the mitigation of each risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n\r\n <cs-select\r\n [(ngModel)]=\"riskForm.mitigation\"\r\n [placeholder]=\"'Select a mitigation priority'\"\r\n name=\"riskForm.mitigation\"\r\n >\r\n <cs-option\r\n *ngFor=\"let data of mitigationDetails\"\r\n [value]=\"data?.mitigation_id\"\r\n [color]=\"data?.mitigation_color\"\r\n >\r\n {{ data.mitigation_name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Recommended Mitigation Plan -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n *ngIf=\"riskForm?.addMitigationPlan\"\r\n >\r\n <div\r\n id=\"riskSpace\"\r\n class=\"left\"\r\n [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n >\r\n <img\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label for=\"\" class=\"vx-control-panel\"\r\n >Recommended Mitigation Plans<link\r\n rel=\"manifest\"\r\n href=\"./manifest.json\"\r\n />\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n [editorConfig]=\"mitigationDescriptionPlan\"\r\n (clickOutside)=\"checkMitigationPlan()\"\r\n >\r\n </vcomply-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Label -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.addRiskLabel\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <!-- <img *ngIf=\"true\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >RISK LABEL\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk label info text here...'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <cs-select\r\n [(ngModel)]=\"riskForm.riskLabelValue\"\r\n [placeholder]=\"'Select a risk label'\"\r\n name=\"riskForm?.riskLabelValue\"\r\n >\r\n <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n {{ data?.name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link with GRC -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'GRC'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'GRC' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.GRC\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg alt=\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">LINK GRC OBJECT(S) </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('GRC', true)\"\r\n placeholder=\"Select GRC object(s) to link with this risk.\"\r\n readonly\r\n />\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.selectedGRCObjects?.length\">\r\n <ng-container\r\n *ngFor=\"\r\n let selectedGRC of grcDataWithTypes | keyvalue : originalOrder;\r\n let i = index\r\n \"\r\n >\r\n <div *ngIf=\"selectedGRC?.value?.length\" class=\"selected vx-mb-2\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let grc of selectedGRC?.value?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('GRC', grc, 0)\"\r\n ></i\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ selectedGRC?.key | titlecase }}\r\n </div>\r\n\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"grc?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ grc?.name }}</span\r\n >\r\n </ng-container>\r\n\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverGRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"selectedGRC?.value?.length > 1\"\r\n >\r\n +{{ selectedGRC?.value.length - 1 }}\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'GRC'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"\r\n selectedGRCTab = selectedGRC?.value[0]?.type;\r\n getOtherGRCObjects();\r\n activateSelector('GRC', true)\r\n \"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverGRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let grc of selectedGRC?.value | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('GRC', grc, j + 1)\"\r\n ></i\r\n >\r\n {{ grc.name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<app-responsibility-centers-list\r\n *ngIf=\"activeSelector === 'rc'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n [rcIdKey]=\"'rc_id'\"\r\n (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n (closeRcList)=\"activateSelector('rc', false)\"\r\n [singularText]=\"'Responsibility Center selected'\"\r\n [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n [usersList]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n (closeUsersList)=\"activateSelector('owner', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n [userlist]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [groupList]=\"groupsList\"\r\n [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n (save)=\"saveSelectedOwnersList($event)\"\r\n [selectedGroups]=\"riskForm.groupsList\"\r\n (cancel)=\"activateSelector('owner', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n [userlist]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [groupList]=\"overseersGroupList\"\r\n (save)=\"saveSelectedOverseersList($event)\"\r\n [selectedGroups]=\"riskForm.overseersGroupList\"\r\n (cancel)=\"activateSelector('overseer', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n *ngIf=\"activeSelector === 'category'\"\r\n [categoryList]=\"categoryList\"\r\n [selectedCategory]=\"riskForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n [usersList]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n (closeUsersList)=\"activateSelector('overseer', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\"\r\n (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n *ngIf=\"activeSelector === 'GRC'\"\r\n [grcObject]=\"grcList\"\r\n [selectedGRC]=\"riskForm.selectedGRCObjects | refDisconnect\"\r\n [loader]=\"grcLoader\"\r\n [tableCard]=\"otherGRCCard | refDisconnect\"\r\n [selectedTab]=\"selectedGRCTab\"\r\n (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n (saveOtherGRC)=\"saveSelectedList($event)\"\r\n (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-list>\r\n\r\n<app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.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/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i9.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsSwitchComponent$1, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: SmileyDialogInlineComponent, selector: "app-smiley-dialog-inline", inputs: ["message", "actionButtons"], outputs: ["action", "closeSmiley"] }, { kind: "directive", type: ClickOutsideDirective$1, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GrcObjectListComponent, selector: "app-grc-object-list", inputs: ["grcObject", "currentPage", "loader", "tableCard", "selectedTab", "cardLoader", "selectedGRC"], outputs: ["saveOtherGRC", "closeOtherGRC", "getOtherGRCObjects"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: CategoryListComponent, selector: "app-category-list", inputs: ["categoryList", "selectedCategory"], outputs: ["saveSelectedCategory", "closeList", "closeCategoriesList"] }, { kind: "directive", type: ScrollInViewDirective, selector: "[appScrollInView]", inputs: ["appScrollInView"] }, { kind: "directive", type: spaceTrimDirective, selector: "[spaceTrim]" }, { kind: "component", type: FrequencyDialogContainerComponent, selector: "app-frequency-dialog-container", inputs: ["mode", "frequencyDetails"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: RefDisconnectPipe, name: "refDisconnect" }, { kind: "pipe", type: ShortMergePipe, name: "shortMerge" }, { kind: "pipe", type: SpaceTrimPipe, name: "spaceTrim" }] });
|
|
11195
11205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WorkflowRiskComponent, decorators: [{
|
|
11196
11206
|
type: Component,
|
|
11197
|
-
args: [{ selector: 'app-workflow-risk', template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n <!-- Risk Type -->\r\n <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/type.svg\"\r\n alt=\"im\"\r\n *ngIf=\"true\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Type <span class=\"required\">*</span></label\r\n >\r\n <div class=\"risk-type-field\">\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('NORMAL')\"\r\n >\r\n ADD TO RISK REGISTER\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('REPORTED')\"\r\n >\r\n REPORT A RISK\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <span class=\"background-glider\"></span>\r\n </div>\r\n <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'name' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"im\"\r\n *ngIf=\"\r\n riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n \"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n <span class=\"required\">*</span></label\r\n >\r\n <input\r\n spaceTrim\r\n type=\"text\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n [(ngModel)]=\"riskForm.title\"\r\n placeholder=\"Add a risk name\"\r\n *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n />\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n >\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{ riskForm.title }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n (click)=\"activateSelector('name', true)\"\r\n type=\"button\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n Add a risk name\r\n </p>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.description\"\r\n [editorConfig]=\"description\"\r\n (clickOutside)=\"checkDescription()\"\r\n ></vcomply-editor>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n riskForm.riskType === 'REPORTED' &&\r\n !riskForm?.description?.trim()?.length\r\n \"\r\n class=\"error-message\"\r\n >\r\n Add a risk description\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Owner -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'owner'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'owner' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('owner', true)\"\r\n placeholder=\"Select Risk Owner(s)\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\r\n \"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"!featureflag_groups\"\r\n >\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerList\r\n \"\r\n >\r\n <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner?.member_name }}</span\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOwner.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\"></i> {{owner?.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n </ng-container>\r\n </div> -->\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(\r\n riskForm?.ownersList[0]?.member_id\r\n )\r\n \"\r\n (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.ownersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"popoverUser.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.ownersList.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.groupsList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"group.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n >\r\n +{{ riskForm?.groupsList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n <div class=\"chip-inner\" >\r\n <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" ></i>\r\n <span class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" ></i>\r\n <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n </div>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'owner'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('owner', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n class=\"error-message\"\r\n >\r\n Select Owner(s) for this risk.\r\n </p>\r\n <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rc' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length == 0 ||\r\n activeSelector === 'rc'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length > 0 &&\r\n activeSelector !== 'rc'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Responsibility Center <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('rc', true)\"\r\n placeholder=\"Select Responsibility Center(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <ng-container\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rcName)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"rcName.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rcName.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n >\r\n +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\"></i> {{rcName.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'rc'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('rc', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n class=\"error-message\"\r\n >\r\n Assign this risk to a Responsibility Center(s)\r\n </p>\r\n <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc', rcName)\"></i>\r\n {{ rcName.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Frequency -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n sideSelectorElements?.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '' ||\r\n activeSelector === 'frequency'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n (riskForm?.frequency_details?.frequency &&\r\n riskForm?.frequency_details?.frequency !== '') ||\r\n activeSelector !== 'frequency'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'The option lets you specify the risk reassessment frequency.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <input\r\n type=\"text\"\r\n placeholder=\"Set a Reassessment Frequency\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected button-sec\"\r\n *ngIf=\"riskForm?.frequency_details?.frequency\"\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"frequencyPlaceholder\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ frequencyPlaceholder }}</span\r\n >\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <div class=\"vx-mt-1\">\r\n <app-cs-switch\r\n [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n </app-cs-switch>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n (!riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '')\r\n \"\r\n class=\"error-message\"\r\n >\r\n Please select the frequency of occurrence for this risk.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'category' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.category?.selectedCategory && activeSelector !== 'category'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Category\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('category', true)\"\r\n placeholder=\"Select Risk Category\"\r\n readonly\r\n />\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('category', riskForm.category.selectedCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n >\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\"></i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n </div> -->\r\n <button\r\n *ngIf=\"activeSelector !== 'category'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('category', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n <div\r\n class=\"vx-form-group\"\r\n *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n >\r\n <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"tag.custom_tag_value\"\r\n [placeholder]=\"tag.custom_tag_name\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Assessment Deadline -->\r\n <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'assessment'\"\r\n id=\"deadline\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'assessment' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days < 1 ||\r\n activeSelector === 'assessment'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days >= 1 &&\r\n activeSelector !== 'assessment'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Assessment Deadline <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the date that the inherent risk assessment must be completed by.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"input\">\r\n <span class=\"text\">Set Number of days</span>\r\n <div class=\"input-group counter\">\r\n <button (click)=\"changeRiskAssessment('subtract')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <input\r\n type=\"number\"\r\n [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n (focusin)=\"activateSelector('assessment', true)\"\r\n (focusout)=\"activateSelector('assessment', false)\"\r\n name=\"riskAssessmentDeadline\"\r\n validateAssessment\r\n #deadline=\"ngModel\"\r\n (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n onkeydown=\"return event.keyCode !== 190\"\r\n min=\"0\"\r\n oninput=\"this.value = Math.abs(this.value)\"\r\n />\r\n <button (click)=\"changeRiskAssessment('add')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n class=\"error-message\"\r\n >\r\n Enter a value greater than 0.\r\n </p>\r\n <label\r\n class=\"vx-control-panel\"\r\n *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n >\r\n This risk assessment needs to be completed by\r\n {{ date | date : \"dd MMM yyyy\" }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Overseer -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'overseer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'overseer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addOverseer\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n <img\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Oversight<i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 &&\r\n riskForm?.overseersGroupList?.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n placeholder=\"Select Risk Oversight(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 ||\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >\r\n <ng-container *ngIf=\"!featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let owner of riskForm?.overseersList?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner.member_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOverseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n *ngIf=\"riskForm?.overseersList.length > 0\"\r\n >{{ riskForm?.overseersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"overseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n riskForm?.overseersList.length > 0 &&\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.overseersGroupList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"\r\n remove('overseergroup', riskForm?.overseersGroupList[0])\r\n \"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.overseersGroupList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"overseerGroup.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"activeSelector !== 'overseer'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Mitigation Priority -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addMitigation\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n *ngIf=\"!riskForm.mitigation\"\r\n alt=\"\"\r\n />\r\n <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n </svg> -->\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"riskForm.mitigation\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Mitigation Priority\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This sets the priority level for the mitigation of each risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n\r\n <cs-select\r\n [(ngModel)]=\"riskForm.mitigation\"\r\n [placeholder]=\"'Select a mitigation priority'\"\r\n name=\"riskForm.mitigation\"\r\n >\r\n <cs-option\r\n *ngFor=\"let data of mitigationDetails\"\r\n [value]=\"data?.mitigation_id\"\r\n [color]=\"data?.mitigation_color\"\r\n >\r\n {{ data.mitigation_name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Recommended Mitigation Plan -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n *ngIf=\"riskForm?.addMitigationPlan\"\r\n >\r\n <div\r\n id=\"riskSpace\"\r\n class=\"left\"\r\n [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n >\r\n <img\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label for=\"\" class=\"vx-control-panel\"\r\n >Recommended Mitigation Plans<link\r\n rel=\"manifest\"\r\n href=\"./manifest.json\"\r\n />\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n [editorConfig]=\"mitigationDescriptionPlan\"\r\n (clickOutside)=\"checkMitigationPlan()\"\r\n >\r\n </vcomply-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Label -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.addRiskLabel\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <!-- <img *ngIf=\"true\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >RISK LABEL\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk label info text here...'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <cs-select\r\n [(ngModel)]=\"riskForm.riskLabelValue\"\r\n [placeholder]=\"'Select a risk label'\"\r\n name=\"riskForm?.riskLabelValue\"\r\n >\r\n <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n {{ data?.name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link with GRC -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'GRC'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'GRC' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.GRC\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg alt=\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">LINK GRC OBJECT(S) </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('GRC', true)\"\r\n placeholder=\"Select GRC object(s) to link with this risk.\"\r\n readonly\r\n />\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.selectedGRCObjects?.length\">\r\n <ng-container\r\n *ngFor=\"\r\n let selectedGRC of grcDataWithTypes | keyvalue : originalOrder;\r\n let i = index\r\n \"\r\n >\r\n <div *ngIf=\"selectedGRC?.value?.length\" class=\"selected\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let grc of selectedGRC?.value?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('GRC', grc, 0)\"\r\n ></i\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ selectedGRC?.key | titlecase }}\r\n </div>\r\n\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"grc?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ grc?.name }}</span\r\n >\r\n </ng-container>\r\n\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverGRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"selectedGRC?.value?.length > 1\"\r\n >\r\n +{{ selectedGRC?.value.length - 1 }}\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'GRC'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"\r\n selectedGRCTab = selectedGRC?.value[0]?.type;\r\n getOtherGRCObjects();\r\n activateSelector('GRC', true)\r\n \"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverGRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let grc of selectedGRC?.value | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('GRC', grc, j + 1)\"\r\n ></i\r\n >\r\n {{ grc.name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<app-responsibility-centers-list\r\n *ngIf=\"activeSelector === 'rc'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n [rcIdKey]=\"'rc_id'\"\r\n (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n (closeRcList)=\"activateSelector('rc', false)\"\r\n [singularText]=\"'Responsibility Center selected'\"\r\n [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n [usersList]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n (closeUsersList)=\"activateSelector('owner', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n [userlist]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [groupList]=\"groupsList\"\r\n [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n (save)=\"saveSelectedOwnersList($event)\"\r\n [selectedGroups]=\"riskForm.groupsList\"\r\n (cancel)=\"activateSelector('owner', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n [userlist]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [groupList]=\"overseersGroupList\"\r\n (save)=\"saveSelectedOverseersList($event)\"\r\n [selectedGroups]=\"riskForm.overseersGroupList\"\r\n (cancel)=\"activateSelector('overseer', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n *ngIf=\"activeSelector === 'category'\"\r\n [categoryList]=\"categoryList\"\r\n [selectedCategory]=\"riskForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n [usersList]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n (closeUsersList)=\"activateSelector('overseer', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\"\r\n (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n *ngIf=\"activeSelector === 'GRC'\"\r\n [grcObject]=\"grcList\"\r\n [selectedGRC]=\"riskForm.selectedGRCObjects | refDisconnect\"\r\n [loader]=\"grcLoader\"\r\n [tableCard]=\"otherGRCCard | refDisconnect\"\r\n [selectedTab]=\"selectedGRCTab\"\r\n (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n (saveOtherGRC)=\"saveSelectedList($event)\"\r\n (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-list>\r\n\r\n<app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.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/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"] }]
|
|
11207
|
+
args: [{ selector: 'app-workflow-risk', template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n <!-- Risk Type -->\r\n <div class=\"form-group-row\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/type.svg\"\r\n alt=\"im\"\r\n *ngIf=\"true\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Type <span class=\"required\">*</span></label\r\n >\r\n <div class=\"risk-type-field\">\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'NORMAL'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('NORMAL')\"\r\n >\r\n ADD TO RISK REGISTER\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <div\r\n class=\"type-item\"\r\n [class.active]=\"riskForm?.riskType === 'REPORTED'\"\r\n >\r\n <button\r\n [class.disabled]=\"!riskTypeChangeAllowed\"\r\n (click)=\"changeRisk('REPORTED')\"\r\n >\r\n REPORT A RISK\r\n </button>\r\n <i\r\n class=\"icons info\"\r\n [appTooltip]=\"\r\n 'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </div>\r\n <span class=\"background-glider\"></span>\r\n </div>\r\n <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'name' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"im\"\r\n *ngIf=\"\r\n riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\r\n \"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHAT RISK WOULD YOU LIKE TO MANAGE?\r\n <span class=\"required\">*</span></label\r\n >\r\n <input\r\n spaceTrim\r\n type=\"text\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n [(ngModel)]=\"riskForm.title\"\r\n placeholder=\"Add a risk name\"\r\n *ngIf=\"riskForm?.title?.trim() == '' || activeSelector === 'name'\"\r\n />\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.title?.trim() != '' && activeSelector !== 'name'\"\r\n >\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{ riskForm.title }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n (click)=\"activateSelector('name', true)\"\r\n type=\"button\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"submitted && !riskForm.title\" class=\"error-message\">\r\n Add a risk name\r\n </p>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.description\"\r\n [editorConfig]=\"description\"\r\n (clickOutside)=\"checkDescription()\"\r\n ></vcomply-editor>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n riskForm.riskType === 'REPORTED' &&\r\n !riskForm?.description?.trim()?.length\r\n \"\r\n class=\"error-message\"\r\n >\r\n Add a risk description\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Owner -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'owner'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'owner' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length == 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('owner', true)\"\r\n placeholder=\"Select Risk Owner(s)\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0\r\n \"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"!featureflag_groups\"\r\n >\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerList\r\n \"\r\n >\r\n <ng-container *ngFor=\"let owner of ownerList?.slice(0, 1)\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner?.member_name }}</span\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOwner.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.ownersList?.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"!featureflag_groups\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\"></i> {{owner?.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverOwner.popover()\" placement=\"right\">+{{riskForm?.ownersList?.slice(2).length}}</button>\r\n </ng-container>\r\n </div> -->\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(\r\n riskForm?.ownersList[0]?.member_id\r\n )\r\n \"\r\n (click)=\"remove('owner', riskForm?.ownersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.ownersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.ownersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"popoverUser.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.ownersList.length > 1\"\r\n >\r\n +{{ riskForm?.ownersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.groupsList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.groupsList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.groupsList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"group.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.groupsList?.length > 1\"\r\n >\r\n +{{ riskForm?.groupsList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" *ngIf=\"featureflag_groups\">\r\n <div class=\"chip-inner\" >\r\n <i class=\"icons cross vx-mr-1\" *ngIf=\"!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)\" (click)=\"remove('owner',riskForm?.ownersList[0])\" ></i>\r\n <span class=\"chip\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.ownersList[0]?.member_name}}</span></span>\r\n <button *ngIf=\"riskForm?.ownersList.length > 1\" class=\"count user\" appPopover (click)=\"popoverUser.popover()\" placement=\"right\">+{{riskForm?.ownersList.length - 1}}</button>\r\n </div>\r\n <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"riskForm?.groupsList.length > 0\" >&</span>\r\n <div class=\"chip-inner\" *ngIf=\"riskForm?.groupsList.length > 0\" >\r\n <i class=\"icons cross vx-mr-1\" (click)=\"remove('Ownergroup', riskForm?.groupsList[0])\" ></i>\r\n <span class=\"chip\" [appTooltip]=\"riskForm?.groupsList[0]?.group_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">{{riskForm?.groupsList[0]?.group_name}}</span></span>\r\n <button *ngIf=\"riskForm?.groupsList?.length > 1\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">+{{riskForm?.groupsList?.length -1}}</button>\r\n </div>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'owner'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('owner', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.ownersList?.length === 0\"\r\n class=\"error-message\"\r\n >\r\n Select Owner(s) for this risk.\r\n </p>\r\n <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #popoverUser [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ng-container\r\n *ngIf=\"\r\n riskForm?.ownersList\r\n | shortMerge : nonRemovableUsersList as ownerPop\r\n \"\r\n >\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice : 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n *ngIf=\"\r\n !nonRemovableUsersList.includes(owner?.member_id)\r\n \"\r\n class=\"icons\"\r\n (click)=\"remove('owner', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.groupsList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('Ownergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rc' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length == 0 ||\r\n activeSelector === 'rc'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n riskForm?.responsibilityCentersList?.length > 0 &&\r\n activeSelector !== 'rc'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Responsibility Center <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('rc', true)\"\r\n placeholder=\"Select Responsibility Center(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 0\"\r\n >\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <ng-container\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('rc', rcName)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"rcName.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ rcName.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"riskForm?.responsibilityCentersList?.length > 1\"\r\n >\r\n +{{ riskForm?.responsibilityCentersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i class=\"icons\" (click)=\"remove('rc',rcName)\"></i> {{rcName.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\" appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n </div> -->\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'rc'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('rc', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.responsibilityCentersList?.length == 0\"\r\n class=\"error-message\"\r\n >\r\n Assign this risk to a Responsibility Center(s)\r\n </p>\r\n <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let rcName of riskForm?.responsibilityCentersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc', rcName)\"></i>\r\n {{ rcName.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Frequency -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n sideSelectorElements?.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.riskType !== 'REPORTED'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '' ||\r\n activeSelector === 'frequency'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n (riskForm?.frequency_details?.frequency &&\r\n riskForm?.frequency_details?.frequency !== '') ||\r\n activeSelector !== 'frequency'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?\r\n <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'The option lets you specify the risk reassessment frequency.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"!riskForm?.frequency_details?.frequency\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <input\r\n type=\"text\"\r\n placeholder=\"Set a Reassessment Frequency\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected button-sec\"\r\n *ngIf=\"riskForm?.frequency_details?.frequency\"\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"frequencyPlaceholder\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ frequencyPlaceholder }}</span\r\n >\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <div class=\"vx-mt-1\">\r\n <app-cs-switch\r\n [ngValue]=\"riskForm?.enableAllFutureBusinessCycle\"\r\n (ngValueChange)=\"riskForm.enableAllFutureBusinessCycle = $event\"\r\n >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?\r\n </app-cs-switch>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n (!riskForm?.frequency_details?.frequency ||\r\n riskForm?.frequency_details?.frequency === '')\r\n \"\r\n class=\"error-message\"\r\n >\r\n Please select the frequency of occurrence for this risk.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'category' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img\r\n *ngIf=\"\r\n !riskForm?.category?.selectedCategory || activeSelector === 'category'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.category?.selectedCategory && activeSelector !== 'category'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Category\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('category', true)\"\r\n placeholder=\"Select Risk Category\"\r\n readonly\r\n />\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('category', riskForm.category.selectedCategory)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.category?.selectedCategory?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.category?.selectedCategory?.category_name }}</span\r\n >\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\" (click)=\"remove('category',riskForm.category.selectedCategory)\"></i>{{riskForm?.category?.selectedCategory?.category_name}}</span>\r\n </div> -->\r\n <button\r\n *ngIf=\"activeSelector !== 'category'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('category', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length > 0\">\r\n <div\r\n class=\"vx-form-group\"\r\n *ngFor=\"let tag of riskForm.categoryCustomTags\"\r\n >\r\n <label class=\"vx-control-panel\">{{ tag.custom_tag_name }}</label>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"tag.custom_tag_value\"\r\n [placeholder]=\"tag.custom_tag_name\"\r\n />\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Assessment Deadline -->\r\n <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'assessment'\"\r\n id=\"deadline\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'assessment' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days >= 1\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days < 1 ||\r\n activeSelector === 'assessment'\r\n \"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.assessment_deadline_days >= 1 &&\r\n activeSelector !== 'assessment'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Assessment Deadline <span class=\"required\">*</span>\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the date that the inherent risk assessment must be completed by.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div class=\"input\">\r\n <span class=\"text\">Set Number of days</span>\r\n <div class=\"input-group counter\">\r\n <button (click)=\"changeRiskAssessment('subtract')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <input\r\n type=\"number\"\r\n [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n (focusin)=\"activateSelector('assessment', true)\"\r\n (focusout)=\"activateSelector('assessment', false)\"\r\n name=\"riskAssessmentDeadline\"\r\n validateAssessment\r\n #deadline=\"ngModel\"\r\n (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n onkeydown=\"return event.keyCode !== 190\"\r\n min=\"0\"\r\n oninput=\"this.value = Math.abs(this.value)\"\r\n />\r\n <button (click)=\"changeRiskAssessment('add')\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <p\r\n *ngIf=\"submitted && riskForm?.assessment_deadline_days < 1\"\r\n class=\"error-message\"\r\n >\r\n Enter a value greater than 0.\r\n </p>\r\n <label\r\n class=\"vx-control-panel\"\r\n *ngIf=\"riskForm?.assessment_deadline_days >= 1\"\r\n >\r\n This risk assessment needs to be completed by\r\n {{ date | date : \"dd MMM yyyy\" }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Overseer -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'overseer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'overseer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addOverseer\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length > 0\">\r\n <img\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 && activeSelector !== 'overseer'\r\n \"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Oversight<i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length == 0 &&\r\n riskForm?.overseersGroupList?.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n placeholder=\"Select Risk Oversight(s)\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n riskForm?.overseersList?.length > 0 ||\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >\r\n <ng-container *ngIf=\"!featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let owner of riskForm?.overseersList?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"owner.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ owner.member_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverOverseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList?.slice(1).length }}\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"featureflag_groups\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('overseer', riskForm?.overseersList[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersList[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n *ngIf=\"riskForm?.overseersList.length > 0\"\r\n >{{ riskForm?.overseersList[0]?.member_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"overseer.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersList.length > 1\"\r\n >\r\n +{{ riskForm?.overseersList.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n riskForm?.overseersList.length > 0 &&\r\n riskForm?.overseersGroupList.length > 0\r\n \"\r\n >&</span\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngIf=\"riskForm?.overseersGroupList.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"\r\n remove('overseergroup', riskForm?.overseersGroupList[0])\r\n \"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"riskForm?.overseersGroupList[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ riskForm?.overseersGroupList[0]?.group_name }}</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"overseerGroup.popover()\"\r\n placement=\"right\"\r\n *ngIf=\"riskForm?.overseersGroupList?.length > 1\"\r\n >\r\n +{{ riskForm?.overseersGroupList?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"activeSelector !== 'overseer'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('overseer', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseer [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of riskForm?.overseersList | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer', owner)\"\r\n ></i\r\n >\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of riskForm?.overseersGroupList | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseergroup', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Mitigation Priority -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm.addMitigation\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\"\r\n *ngIf=\"!riskForm.mitigation\"\r\n alt=\"\"\r\n />\r\n <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n </svg> -->\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"riskForm.mitigation\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Risk Mitigation Priority\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'This sets the priority level for the mitigation of each risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n\r\n <cs-select\r\n [(ngModel)]=\"riskForm.mitigation\"\r\n [placeholder]=\"'Select a mitigation priority'\"\r\n name=\"riskForm.mitigation\"\r\n >\r\n <cs-option\r\n *ngFor=\"let data of mitigationDetails\"\r\n [value]=\"data?.mitigation_id\"\r\n [color]=\"data?.mitigation_color\"\r\n >\r\n {{ data.mitigation_name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Recommended Mitigation Plan -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n *ngIf=\"riskForm?.addMitigationPlan\"\r\n >\r\n <div\r\n id=\"riskSpace\"\r\n class=\"left\"\r\n [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n >\r\n <img\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) === ''\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\"\r\n alt=\"\"\r\n />\r\n <svg\r\n *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label for=\"\" class=\"vx-control-panel\"\r\n >Recommended Mitigation Plans<link\r\n rel=\"manifest\"\r\n href=\"./manifest.json\"\r\n />\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'Specify the mitigation plan that can be undertaken to mitigate the risk.'\r\n \"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </label>\r\n <vcomply-editor\r\n [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n [editorConfig]=\"mitigationDescriptionPlan\"\r\n (clickOutside)=\"checkMitigationPlan()\"\r\n >\r\n </vcomply-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Label -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.addRiskLabel\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <!-- <img *ngIf=\"true\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" /> -->\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n *ngIf=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >RISK LABEL\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"'Risk label info text here...'\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></label\r\n >\r\n <cs-select\r\n [(ngModel)]=\"riskForm.riskLabelValue\"\r\n [placeholder]=\"'Select a risk label'\"\r\n name=\"riskForm?.riskLabelValue\"\r\n >\r\n <cs-option *ngFor=\"let data of riskLabelList\" [value]=\"data?.value\">\r\n {{ data?.name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link with GRC -->\r\n <div\r\n [appScrollInView]=\"scrollToBottom\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'GRC'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'GRC' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n *ngIf=\"riskForm?.GRC\"\r\n >\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length > 0\">\r\n <img\r\n *ngIf=\"riskForm?.ownersList?.length == 0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg alt=\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">LINK GRC OBJECT(S) </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.selectedGRCObjects?.length === 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('GRC', true)\"\r\n placeholder=\"Select GRC object(s) to link with this risk.\"\r\n readonly\r\n />\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.selectedGRCObjects?.length\">\r\n <ng-container\r\n *ngFor=\"\r\n let selectedGRC of grcDataWithTypes | keyvalue : originalOrder;\r\n let i = index\r\n \"\r\n >\r\n <div *ngIf=\"selectedGRC?.value?.length\" class=\"selected vx-mb-2\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"let grc of selectedGRC?.value?.slice(0, 1)\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"remove('GRC', grc, 0)\"\r\n ></i\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ selectedGRC?.key | titlecase }}\r\n </div>\r\n\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"grc?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ grc?.name }}</span\r\n >\r\n </ng-container>\r\n\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"popoverGRC.popover()\"\r\n placement=\"left\"\r\n *ngIf=\"selectedGRC?.value?.length > 1\"\r\n >\r\n +{{ selectedGRC?.value.length - 1 }}\r\n </button>\r\n </div>\r\n\r\n <button\r\n *ngIf=\"activeSelector !== 'GRC'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"\r\n selectedGRCTab = selectedGRC?.value[0]?.type;\r\n getOtherGRCObjects();\r\n activateSelector('GRC', true)\r\n \"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #popoverGRC [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let grc of selectedGRC?.value | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('GRC', grc, j + 1)\"\r\n ></i\r\n >\r\n {{ grc.name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<app-responsibility-centers-list\r\n *ngIf=\"activeSelector === 'rc'\"\r\n [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\"\r\n [rcIdKey]=\"'rc_id'\"\r\n (saveSelectedList)=\"saveSelectedRCList($event)\"\r\n (closeRcList)=\"activateSelector('rc', false)\"\r\n [singularText]=\"'Responsibility Center selected'\"\r\n [pluralText]=\"'Responsibility Centers selected'\"\r\n>\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'owner'\"\r\n [usersList]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n (closeUsersList)=\"activateSelector('owner', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n></app-owner-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'owner'\"\r\n [userlist]=\"ownersList\"\r\n [selectedUsers]=\"riskForm.ownersList\"\r\n [groupList]=\"groupsList\"\r\n [nonRemovableUserIds]=\"nonRemovableUsersList\"\r\n (save)=\"saveSelectedOwnersList($event)\"\r\n [selectedGroups]=\"riskForm.groupsList\"\r\n (cancel)=\"activateSelector('owner', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<user-group-list\r\n *ngIf=\"featureflag_groups && activeSelector === 'overseer'\"\r\n [userlist]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [groupList]=\"overseersGroupList\"\r\n (save)=\"saveSelectedOverseersList($event)\"\r\n [selectedGroups]=\"riskForm.overseersGroupList\"\r\n (cancel)=\"activateSelector('overseer', false)\"\r\n [groupEnabled]=\"true\"\r\n [featureflag]=\"featureflag_groups\"\r\n>\r\n</user-group-list>\r\n\r\n<app-category-list\r\n *ngIf=\"activeSelector === 'category'\"\r\n [categoryList]=\"categoryList\"\r\n [selectedCategory]=\"riskForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n (closeCategoriesList)=\"activateSelector('category', false)\"\r\n></app-category-list>\r\n<app-owner-list\r\n *ngIf=\"!featureflag_groups && activeSelector === 'overseer'\"\r\n [usersList]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n (saveSelectedList)=\"saveSelectedOverseersList($event)\"\r\n (closeUsersList)=\"activateSelector('overseer', false)\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n>\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n<app-frequency-dialog-container\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\"\r\n (closeFrequency)=\"activateSelector('frequency', false)\"\r\n>\r\n</app-frequency-dialog-container>\r\n\r\n<app-grc-object-list\r\n *ngIf=\"activeSelector === 'GRC'\"\r\n [grcObject]=\"grcList\"\r\n [selectedGRC]=\"riskForm.selectedGRCObjects | refDisconnect\"\r\n [loader]=\"grcLoader\"\r\n [tableCard]=\"otherGRCCard | refDisconnect\"\r\n [selectedTab]=\"selectedGRCTab\"\r\n (getOtherGRCObjects)=\"getOtherGRCObjects($event)\"\r\n (saveOtherGRC)=\"saveSelectedList($event)\"\r\n (closeOtherGRC)=\"activateSelector('GRC', false)\"\r\n></app-grc-object-list>\r\n\r\n<app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\"\r\n>\r\n</app-smiley-dialog-inline>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflw-risk{display:block;position:relative}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.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/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.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\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#ffffff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#ffffff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#ffffff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#ffffff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group vcomply-editor{margin-top:8px;display:block}::ng-deep .vx-form-group vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#ffffff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#ffffff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li .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 .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#ffffff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#ffffff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"] }]
|
|
11198
11208
|
}], ctorParameters: function () {
|
|
11199
11209
|
return [{ type: AddRiskService }, { type: AuthService }, { type: UiKitService }, { type: SnackBarService }, { type: FrequencyService }, { type: GrcService }, { type: Configurations, decorators: [{
|
|
11200
11210
|
type: Optional
|
|
@@ -30352,10 +30362,10 @@ class MoreOptionComponent {
|
|
|
30352
30362
|
}
|
|
30353
30363
|
}
|
|
30354
30364
|
MoreOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30355
|
-
MoreOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreOptionComponent, selector: "app-more-option", inputs: { currentWorkflow: "currentWorkflow", openedFrom: "openedFrom", isEditMode: "isEditMode", isRCSelected: "isRCSelected", isProgramSelected: "isProgramSelected", allowedFeature: "allowedFeature", getOrganizationDetails: ["orgDetailsData", "getOrganizationDetails"], isAttributesAvailable: "isAttributesAvailable" }, outputs: { selectedOption: "selectedOption" }, usesOnChanges: true, ngImport: i0, template: "<!-- <p>more-option works!</p> -->\r\n<div class=\"more-option\">\r\n <div class=\"message-container\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/add-risk-more-option.svg\"\r\n alt=\"\"\r\n />\r\n <p *ngIf=\"currentWorkflow\">{{ placeholderTexts[currentWorkflow] }}</p>\r\n </div>\r\n <div class=\"more-options\">\r\n <ul>\r\n <!-- <div class=\"more-options-heading\" *ngIf=\"currentWorkflow ==='CAPR'\">PROGRAM SCOPE OPTIONS</div> -->\r\n <ng-container\r\n *ngFor=\"let data of moreOptionsList[currentWorkflow]; let i = index\"\r\n >\r\n <!-- <li *ngIf=\"!data.hidden\" [appTooltip]=\"data.isDisabled && !isRcSelected? 'This responsibility can be scheduled for an audit only after the Responsibility Center is selected.' : ''\" placement=\"right\" delay=\"0\" [tooltipMandatory]=\"data.isDisabled && !isRcSelected\">\r\n <button [class.active]=\"data.checked\" [disabled]=\"data.code === 'RC' && openedFrom === 'RISK_TREATMENT' && currentWorkflow === 'CAR' || (data.isDisabled && !isRCSelected)\" [class.disabled]=\"data.isDisabled && !isRCSelected\" (click)=\"data.checked = !data.checked; selectMoreOption(data)\"> -->\r\n\r\n <li\r\n *ngIf=\"!data.hidden\"\r\n [appTooltip]=\"\r\n data.isDisabled ||\r\n (((data.code === 'RC' && !isRcSelected) ||\r\n data.code === 'ATTRIBUTES') &&\r\n data.isDisabled)\r\n ? data?.disabledMessage\r\n : ''\r\n \"\r\n placement=\"right\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"data.isDisabled\"\r\n id=\"listdata\"\r\n >\r\n <button\r\n [class.active]=\"data.checked\"\r\n [disabled]=\"\r\n (data.code === 'RC' &&\r\n openedFrom === 'RISK_TREATMENT' &&\r\n currentWorkflow === 'CAR') ||\r\n data.isDisabled ||\r\n (data.isDisabled && !isRCSelected)\r\n \"\r\n (click)=\"selectMoreOption(data, i)\"\r\n >\r\n <span *ngIf=\"!data.checked\" class=\"more-icon\">\r\n <img [src]=\"data.imageUrl\" alt=\"\" />\r\n </span>\r\n <svg\r\n *ngIf=\"data.checked\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n <span\r\n class=\"value\"\r\n [innerHTML]=\"data?.name\"\r\n [appTooltip]=\"data?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n ></span>\r\n <!-- <span *ngIf=\"data.code ==='CHECKPOINTS_NEW'\" class=\"checkpoint-version\"> V2.0</span> -->\r\n </button>\r\n <span\r\n class=\"icon\"\r\n *ngIf=\"data.tooltipMessage !== ''\"\r\n libPopoverHover\r\n (mouseover)=\"dataTooltip.popover()\"\r\n (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"\r\n ><i class=\"icons\"></i></span\r\n >\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div\r\n class=\"vx-info-card-head\"\r\n [innerHTML]=\"data.tooltipTitle\"\r\n ></div>\r\n <div\r\n class=\"vx-info-card-body\"\r\n [innerHTML]=\"data.tooltipMessage\"\r\n ></div>\r\n </div>\r\n </popover-hover>\r\n </li>\r\n <div\r\n class=\"more-options-heading vx-mt-2\"\r\n *ngIf=\"currentWorkflow === 'CAPR' && i === 2\"\r\n >\r\n PROGRAM SCOPE OPTIONS\r\n </div>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n</div>\r\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/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";::ng-deep .more-option{align-items:center;position:relative;padding:0;display:block;height:auto}::ng-deep .more-option .message-container{text-align:center;position:static;padding:0 0 20px;top:0;left:0;right:0}::ng-deep .more-option .message-container img{width:163px;margin-bottom:13px;display:inline-block}@media screen and (max-height: 900px){::ng-deep .more-option .message-container img{width:120px;margin-bottom:8px}}::ng-deep .more-option .message-container p{font-size:12px;font-weight:300;font-style:italic;color:#707070;margin:0;padding:0;line-height:18px}::ng-deep .more-option .more-options{display:block;background:#ffffff;margin-left:-38px;padding:20px 0 20px 16px;position:relative;width:calc(100% + 60px);border-radius:16px 0 0 16px}::ng-deep .more-option .more-options:before{content:\"\";position:absolute;left:0;top:-35px;width:16px;height:41px;border-right:26px solid #FFFFFF;border-bottom:8px solid transparent;border-bottom-right-radius:46px}::ng-deep .more-option .more-options:after{content:\"\";position:absolute;left:0;bottom:-35px;width:16px;height:41px;border-right:26px solid #FFFFFF;border-top:8px solid transparent;border-top-right-radius:46px}@media screen and (max-width: 2550px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1920px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1600px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1440px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1366px){::ng-deep .more-option .more-options{margin-top:0}}::ng-deep .more-option .more-options ul{padding:0 32px 0 0;margin:0;overflow-y:auto}::ng-deep .more-option .more-options ul::-webkit-scrollbar{width:0;background-color:transparent}::ng-deep .more-option .more-options ul::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb}::ng-deep .more-option .more-options ul .more-options-heading{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}::ng-deep .more-option .more-options ul li{position:relative;list-style:none;display:flex;align-items:center}::ng-deep .more-option .more-options ul li button{display:flex;outline:none;background:transparent;cursor:pointer;align-items:center;justify-content:flex-start;margin:0;width:100%;border:none;padding:4px 11px 4px 4px;border:1px solid #F1F1F1;border-radius:4px}::ng-deep .more-option .more-options ul li button.active{background:#FBFBFB}::ng-deep .more-option .more-options ul li button span.more-icon{height:32px;width:32px;display:flex;margin-right:12px;align-items:center;justify-content:center}::ng-deep .more-option .more-options ul li button img{width:100%}::ng-deep .more-option .more-options ul li button .checkIcon{width:24px;height:24px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin:4px 16px 4px 4px}::ng-deep .more-option .more-options ul li button .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .more-option .more-options ul li button .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .more-option .more-options ul li button span.value{line-height:18px;color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase;width:calc(100% - 72px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;text-align:left}::ng-deep .more-option .more-options ul li button span.value i.depreciation-icon{color:#e4b700}::ng-deep .more-option .more-options ul li button .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .more-option .more-options ul li button:disabled{background:#f8f8f8;pointer-events:none}::ng-deep .more-option .more-options ul li button:disabled span{opacity:.3}::ng-deep .more-option .more-options ul li+li{margin-top:8px}::ng-deep .more-option .more-options ul li .vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}::ng-deep .more-option .more-options ul li .vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}::ng-deep .more-option .more-options ul li .vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}::ng-deep .more-option .more-options ul li span.icon{color:#1e5dd3;font-size:12px;line-height:12px;cursor:pointer;position:absolute;top:calc(50% - 6px);right:12px;height:12px;width:12px}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes animate{0%{transform:translate(281px)}to{transform:translate(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverHoverComponent, selector: "popover-hover" }, { kind: "directive", type: PopoverHoverDirective, selector: "[libPopoverHover]", inputs: ["placement"] }] });
|
|
30365
|
+
MoreOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreOptionComponent, selector: "app-more-option", inputs: { currentWorkflow: "currentWorkflow", openedFrom: "openedFrom", isEditMode: "isEditMode", isRCSelected: "isRCSelected", isProgramSelected: "isProgramSelected", allowedFeature: "allowedFeature", getOrganizationDetails: ["orgDetailsData", "getOrganizationDetails"], isAttributesAvailable: "isAttributesAvailable" }, outputs: { selectedOption: "selectedOption" }, usesOnChanges: true, ngImport: i0, template: "<!-- <p>more-option works!</p> -->\r\n<div class=\"more-option\">\r\n <div class=\"message-container\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/add-risk-more-option.svg\"\r\n alt=\"\"\r\n />\r\n <p *ngIf=\"currentWorkflow\">{{ placeholderTexts[currentWorkflow] }}</p>\r\n </div>\r\n <div class=\"more-options\">\r\n <ul>\r\n <!-- <div class=\"more-options-heading\" *ngIf=\"currentWorkflow ==='CAPR'\">PROGRAM SCOPE OPTIONS</div> -->\r\n <ng-container\r\n *ngFor=\"let data of moreOptionsList[currentWorkflow]; let i = index\"\r\n >\r\n <!-- <li *ngIf=\"!data.hidden\" [appTooltip]=\"data.isDisabled && !isRcSelected? 'This responsibility can be scheduled for an audit only after the Responsibility Center is selected.' : ''\" placement=\"right\" delay=\"0\" [tooltipMandatory]=\"data.isDisabled && !isRcSelected\">\r\n <button [class.active]=\"data.checked\" [disabled]=\"data.code === 'RC' && openedFrom === 'RISK_TREATMENT' && currentWorkflow === 'CAR' || (data.isDisabled && !isRCSelected)\" [class.disabled]=\"data.isDisabled && !isRCSelected\" (click)=\"data.checked = !data.checked; selectMoreOption(data)\"> -->\r\n\r\n <li\r\n *ngIf=\"!data.hidden\"\r\n [appTooltip]=\"\r\n data.isDisabled ||\r\n (((data.code === 'RC' && !isRcSelected) ||\r\n data.code === 'ATTRIBUTES') &&\r\n data.isDisabled)\r\n ? data?.disabledMessage\r\n : ''\r\n \"\r\n placement=\"right\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"data.isDisabled\"\r\n id=\"listdata\"\r\n >\r\n <button\r\n [class.active]=\"data.checked\"\r\n [disabled]=\"\r\n (data.code === 'RC' &&\r\n openedFrom === 'RISK_TREATMENT' &&\r\n currentWorkflow === 'CAR') ||\r\n data.isDisabled ||\r\n (data.isDisabled && !isRCSelected)\r\n \"\r\n (click)=\"selectMoreOption(data, i)\"\r\n >\r\n <span *ngIf=\"!data.checked\" class=\"more-icon\">\r\n <img [src]=\"data.imageUrl\" alt=\"\" />\r\n </span>\r\n <svg\r\n *ngIf=\"data.checked\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n <span\r\n class=\"value\"\r\n [innerHTML]=\"data?.name\"\r\n [appTooltip]=\"data?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n ></span>\r\n <!-- <span *ngIf=\"data.code ==='CHECKPOINTS_NEW'\" class=\"checkpoint-version\"> V2.0</span> -->\r\n </button>\r\n <span\r\n class=\"icon\"\r\n *ngIf=\"data.tooltipMessage !== ''\"\r\n libPopoverHover\r\n (mouseover)=\"dataTooltip.popover()\"\r\n (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"\r\n ><i class=\"icons\"></i></span\r\n >\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div\r\n class=\"vx-info-card-head\"\r\n [innerHTML]=\"data.tooltipTitle\"\r\n ></div>\r\n <div\r\n class=\"vx-info-card-body\"\r\n [innerHTML]=\"data.tooltipMessage\"\r\n ></div>\r\n </div>\r\n </popover-hover>\r\n </li>\r\n <div\r\n class=\"more-options-heading vx-mt-2\"\r\n *ngIf=\"currentWorkflow === 'CAPR' && i === 2\"\r\n >\r\n PROGRAM SCOPE OPTIONS\r\n </div>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n</div>\r\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/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";::ng-deep .more-option{align-items:center;position:relative;padding:0;display:block;height:auto}::ng-deep .more-option .message-container{text-align:center;position:static;padding:0 0 20px;top:0;left:0;right:0}::ng-deep .more-option .message-container img{width:163px;margin-bottom:13px;display:inline-block}@media screen and (max-height: 900px){::ng-deep .more-option .message-container img{width:120px;margin-bottom:8px}}::ng-deep .more-option .message-container p{font-size:12px;font-weight:300;font-style:italic;color:#707070;margin:0;padding:0;line-height:18px}::ng-deep .more-option .more-options{display:block;background:#ffffff;margin-left:-38px;padding:20px 0 20px 16px;position:relative;width:calc(100% + 60px);border-radius:16px 0 0 16px}::ng-deep .more-option .more-options:before{content:\"\";position:absolute;left:0;top:-35px;width:16px;height:41px;border-right:26px solid #ffffff;border-bottom:8px solid transparent;border-bottom-right-radius:46px}::ng-deep .more-option .more-options:after{content:\"\";position:absolute;left:0;bottom:-35px;width:16px;height:41px;border-right:26px solid #ffffff;border-top:8px solid transparent;border-top-right-radius:46px}@media screen and (max-width: 2550px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1920px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1600px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1440px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1366px){::ng-deep .more-option .more-options{margin-top:0}}::ng-deep .more-option .more-options ul{padding:0 32px 0 0;margin:0;overflow-y:auto}::ng-deep .more-option .more-options ul::-webkit-scrollbar{width:0;background-color:transparent}::ng-deep .more-option .more-options ul::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb}::ng-deep .more-option .more-options ul .more-options-heading{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}::ng-deep .more-option .more-options ul li{position:relative;list-style:none;display:flex;align-items:center}::ng-deep .more-option .more-options ul li button{display:flex;outline:none;background:transparent;cursor:pointer;align-items:center;justify-content:flex-start;margin:0;width:100%;border:none;padding:4px 11px 4px 4px;border:1px solid #f1f1f1;border-radius:4px}::ng-deep .more-option .more-options ul li button.active{background:#fbfbfb}::ng-deep .more-option .more-options ul li button span.more-icon{height:32px;width:32px;display:flex;margin-right:12px;align-items:center;justify-content:center}::ng-deep .more-option .more-options ul li button img{width:100%}::ng-deep .more-option .more-options ul li button .checkIcon{width:24px;height:24px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin:4px 16px 4px 4px}::ng-deep .more-option .more-options ul li button .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .more-option .more-options ul li button .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .more-option .more-options ul li button span.value{line-height:18px;color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase;width:calc(100% - 72px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;text-align:left}::ng-deep .more-option .more-options ul li button span.value i.depreciation-icon{color:#e4b700}::ng-deep .more-option .more-options ul li button .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .more-option .more-options ul li button:disabled{background:#f8f8f8;pointer-events:none}::ng-deep .more-option .more-options ul li button:disabled span{opacity:.3}::ng-deep .more-option .more-options ul li+li{margin-top:8px}::ng-deep .more-option .more-options ul li .vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}::ng-deep .more-option .more-options ul li .vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}::ng-deep .more-option .more-options ul li .vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}::ng-deep .more-option .more-options ul li span.icon{color:#1e5dd3;font-size:12px;line-height:12px;cursor:pointer;position:absolute;top:calc(50% - 6px);right:12px;height:12px;width:12px}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes animate{0%{transform:translate(281px)}to{transform:translate(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverHoverComponent, selector: "popover-hover" }, { kind: "directive", type: PopoverHoverDirective, selector: "[libPopoverHover]", inputs: ["placement"] }] });
|
|
30356
30366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreOptionComponent, decorators: [{
|
|
30357
30367
|
type: Component,
|
|
30358
|
-
args: [{ selector: 'app-more-option', template: "<!-- <p>more-option works!</p> -->\r\n<div class=\"more-option\">\r\n <div class=\"message-container\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/add-risk-more-option.svg\"\r\n alt=\"\"\r\n />\r\n <p *ngIf=\"currentWorkflow\">{{ placeholderTexts[currentWorkflow] }}</p>\r\n </div>\r\n <div class=\"more-options\">\r\n <ul>\r\n <!-- <div class=\"more-options-heading\" *ngIf=\"currentWorkflow ==='CAPR'\">PROGRAM SCOPE OPTIONS</div> -->\r\n <ng-container\r\n *ngFor=\"let data of moreOptionsList[currentWorkflow]; let i = index\"\r\n >\r\n <!-- <li *ngIf=\"!data.hidden\" [appTooltip]=\"data.isDisabled && !isRcSelected? 'This responsibility can be scheduled for an audit only after the Responsibility Center is selected.' : ''\" placement=\"right\" delay=\"0\" [tooltipMandatory]=\"data.isDisabled && !isRcSelected\">\r\n <button [class.active]=\"data.checked\" [disabled]=\"data.code === 'RC' && openedFrom === 'RISK_TREATMENT' && currentWorkflow === 'CAR' || (data.isDisabled && !isRCSelected)\" [class.disabled]=\"data.isDisabled && !isRCSelected\" (click)=\"data.checked = !data.checked; selectMoreOption(data)\"> -->\r\n\r\n <li\r\n *ngIf=\"!data.hidden\"\r\n [appTooltip]=\"\r\n data.isDisabled ||\r\n (((data.code === 'RC' && !isRcSelected) ||\r\n data.code === 'ATTRIBUTES') &&\r\n data.isDisabled)\r\n ? data?.disabledMessage\r\n : ''\r\n \"\r\n placement=\"right\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"data.isDisabled\"\r\n id=\"listdata\"\r\n >\r\n <button\r\n [class.active]=\"data.checked\"\r\n [disabled]=\"\r\n (data.code === 'RC' &&\r\n openedFrom === 'RISK_TREATMENT' &&\r\n currentWorkflow === 'CAR') ||\r\n data.isDisabled ||\r\n (data.isDisabled && !isRCSelected)\r\n \"\r\n (click)=\"selectMoreOption(data, i)\"\r\n >\r\n <span *ngIf=\"!data.checked\" class=\"more-icon\">\r\n <img [src]=\"data.imageUrl\" alt=\"\" />\r\n </span>\r\n <svg\r\n *ngIf=\"data.checked\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n <span\r\n class=\"value\"\r\n [innerHTML]=\"data?.name\"\r\n [appTooltip]=\"data?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n ></span>\r\n <!-- <span *ngIf=\"data.code ==='CHECKPOINTS_NEW'\" class=\"checkpoint-version\"> V2.0</span> -->\r\n </button>\r\n <span\r\n class=\"icon\"\r\n *ngIf=\"data.tooltipMessage !== ''\"\r\n libPopoverHover\r\n (mouseover)=\"dataTooltip.popover()\"\r\n (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"\r\n ><i class=\"icons\"></i></span\r\n >\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div\r\n class=\"vx-info-card-head\"\r\n [innerHTML]=\"data.tooltipTitle\"\r\n ></div>\r\n <div\r\n class=\"vx-info-card-body\"\r\n [innerHTML]=\"data.tooltipMessage\"\r\n ></div>\r\n </div>\r\n </popover-hover>\r\n </li>\r\n <div\r\n class=\"more-options-heading vx-mt-2\"\r\n *ngIf=\"currentWorkflow === 'CAPR' && i === 2\"\r\n >\r\n PROGRAM SCOPE OPTIONS\r\n </div>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n</div>\r\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/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";::ng-deep .more-option{align-items:center;position:relative;padding:0;display:block;height:auto}::ng-deep .more-option .message-container{text-align:center;position:static;padding:0 0 20px;top:0;left:0;right:0}::ng-deep .more-option .message-container img{width:163px;margin-bottom:13px;display:inline-block}@media screen and (max-height: 900px){::ng-deep .more-option .message-container img{width:120px;margin-bottom:8px}}::ng-deep .more-option .message-container p{font-size:12px;font-weight:300;font-style:italic;color:#707070;margin:0;padding:0;line-height:18px}::ng-deep .more-option .more-options{display:block;background:#ffffff;margin-left:-38px;padding:20px 0 20px 16px;position:relative;width:calc(100% + 60px);border-radius:16px 0 0 16px}::ng-deep .more-option .more-options:before{content:\"\";position:absolute;left:0;top:-35px;width:16px;height:41px;border-right:26px solid #FFFFFF;border-bottom:8px solid transparent;border-bottom-right-radius:46px}::ng-deep .more-option .more-options:after{content:\"\";position:absolute;left:0;bottom:-35px;width:16px;height:41px;border-right:26px solid #FFFFFF;border-top:8px solid transparent;border-top-right-radius:46px}@media screen and (max-width: 2550px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1920px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1600px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1440px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1366px){::ng-deep .more-option .more-options{margin-top:0}}::ng-deep .more-option .more-options ul{padding:0 32px 0 0;margin:0;overflow-y:auto}::ng-deep .more-option .more-options ul::-webkit-scrollbar{width:0;background-color:transparent}::ng-deep .more-option .more-options ul::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb}::ng-deep .more-option .more-options ul .more-options-heading{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}::ng-deep .more-option .more-options ul li{position:relative;list-style:none;display:flex;align-items:center}::ng-deep .more-option .more-options ul li button{display:flex;outline:none;background:transparent;cursor:pointer;align-items:center;justify-content:flex-start;margin:0;width:100%;border:none;padding:4px 11px 4px 4px;border:1px solid #F1F1F1;border-radius:4px}::ng-deep .more-option .more-options ul li button.active{background:#FBFBFB}::ng-deep .more-option .more-options ul li button span.more-icon{height:32px;width:32px;display:flex;margin-right:12px;align-items:center;justify-content:center}::ng-deep .more-option .more-options ul li button img{width:100%}::ng-deep .more-option .more-options ul li button .checkIcon{width:24px;height:24px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin:4px 16px 4px 4px}::ng-deep .more-option .more-options ul li button .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .more-option .more-options ul li button .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .more-option .more-options ul li button span.value{line-height:18px;color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase;width:calc(100% - 72px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;text-align:left}::ng-deep .more-option .more-options ul li button span.value i.depreciation-icon{color:#e4b700}::ng-deep .more-option .more-options ul li button .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .more-option .more-options ul li button:disabled{background:#f8f8f8;pointer-events:none}::ng-deep .more-option .more-options ul li button:disabled span{opacity:.3}::ng-deep .more-option .more-options ul li+li{margin-top:8px}::ng-deep .more-option .more-options ul li .vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}::ng-deep .more-option .more-options ul li .vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}::ng-deep .more-option .more-options ul li .vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}::ng-deep .more-option .more-options ul li span.icon{color:#1e5dd3;font-size:12px;line-height:12px;cursor:pointer;position:absolute;top:calc(50% - 6px);right:12px;height:12px;width:12px}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes animate{0%{transform:translate(281px)}to{transform:translate(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
30368
|
+
args: [{ selector: 'app-more-option', template: "<!-- <p>more-option works!</p> -->\r\n<div class=\"more-option\">\r\n <div class=\"message-container\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/add-risk-more-option.svg\"\r\n alt=\"\"\r\n />\r\n <p *ngIf=\"currentWorkflow\">{{ placeholderTexts[currentWorkflow] }}</p>\r\n </div>\r\n <div class=\"more-options\">\r\n <ul>\r\n <!-- <div class=\"more-options-heading\" *ngIf=\"currentWorkflow ==='CAPR'\">PROGRAM SCOPE OPTIONS</div> -->\r\n <ng-container\r\n *ngFor=\"let data of moreOptionsList[currentWorkflow]; let i = index\"\r\n >\r\n <!-- <li *ngIf=\"!data.hidden\" [appTooltip]=\"data.isDisabled && !isRcSelected? 'This responsibility can be scheduled for an audit only after the Responsibility Center is selected.' : ''\" placement=\"right\" delay=\"0\" [tooltipMandatory]=\"data.isDisabled && !isRcSelected\">\r\n <button [class.active]=\"data.checked\" [disabled]=\"data.code === 'RC' && openedFrom === 'RISK_TREATMENT' && currentWorkflow === 'CAR' || (data.isDisabled && !isRCSelected)\" [class.disabled]=\"data.isDisabled && !isRCSelected\" (click)=\"data.checked = !data.checked; selectMoreOption(data)\"> -->\r\n\r\n <li\r\n *ngIf=\"!data.hidden\"\r\n [appTooltip]=\"\r\n data.isDisabled ||\r\n (((data.code === 'RC' && !isRcSelected) ||\r\n data.code === 'ATTRIBUTES') &&\r\n data.isDisabled)\r\n ? data?.disabledMessage\r\n : ''\r\n \"\r\n placement=\"right\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"data.isDisabled\"\r\n id=\"listdata\"\r\n >\r\n <button\r\n [class.active]=\"data.checked\"\r\n [disabled]=\"\r\n (data.code === 'RC' &&\r\n openedFrom === 'RISK_TREATMENT' &&\r\n currentWorkflow === 'CAR') ||\r\n data.isDisabled ||\r\n (data.isDisabled && !isRCSelected)\r\n \"\r\n (click)=\"selectMoreOption(data, i)\"\r\n >\r\n <span *ngIf=\"!data.checked\" class=\"more-icon\">\r\n <img [src]=\"data.imageUrl\" alt=\"\" />\r\n </span>\r\n <svg\r\n *ngIf=\"data.checked\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n <span\r\n class=\"value\"\r\n [innerHTML]=\"data?.name\"\r\n [appTooltip]=\"data?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n ></span>\r\n <!-- <span *ngIf=\"data.code ==='CHECKPOINTS_NEW'\" class=\"checkpoint-version\"> V2.0</span> -->\r\n </button>\r\n <span\r\n class=\"icon\"\r\n *ngIf=\"data.tooltipMessage !== ''\"\r\n libPopoverHover\r\n (mouseover)=\"dataTooltip.popover()\"\r\n (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"\r\n ><i class=\"icons\"></i></span\r\n >\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div\r\n class=\"vx-info-card-head\"\r\n [innerHTML]=\"data.tooltipTitle\"\r\n ></div>\r\n <div\r\n class=\"vx-info-card-body\"\r\n [innerHTML]=\"data.tooltipMessage\"\r\n ></div>\r\n </div>\r\n </popover-hover>\r\n </li>\r\n <div\r\n class=\"more-options-heading vx-mt-2\"\r\n *ngIf=\"currentWorkflow === 'CAPR' && i === 2\"\r\n >\r\n PROGRAM SCOPE OPTIONS\r\n </div>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n</div>\r\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/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";::ng-deep .more-option{align-items:center;position:relative;padding:0;display:block;height:auto}::ng-deep .more-option .message-container{text-align:center;position:static;padding:0 0 20px;top:0;left:0;right:0}::ng-deep .more-option .message-container img{width:163px;margin-bottom:13px;display:inline-block}@media screen and (max-height: 900px){::ng-deep .more-option .message-container img{width:120px;margin-bottom:8px}}::ng-deep .more-option .message-container p{font-size:12px;font-weight:300;font-style:italic;color:#707070;margin:0;padding:0;line-height:18px}::ng-deep .more-option .more-options{display:block;background:#ffffff;margin-left:-38px;padding:20px 0 20px 16px;position:relative;width:calc(100% + 60px);border-radius:16px 0 0 16px}::ng-deep .more-option .more-options:before{content:\"\";position:absolute;left:0;top:-35px;width:16px;height:41px;border-right:26px solid #ffffff;border-bottom:8px solid transparent;border-bottom-right-radius:46px}::ng-deep .more-option .more-options:after{content:\"\";position:absolute;left:0;bottom:-35px;width:16px;height:41px;border-right:26px solid #ffffff;border-top:8px solid transparent;border-top-right-radius:46px}@media screen and (max-width: 2550px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1920px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1600px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1440px){::ng-deep .more-option .more-options{margin-top:0}}@media screen and (max-width: 1366px){::ng-deep .more-option .more-options{margin-top:0}}::ng-deep .more-option .more-options ul{padding:0 32px 0 0;margin:0;overflow-y:auto}::ng-deep .more-option .more-options ul::-webkit-scrollbar{width:0;background-color:transparent}::ng-deep .more-option .more-options ul::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb}::ng-deep .more-option .more-options ul .more-options-heading{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase;margin-bottom:8px}::ng-deep .more-option .more-options ul li{position:relative;list-style:none;display:flex;align-items:center}::ng-deep .more-option .more-options ul li button{display:flex;outline:none;background:transparent;cursor:pointer;align-items:center;justify-content:flex-start;margin:0;width:100%;border:none;padding:4px 11px 4px 4px;border:1px solid #f1f1f1;border-radius:4px}::ng-deep .more-option .more-options ul li button.active{background:#fbfbfb}::ng-deep .more-option .more-options ul li button span.more-icon{height:32px;width:32px;display:flex;margin-right:12px;align-items:center;justify-content:center}::ng-deep .more-option .more-options ul li button img{width:100%}::ng-deep .more-option .more-options ul li button .checkIcon{width:24px;height:24px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin:4px 16px 4px 4px}::ng-deep .more-option .more-options ul li button .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .more-option .more-options ul li button .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .more-option .more-options ul li button span.value{line-height:18px;color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase;width:calc(100% - 72px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;text-align:left}::ng-deep .more-option .more-options ul li button span.value i.depreciation-icon{color:#e4b700}::ng-deep .more-option .more-options ul li button .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .more-option .more-options ul li button:disabled{background:#f8f8f8;pointer-events:none}::ng-deep .more-option .more-options ul li button:disabled span{opacity:.3}::ng-deep .more-option .more-options ul li+li{margin-top:8px}::ng-deep .more-option .more-options ul li .vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}::ng-deep .more-option .more-options ul li .vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}::ng-deep .more-option .more-options ul li .vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}::ng-deep .more-option .more-options ul li span.icon{color:#1e5dd3;font-size:12px;line-height:12px;cursor:pointer;position:absolute;top:calc(50% - 6px);right:12px;height:12px;width:12px}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes animate{0%{transform:translate(281px)}to{transform:translate(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
30359
30369
|
}], ctorParameters: function () { return []; }, propDecorators: { currentWorkflow: [{
|
|
30360
30370
|
type: Input
|
|
30361
30371
|
}], openedFrom: [{
|