vcomply-workflow-engine 2.9.24 → 2.9.26

package/esm2015/lib/sharedComponents/assessment-preview/single-textbox/single-textbox.component.js

@@ -8,7 +8,7 @@ SingleTextboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-single-textbox',
                 template: "<div class=\"question-block\">\r\n    <div class=\"question-head vx-d-flex vx-mb-4\">\r\n        <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n        <span class=\"heading vx-pl-3\">\r\n            <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\"></span>\r\n            <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\">*</span>\r\n        </span>\r\n    </div>\r\n    <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description?.trim().length  > 0 \" [innerHTML]=\"question?.description\"></div>\r\n    <div class=\"question-options\">\r\n        <input class=\"single-textbox vx-bg-white vx-fs-14 vx-lh-24 vx-paragraph-txt\" type=\"text\"  [placeholder]=\"(question?.isPlaceholder === true  && question?.placeholder?.trim().length > 0) ? question?.placeholder.trim() : 'Please enter a response'\">\r\n    </div>\r\n    <div class=\"question-quick-settings\">\r\n        <app-quick-settings [question]=\"question\"></app-quick-settings>\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/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .single-textbox{border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:13px;height:2.5rem;padding:.5rem .75rem;width:37.5rem;outline:none;transition:all .2s ease-in-out}::ng-deep .question-options .single-textbox:hover,::ng-deep .question-options .single-textbox:focus{border:1px solid #1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-2.25rem}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .single-textbox{border:1px solid #dbdbdb;border-radius:.25rem;color:#747576;font-size:13px;height:2.5rem;padding:.5rem .75rem;width:37.5rem;outline:none;transition:all .2s ease-in-out}::ng-deep .question-options .single-textbox:focus,::ng-deep .question-options .single-textbox:hover{border:1px solid #1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-2.25rem}"]
             },] }
 ];
 SingleTextboxComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/assessment-preview/welcome/welcome.component.js

@@ -8,7 +8,7 @@ WelcomeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-preview-welcome',
                 template: "<div class=\"welcome-preview vx-text-center vx-mb-5\">\r\n    <div class=\"image\" *ngIf=\"questionDetails?.hasWelcomeImage && questionDetails?.welcomeImage !=''\"><img [src]=\"questionDetails?.welcomeImage\" /></div>\r\n    <div class=\"heading vx-fs-16 vx-paragraph-txt vx-lih-6 vx-mb-5\" *ngIf=\"questionDetails?.welcomeText\" [innerHTML]=\"questionDetails?.welcomeText\"></div>\r\n    <div *ngIf=\"questionDetails?.hasWelcomeDescription\"  class=\"details vx-fs-14 vx-label-txt vx-pb-3 vx-mb-5\" [innerHTML]=\"questionDetails?.welcomeDescription\"> </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/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.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\";.welcome-preview .image{width:30rem;margin:0 auto 2rem}.welcome-preview .image img{border-radius:.625rem;width:100%}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");.welcome-preview .image{width:30rem;margin:0 auto 2rem}.welcome-preview .image img{border-radius:.625rem;width:100%}"]
             },] }
 ];
 WelcomeComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/audit-category-list/audit-category-list.component.js

@@ -40,7 +40,7 @@ AuditCategoryListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-audit-category-list',
                 template: "<div class=\"audit-category-list\" [class.animate]=\"animation\">\r\n    <div class=\"audit-category-list-head\">\r\n        <h3 class=\"audit-category-list-title\">Select an Audit Category</h3>\r\n    </div>\r\n    <div class=\"audit-category-list-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"searchInput\" placeholder=\"Search Audit Category\" />\r\n        </div>\r\n        <ng-container> \r\n        <ul class=\"category-list\" [class.full-height]=\"false\">\r\n            <li *ngFor=\"let data of auditCategory | search: searchInput; let i = index;\">\r\n                <app-cs-radio  [value]=\"i\" (checkedEvent)=\"onCategorySelection(i)\" [checked]=\"selectedIndex === i\">\r\n                    <ul class=\"category-name\" >\r\n                        <li *ngFor=\"let parentCategory of data?.parent_category_names.slice()\" [appTooltip]=\"parentCategory\" placement=\"bottom\"\r\n                            delay=\"0\" [tooltipMandatory]=\"true\">{{parentCategory}}<i class=\"icons\">&#xe910;</i></li>\r\n                        <li [appTooltip]=\"data?.category_name\" placement=\"bottom\"\r\n                        delay=\"0\" [tooltipMandatory]=\"true\">{{data?.category_name}}</li>\r\n                    </ul>\r\n                </app-cs-radio>\r\n            </li>\r\n        </ul>\r\n        <app-no-data *ngIf=\"(auditCategory | search: searchInput)?.length == 0\"  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n        [noDataText]=\"'No Audit Category Found'\"></app-no-data>\r\n        </ng-container>\r\n    </div>\r\n    <app-floating-bar\r\n    [selectedData]=\"auditCategory[selectedIndex]?.category_name? [auditCategory[selectedIndex]]:[]\"\r\n    [displayElementKey]=\"'category_name'\" [singularText]=\"'Audit Category selected'\"\r\n    (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\"\r\n    (closeList)=\"close()\"\r\n    [isDisabled]=\"auditCategory.length === 0 || !auditCategory[selectedIndex]\"\r\n    ></app-floating-bar>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .audit-category-list{border-top:3px solid #1E5DD3;background:#ffffff;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .audit-category-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .audit-category-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .audit-category-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .audit-category-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .audit-category-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .audit-category-list-body .search-block{position:relative}::ng-deep .audit-category-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .audit-category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .audit-category-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .audit-category-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .audit-category-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .audit-category-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .audit-category-list-body ul{padding:0;margin:0}::ng-deep .audit-category-list-body ul.category-list{max-height:calc(100vh - 200px);overflow:auto;padding:16px 0 0;margin-top:8px;scrollbar-width:thin}::ng-deep .audit-category-list-body ul.category-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .audit-category-list-body ul.category-list li{padding:0 20px 16px 0;list-style:none}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio{display:flex}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label{width:100%}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value{width:100%;justify-content:flex-start;flex-wrap:wrap}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul{display:flex!important;align-items:center}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul.category-name,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul.category-name{color:#747576;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li{padding:0;max-width:200px}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:first-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:first-child{color:#1e5dd3}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:last-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:last-child{color:#34aa44}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li i,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li i{font-size:8px;color:#747576;margin:0 8px}::ng-deep .audit-category-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .audit-category-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}::-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}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .audit-category-list{border-top:3px solid #1e5dd3;background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .audit-category-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .audit-category-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .audit-category-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .audit-category-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .audit-category-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .audit-category-list-body .search-block{position:relative}::ng-deep .audit-category-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .audit-category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .audit-category-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .audit-category-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .audit-category-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .audit-category-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .audit-category-list-body ul{padding:0;margin:0}::ng-deep .audit-category-list-body ul.category-list{max-height:calc(100vh - 200px);overflow:auto;padding:16px 0 0;margin-top:8px;scrollbar-width:thin}::ng-deep .audit-category-list-body ul.category-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .audit-category-list-body ul.category-list li{padding:0 20px 16px 0;list-style:none}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio{display:flex}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label{width:100%}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value{width:100%;justify-content:flex-start;flex-wrap:wrap}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul{display:flex!important;align-items:center}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul.category-name,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul.category-name{color:#747576;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li{padding:0;max-width:200px}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:first-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:first-child{color:#1e5dd3}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li:last-child,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li:last-child{color:#34aa44}::ng-deep .audit-category-list-body ul.category-list li app-cs-checkbox label span.value ul li i,::ng-deep .audit-category-list-body ul.category-list li app-cs-radio label span.value ul li i{font-size:8px;color:#747576;margin:0 8px}::ng-deep .audit-category-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .audit-category-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}::-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}"]
             },] }
 ];
 AuditCategoryListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/bulk-responsibility-view/bulk-responsibility-view.component.js

@@ -50,7 +50,7 @@ BulkResponsibilityViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-bulk-responsibility-view',
                 template: "\r\n<ng-container *ngIf=\"responsibilityType === 'singleTab'\">\r\n<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" *ngFor=\"let heading of responsibilityBulkUpload?.header\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Due')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Due Date</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Day</div>\r\n                            <div class=\"exel-view-column\">Month</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Oversight')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Oversight </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!report.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}}\r\n                    <i *ngIf=\"!report?.responsibilityName\" class=\"icons\"\r\n                        [appTooltip]=\"'Enter a name for this responsibility.'\" placement=\"bottom-right\" type=\"white\"\r\n                        delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"report?.assignor && ((report?.assignor == report?.alwaysNotify) || (report?.assignor == report?.notifyOnFailure))\">\r\n                    {{report?.assignor}}\r\n                    <i *ngIf=\"((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n<!--\r\n                    <i *ngIf=\"((report?.assignor) && (report?.reviewer == report?.assignor))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>     -->\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || ((report?.assignee == report?.reviewer)\r\n                || (report?.assignee == report?.alwaysNotify) || (report?.assignee == report?.notifyOnFailure)) || (!report?.isValidUser)\">\r\n                    {{report?.assignee}}\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                    class=\"icons\"\r\n                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                </div>\r\n                <div class=\"exel-view-column\" id=\"resCategory\" *ngIf=\"report?.responsibilityCategory!==null\">{{report?.responsibilityCategory}}</div>\r\n                <div class=\"exel-view-column\" [class.error]=\"!report.frequency\">{{report?.frequency}}\r\n                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.day}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"!report.isValidDueDate\">{{report?.month}}\r\n                            <i *ngIf=\"!report?.isValidDueDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                            <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                <div class=\"exel-view-column\"\r\n                    [class.error]=\"report?.reviewer && ((report?.reviewer == report?.alwaysNotify) ||  (report?.reviewer == report?.notifyOnFailure)\r\n                      || (report?.reviewer == report?.assignee) )\">\r\n                    {{report?.reviewer}}\r\n\r\n                    <i *ngIf=\"(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n\r\n                    <i *ngIf=\"report?.reviewer && (report?.reviewer == report?.assignee)\" class=\"icons\"\r\n                        [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i>\r\n                    <!-- <i *ngIf=\"(report?.reviewer && report?.assignor)\"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                    </i> -->\r\n                </div>\r\n                <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                <div class=\"exel-view-column\">{{report?.documentEvidenceRequired}}</div>\r\n                <div class=\"exel-view-column multi-column\">\r\n                    <div class=\"exel-view-row\">\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.alwaysNotify && ((report?.alwaysNotify == report?.reviewer)\r\n                        || (report?.alwaysNotify == report?.assignor) || (report?.alwaysNotify == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.alwaysNotify == defaultOwner)))\">\r\n                            {{report?.alwaysNotify}}\r\n                            <i *ngIf=\"(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n\r\n                            <i *ngIf=\"report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)\" class=\"icons\"\r\n                                [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                            <i *ngIf=\"((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                            </i>\r\n                        </div>\r\n                        <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.notifyOnFailure == report?.reviewer)\r\n                        || (report?.notifyOnFailure == report?.assignor) || (report?.notifyOnFailure == report?.assignee) ||\r\n                        ((!report?.assignor)&&(report?.notifyOnFailure == defaultOwner)))\">\r\n                            {{report?.notifyOnFailure}}\r\n                            <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"bulk-view-footer\">\r\n        <div class=\"left\">\r\n            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                uploaded.</p>\r\n        </div>\r\n        <div class=\"right\">\r\n            <button (click)=\"close()\" id=\"bulk-resp-cancel\" >Cancel</button>\r\n            <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"finalResponsibilities<1\" class=\"blue\">Confirm</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n</ng-container>\r\n\r\n<!-- --------------------------------------------------------------------upward is new one-------------------- -->\r\n<app-loader  *ngIf=\"loader\"></app-loader>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- HTML for multiple tabs -->\r\n<ng-container *ngIf=\"responsibilityType === 'multiTab'\">\r\n    <div class=\"bulk-view\">\r\n        <div class=\"bulk-view-head\">\r\n            <h2 class=\"bulk-view-title\">\r\n                {{fileName}}\r\n            </h2>\r\n        </div>\r\n        <div class=\"bulk-view-body bulk\">\r\n            <div class=\"exel-view\">\r\n                <div class=\"exel-view-row head\">\r\n                    <div class=\"exel-view-column sl-no\">#</div>\r\n                    <div class=\"exel-view-column\">Responsibility Name <span class=\"required\">*</span></div>\r\n                    <div class=\"exel-view-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Program</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Program Type</div>\r\n                            <div class=\"exel-view-column\">Program</div>\r\n                            <div class=\"exel-view-column\">Program Category</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Entrusted By</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Entrust To <span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Person or Group<span class=\"required\">*</span></div>\r\n                            <div class=\"exel-view-column\">All or Any Persons</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Key Responsibility?</div>\r\n                    <div class=\"exel-view-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <div class=\"exel-view-row\">\r\n                            <!-- <div class=\"exel-view-column large\">Frequency of Occurrence and Completion Window <span class=\"required\">*</span></div> -->\r\n                            <div class=\"exel-view-column large\">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class=\"required\">*</span></div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                            <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                                <div class=\"exel-view-column\">Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\">(Month)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                                <div class=\"exel-view-column\">Ongoing Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Set a Reminder?</div>\r\n                                <div class=\"exel-view-column\">Frequency of Reminder</div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                                <div class=\"exel-view-column\">On Completion of Frequency <span class=\"required\">*</span></div>\r\n                                <div class=\"exel-view-column\">Parent Responsibility<span class=\"info-text\">(Day)</span></div>\r\n                                <div class=\"exel-view-column\">Due Date <span class=\"info-text\" appTooltip=\"(No. of days after completion of the Parent Responsibility)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after completion of the Parent Responsibility)</span></div>\r\n                                <div class=\"exel-view-column\">Start <span class=\"info-text\" appTooltip=\"(No. of days before the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days before the due date)</span></div>\r\n                                <div class=\"exel-view-column\">Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be completed on the due date)</span></div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">Responsibility Centre</div>\r\n                    <div class=\"exel-view-column\">Risk Class</div>\r\n                    <div class=\"exel-view-column\">Objective</div>\r\n                    <div class=\"exel-view-column\">Notes</div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Format & Evidence</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\" [class.three-column]=\"false\">\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Format</div>\r\n                            <div class=\"exel-view-column\">Format For Responsibility (link)</div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">Evidence</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Assessments or Checkpoints</div> -->\r\n                    <div class=\"exel-view-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Review of Responsibility</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Reviewer</div>\r\n                            <div class=\"exel-view-column\">Review Start <span class=\"info-text\">(No. of days before the due date)</span></div>\r\n                            <div class=\"exel-view-column\">Review Fail <span class=\"info-text\" appTooltip=\"(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">(No. of days after the due date. Select \"0\" if the responsibility must be reviewed on the due date)</span></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Overseer</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\">Always Notify</div>\r\n                            <div class=\"exel-view-column\">Notify on Failure</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">Overseer</div> -->\r\n    \r\n                </div>\r\n                <div class=\"exel-view-row\" *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\">\r\n                    <div class=\"exel-view-column sl-no\" [class.error]=\"!report?.isValid\">{{i+1}}</div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"!report.responsibilityName\">{{report?.responsibilityName}} <i *ngIf=\"!report.responsibilityName\" class=\"icons\" [appTooltip]=\"'Enter a name for this responsibility.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i></div>\r\n                    <div class=\"exel-view-column multi-column\" *ngIf=\"responsibilityBulkUpload?.header.includes('Program')\" [class.error]=\"false\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\">{{report?.programType}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.program}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.programCategory}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"report?.assignor && (report?.notifyOnFailure == report?.assignor || report?.assignor == report?.overseer)\">{{report?.assignor}}\r\n                        <i *ngIf=\"((report?.assignor) && (report?.overseer == report?.assignor || report?.notifyOnFailure == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <!-- <i *ngIf=\"((report?.assignor) && (report?.reviewer === report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                    </div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"!report?.assignee || report?.assignee == report?.reviewer || !report?.userValidateWithProgram?.isValidAssignee || report?.overseer === report?.assignee  || (!report?.isValidUser)\">{{report?.assignee}}\r\n                                <!-- || (!report?.isValidUser) -->\r\n                                <i *ngIf=\"((report?.assignee) && (report?.overseer == report?.assignee))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.assignee) && (report?.reviewer == report?.assignee))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(!report?.assignee) || (!report?.isValidUser)\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'Select the user responsible for completing this responsibility. '\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.assigneeType}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.keyResponsibility}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.five-column]=\"tabType === 'frequency' || tabType === 'onCompletion'\" [class.three-column]=\"tabType === 'ongoing'\">\r\n                        <ng-container *ngIf=\"tabType === 'frequency'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.day}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.validDate || report?.isPastDate\">{{report?.month}}\r\n                                    <i *ngIf=\"!report?.validDate\" class=\"icons\" [appTooltip]=\"'Invalid Due Date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                    <i *ngIf=\"report?.isPastDate\" class=\"icons\" [appTooltip]=\"'This date occurs in the past. Select a future date.'\"\r\n                                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'ongoing'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.setReminder}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.frequencyReminder}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"tabType === 'onCompletion'\">\r\n                            <div class=\"exel-view-row multi-column\" [class.five-column]=\"true\">\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.frequency\">{{report?.frequency}}\r\n                                    <i *ngIf=\"!report?.frequency\" class=\"icons\" [appTooltip]=\"'Select a frequency for this responsibility.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\" [class.error]=\"!report?.parentResponsibility\">{{report?.parentResponsibility}}\r\n                                    <i *ngIf=\"!report?.parentResponsibility\" class=\"icons\" [appTooltip]=\"'Select a parent responsibility on whose completion this responsibility will become active.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                                </div>\r\n                                <div class=\"exel-view-column\">{{report?.dueDate}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.responsibilityWindow}}</div>\r\n                                <div class=\"exel-view-column\">{{report?.failedAfter}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"exel-view-column\">{{report?.responsibilityCenter}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.reportClass}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.objective}}</div>\r\n                    <div class=\"exel-view-column\">{{report?.notes}}</div>\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column multi-column\">\r\n                                <div class=\"exel-view-row multi-column\">\r\n                                    <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.isFormat}}</div>\r\n                                    <div class=\"exel-view-column\">{{report?.formatForResponsibility}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.small-column]=\"true\">{{report?.documentEvidenceRequired}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"exel-view-column\">{{report?.assessments}}</div> -->\r\n                    <div class=\"exel-view-column multi-column\" [class.three-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.three-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.reviewer && ((report?.reviewer === report?.overseer)\r\n                            || (report?.reviewer === report?.assignee) || !report?.userValidateWithProgram?.isValidReviewer )\">{{report?.reviewer}}\r\n                        <i *ngIf=\"(report?.reviewer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n    \r\n                        <i *ngIf=\"report?.reviewer && (report?.reviewer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <!-- <i *ngIf=\"(report?.reviewer && report?.reviewer === report?.assignor)\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i> -->\r\n                        <i *ngIf=\"report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewToBeCompletedWithin}}</div>\r\n                            <div class=\"exel-view-column\">{{report?.reviewWillBeFailedAfter}}</div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"exel-view-column multi-column\" [class.two-column]=\"true\">\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.overseer && ((report?.reviewer === report?.overseer)\r\n                            || (report?.overseer === report?.assignee) || (report?.overseer === report?.assignor) || !report?.userValidateWithProgram?.isValidOverseer )\">\r\n                            {{report?.overseer}}\r\n                                <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                                class=\"icons\"\r\n                                [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n\r\n                                <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                                    [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.overseer && report?.assignor) && (report?.overseer == report?.assignor)) ||((report?.overseer && (!report?.assignor)) && (report?.overseer == defaultOwner))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                            <div class=\"exel-view-column\" [class.error]=\"report?.notifyOnFailure && ((report?.reviewer === report?.notifyOnFailure)\r\n                            || (report?.notifyOnFailure === report?.assignee) || ((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner)) || !report?.userValidateWithProgram?.isValidNotifyOnFailure )\">\r\n                                {{report?.notifyOnFailure}}\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && ((report?.reviewer === report?.notifyOnFailure))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n\r\n                                <i *ngIf=\"report?.notifyOnFailure && (report?.notifyOnFailure === report?.assignee)\" class=\"icons\"\r\n                                    [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                                <i *ngIf=\"(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure\"\r\n                                    class=\"icons\"\r\n                                    [appTooltip]=\"'This user is not associated with the selected Program.'\"\r\n                                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                                </i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <!-- <div class=\"exel-view-column\" [class.error]=\"(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))\">\r\n                        {{report?.overseer}}\r\n                        <i *ngIf=\"(report?.overseer) && ((report?.reviewer === report?.overseer))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n\r\n                        <i *ngIf=\"report?.overseer && (report?.overseer === report?.assignee)\" class=\"icons\"\r\n                            [appTooltip]=\"'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"((report?.overseer) && (report?.overseer == report?.assignor))\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                        <i *ngIf=\"!report?.userValidateWithProgram?.isValidOverseer\"\r\n                            class=\"icons\"\r\n                            [appTooltip]=\"'Selected user is not a valid overseer for selected program.'\"\r\n                            placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;\r\n                        </i>\r\n                    </div> -->\r\n                </div>\r\n    \r\n    \r\n    \r\n    \r\n    \r\n    \r\n                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->\r\n    \r\n                <!-- *ngFor=\"let report of responsibilityBulkUpload?.reports; let i = index\" -->\r\n            </div>\r\n        </div>\r\n        <div class=\"bulk-view-option\">\r\n            <button *ngIf=\"bulkUpload?.frequency?.reports?.length\" [class.active]=\"tabType === 'frequency'\" (click)=\"selectedTab.emit('frequency')\">Frequency Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.ongoing?.reports?.length\" [class.active]=\"tabType === 'ongoing'\" (click)=\"selectedTab.emit('ongoing')\">Ongoing Responsibilities</button>\r\n            <button *ngIf=\"bulkUpload?.onCompletion?.reports?.length\" [class.active]=\"tabType === 'onCompletion'\" (click)=\"selectedTab.emit('onCompletion')\">On Completion Responsibilities</button>\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <!-- <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be\r\n                    uploaded.</p>\r\n            </div> -->\r\n            <div class=\"left\">\r\n                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be\r\n                    uploaded.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\" id=\"bulk-resp-cancel\">Cancel</button>\r\n                <button (click)=\"submit()\" id=\"bulk-resp-confirm\" [disabled]=\"!isConfirmClickable\" class=\"blue\">Confirm</button>\r\n                <!-- finalResponsibilities < 1 -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader  *ngIf=\"loader\"></app-loader>\r\n    \r\n</ng-container>\r\n    \r\n    <!-- --------------------------------------------------------------------upward is new one-------------------- -->",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;border:none;padding-right:10px;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#FFFFFF;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e5d06;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#fff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0;word-break:unset}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #eb2424!important;padding-right:24px}.bulk-view-body .exel-view-column.error+.error{border-left:none!important}.bulk-view-body .exel-view-column span.required{color:#eb2424;display:contents}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-body .exel-view-column.sl-no.error{background:#eb242424;padding-right:10px;border:none;border-bottom:1px solid #dcdcdc}.bulk-view-body .exel-view-column.multi-column{padding:0;border:none}.bulk-view-body .exel-view-column.multi-column .exel-view-row{height:100%}.bulk-view-body .exel-view-column.multi-column .exel-view-column{width:50%;min-width:50%}.bulk-view-body .exel-view-column.multi-column .exel-view-column+.exel-view-column{border-left:none}.bulk-view-body.bulk{height:calc(100vh - 142px)}.bulk-view-body.bulk .exel-view-row.head{position:sticky;top:0;z-index:1}.bulk-view-body.bulk .exel-view-row.head .exel-view-column{min-height:34px}.bulk-view-body.bulk .exel-view-row.head .exel-view-column .info-text{font-size:10px;display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 8px}.bulk-view-body.bulk .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body.bulk .exel-view-row.five-column .exel-view-column,.bulk-view-body.bulk .exel-view-row.three-column .exel-view-column{width:200px;min-width:200px!important}.bulk-view-body.bulk .exel-view-column .exel-view-row .exel-view-column.small-column{width:120px;min-width:120px!important}.bulk-view-body.bulk .exel-view-column.multi-column .exel-view-column{min-width:unset}.bulk-view-body.bulk .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body.bulk .exel-view-column.three-column{width:600px;min-width:600px!important}.bulk-view-body.bulk .exel-view-column.five-column{width:1000px;min-width:1000px!important}.bulk-view-option{background:#fff;border-top:1px solid #f1f1f1;padding:0 20px;position:fixed;width:100%;bottom:50px;display:flex;align-items:center}.bulk-view-option button{background:transparent;border-radius:0;border:none;border-left:1px solid #f1f1f1;color:#747576;font-size:11px;font-weight:500;padding:0 .5rem;margin:0;height:2rem;position:relative}.bulk-view-option button:last-of-type{border-right:1px solid #f1f1f1}.bulk-view-option button.active{color:#1e5dd3}.bulk-view-option button.active:before{background:#fff;content:\"\";position:absolute;top:-1px;left:0;height:1px;width:100%}.bulk-view-footer{height:50px;box-shadow:0 0 15px rgba(30,93,210,.35);padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}"]
             },] }
 ];
 BulkResponsibilityViewComponent.propDecorators = {

package/esm2015/lib/sharedComponents/bulk-view/bulk-view.component.js

@@ -49,7 +49,7 @@ BulkViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-bulk-view',
                 template: "<div class=\"bulk-view\">\r\n    <div class=\"bulk-view-head\">\r\n        <h2 class=\"bulk-view-title\">\r\n            {{fileName}}\r\n        </h2>\r\n    </div>\r\n    <div class=\"bulk-view-body\">\r\n        <div class=\"exel-view\">\r\n            <div class=\"exel-view-row head\">\r\n                <div class=\"exel-view-column sl-no\">#</div>\r\n                <div class=\"exel-view-column\" [class.two-column]=\"heading && i === 4\" *ngFor=\"let heading of riskBulkUpload?.header; let i = index\"\r\n                    [class.large]=\"heading && heading.startsWith('Inherent')\">\r\n                    <ng-container *ngIf=\"heading && !(heading.startsWith('Inherent')) && !(i === 4)\">\r\n                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                        <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && heading.startsWith('Inherent')\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">Inherent Risk Assessment</div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\">\r\n                            <div class=\"exel-view-column\" *ngFor=\"let weightAgeFactor of riskBulkUpload.weightFactors | slice : 2\">\r\n                                {{weightAgeFactor}}</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"heading && i === 4\">\r\n                        <div class=\"exel-view-row\">\r\n                            <div class=\"exel-view-column large\">\r\n                                {{(heading.includes('*')? heading.replace('*', '') : heading)}}\r\n                                <span *ngIf=\"heading.includes('*')\" class=\"required\">*</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                            <div class=\"exel-view-column\" *ngFor=\"let weightAgeFactor of riskBulkUpload?.weightFactors | slice : 0: 2\">\r\n                                {{(weightAgeFactor.includes('*')? weightAgeFactor.replace('*', '') : weightAgeFactor)}}\r\n                                <span *ngIf=\"weightAgeFactor.includes('*')\" class=\"required\">*</span>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"exel-view-row\" *ngFor=\"let risk of riskBulkUpload.risks; let i = index\">\r\n                <div class=\"exel-view-column sl-no\" [class.error]=\"!risk.isValid\">{{i+1}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!risk?.riskName\">{{risk?.riskName}}\r\n                    <i *ngIf=\"!risk?.riskName\" class=\"icons\" [appTooltip]=\"'Risk Name must be populated.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n\r\n                <div class=\"exel-view-column\">{{risk?.description}}</div>\r\n\r\n                <div class=\"exel-view-column\" [class.error]=\"!risk?.rcName\">{{risk?.rcName}}\r\n                    <i *ngIf=\"!risk?.rcName\" class=\"icons\"\r\n                        [appTooltip]=\"'Assign this risk to a Responsibility Center.'\" placement=\"bottom-right\"\r\n                        type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n\r\n                <div class=\"exel-view-column\">{{risk?.owner}}</div>\r\n                <div class=\"exel-view-row multi-column\" [class.two-column]=\"true\">\r\n                    <div class=\"exel-view-column\" [class.error]=\"!risk?.isValidFrequency\">{{risk?.frequency}} \r\n                        <i *ngIf=\"!risk?.isValidFrequency\" class=\"icons\"\r\n                        [appTooltip]=\"'Set a frequency for the completion of the inherent risk assessment.'\" placement=\"bottom-right\"\r\n                        type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                    </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"false\">{{risk?.emailReminder}} </div>\r\n                </div>\r\n                <div class=\"exel-view-column\" [class.error]=\"(risk?.owner && (risk?.owner == risk?.overseer))||\r\n                       (!risk?.owner && (defaultOwner == risk?.overseer))\">{{risk?.overseer}}\r\n                    <i *ngIf=\"(risk?.owner && (risk?.owner == risk?.overseer)) || (!risk?.owner && (defaultOwner == risk?.overseer)) \"\r\n                        class=\"icons\"\r\n                        [appTooltip]=\"((risk?.owner)?'The Risk Owner cannot also be the':'You cannot be a') +' Overseer of the risk. Select another user as the Overseer of this risk.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=true>&#xe932;</i>\r\n                </div>\r\n                <div *ngIf=\"riskBulkUpload?.header && riskBulkUpload?.header?.includes('Recommended Mitigation Priority')\" class=\"exel-view-column\">{{risk?.mitigationPriority}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.mitigationPlans}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.riskLabel}}</div>\r\n                <!-- <div class=\"exel-view-column\" *ngIf=\"assessmentDaysEnable\" [class.error]=\"!risk?.assessmentDeadLine\">\r\n                    {{risk?.assessmentDeadLine}}\r\n                    <i *ngIf=\"!risk?.assessmentDeadLine\" class=\"icons\"\r\n                        [appTooltip]=\"'Set a deadline for the completion of the inherent risk assessment.'\"\r\n                        placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                </div> -->\r\n                <div class=\"exel-view-row multi-column\">\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.likelihood && !templateInfo?.likelihood.includes(risk?.likelihood)\">{{risk?.likelihood}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.impact && !templateInfo?.impact.includes(risk?.impact)\">{{risk?.impact}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.velocity && !templateInfo?.velocity.includes(risk?.velocity)\"\r\n                     *ngIf=\"riskBulkUpload?.weightFactors?.includes('Velocity')\">\r\n                        {{risk?.velocity}} </div>\r\n                    <div class=\"exel-view-column\" [class.error]=\"risk?.vulnerability && !templateInfo?.vulnerability.includes(risk?.vulnerability)\"\r\n                     *ngIf=\"riskBulkUpload?.weightFactors?.includes('Vulnerability')\">\r\n                        {{risk?.vulnerability}} </div>\r\n                </div>\r\n                <div *ngIf=\"riskBulkUpload?.header && riskBulkUpload?.header?.includes('Do you want to apply the same risk ratings for all Responsibility Centers?')\" class=\"exel-view-column\">{{risk?.applySameRiskRating}}</div>\r\n                <!-- <div class=\"exel-view-column\">{{risk?.customField1}}</div>\r\n                <div class=\"exel-view-column\">{{risk?.customField2}}</div> -->\r\n\r\n                <ng-container *ngIf=\"risk?.customTag\">\r\n                    <div class=\"exel-view-column\" *ngFor=\"let tag of risk?.customTag\">{{tag?.custom_tag_value}}</div>\r\n                </ng-container>\r\n\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"bulk-view-footer\">\r\n            <div class=\"left\">\r\n                <p>{{finalRisks}} out of {{riskBulkUpload?.risks?.length}} risks will be added to the Risk Register.</p>\r\n            </div>\r\n            <div class=\"right\">\r\n                <button (click)=\"close()\">Cancel</button>\r\n                <button (click)=\"submit(false)\" [disabled]=\"finalRisks<1\" class=\"blue\">Add Risks</button>\r\n                <button (click)=\"submit(true)\" *ngIf=\"showCompleteAssessmentButton\"\r\n                 [disabled]=\"finalRisks<1\" class=\"blue\">Add Risks And Complete Assessment</button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#FFFFFF}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.three-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.four-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body .exel-view-column.three-column{width:750px;min-width:750px!important}.bulk-view-body .exel-view-column.four-column{width:1000px;min-width:1000px!important}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #EB2424}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-footer{height:50px;box-shadow:0 0 15px #1e5d06;padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#FFFFFF}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1E5DD3}.bulk-view-footer .right button:disabled{background:#F1F1F1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#747576;border-radius:16px}::-webkit-scrollbar{height:15px}.bulk-view{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11}.bulk-view-head{height:60px;padding:20px 24px;background:#161b2f;display:flex;justify-content:flex-start}.bulk-view-title{font-size:16px;line-height:20px;font-weight:400;margin:0;color:#fff}.bulk-view-body{height:calc(100vh - 110px);overflow:auto;width:100%;background:#fff}.bulk-view-body .exel-view{display:block}.bulk-view-body .exel-view-row{display:flex;width:100%}.bulk-view-body .exel-view-row.head .exel-view-column{font-weight:500;font-size:14px;min-height:26px;background:#f1f1f1;padding:0}.bulk-view-body .exel-view-row.four-column .exel-view-column,.bulk-view-body .exel-view-row.three-column .exel-view-column,.bulk-view-body .exel-view-row.two-column .exel-view-column{min-width:250px!important}.bulk-view-body .exel-view-row.multi-column .exel-view-column{width:140px;min-width:140px}.bulk-view-body .exel-view-column{width:300px;min-width:300px;padding:0 10px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;text-align:center;word-break:break-all;line-height:16px;font-size:12px;color:#161b2f;flex-wrap:wrap;position:relative}.bulk-view-body .exel-view-column.two-column{width:500px;min-width:500px!important}.bulk-view-body .exel-view-column.three-column{width:750px;min-width:750px!important}.bulk-view-body .exel-view-column.four-column{width:1000px;min-width:1000px!important}.bulk-view-body .exel-view-column i.icons{position:absolute;top:8px;right:10px;cursor:pointer;color:#d93b41}.bulk-view-body .exel-view-column.large{width:100%;min-width:auto}.bulk-view-body .exel-view-column.error{border:1px solid #eb2424}.bulk-view-body .exel-view-column span.required{color:#eb2424}.bulk-view-body .exel-view-column .exel-view-row .exel-view-column{width:100%}.bulk-view-body .exel-view-column.sl-no{background:#f1f1f1;width:60px;min-width:60px;min-height:30px;font-weight:400}.bulk-view-footer{height:50px;box-shadow:0 0 15px rgba(30,93,210,.35);padding:10px 20px;position:fixed;width:100%;bottom:0;display:flex;align-items:center;justify-content:space-between;background:#fff}.bulk-view-footer .left p{color:#747576;font-size:13px;font-weight:500;margin:0}.bulk-view-footer .right button{font-size:12px;background:#fff;border:1px solid #dcdcdc;color:#747576;border-radius:2px;padding:8px 18px;cursor:pointer;text-transform:uppercase}.bulk-view-footer .right button+button{margin-left:4px}.bulk-view-footer .right button.blue{color:#fff;background:#1e5dd3}.bulk-view-footer .right button:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}"]
             },] }
 ];
 BulkViewComponent.propDecorators = {

package/esm2015/lib/sharedComponents/category-list/category-list.component.js

@@ -62,7 +62,7 @@ CategoryListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-category-list',
                 template: "<div class=\"category-list\" [class.animate]=\"animation\">\r\n  <div class=\"category-list-head\">\r\n    <h3 class=\"category-list-title\">Select a Risk Category</h3>\r\n  </div>\r\n  <div class=\"category-list-body\">\r\n    <div class=\"filter-card-row\">\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'strategic'\" (click)=\"activeTab = 'strategic'\">\r\n        <div class=\"left\">\r\n          <label>{{categoryList?.strategic?.name}}</label>\r\n          <p *ngIf=\"selectedCategory.type=='strategic' && selectedCategory.selectedCategory.length != 0\">\r\n            1 Category selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.strategic?.data?.length}}</span>\r\n      </div>\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'operational'\" (click)=\"activeTab = 'operational'\">\r\n        <div class=\"left\">\r\n          <label>{{categoryList?.operational?.name}}</label>\r\n          <p *ngIf=\"selectedCategory.type=='operational' && selectedCategory.selectedCategory.length != 0\">\r\n            1 Category selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.operational?.data?.length}}</span>\r\n      </div>\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'compliance'\" (click)=\"activeTab = 'compliance'\">\r\n        <div class=\"left\">\r\n          <label>{{categoryList?.compliance?.name}}</label>\r\n          <p *ngIf=\"selectedCategory.type=='compliance' && selectedCategory.selectedCategory.length != 0\">\r\n            1 Category selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.compliance?.data?.length}}</span>\r\n      </div>\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n        <div class=\"left\">\r\n          <label>{{categoryList?.others?.name}}</label>\r\n          <p *ngIf=\"selectedCategory.type=='others' && selectedCategory.selectedCategory.length != 0\">\r\n            1 Category selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.others?.data?.length}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-block\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Risk Category\" />\r\n    </div>\r\n    \r\n    <ng-container *ngIf=\"(categoryList[activeTab]?.data | filter:search) as searchList\">\r\n      <ul class=\"categories\" *ngIf=\"searchList.length > 0\">\r\n        <li *ngFor=\"let category of searchList\">\r\n          <app-cs-radio (checkedEvent)=\"selectCategory(activeTab,category)\" [name]=\"'category'\"\r\n            [checked]=\"selectedCategory?.selectedCategory?.category_id === category?.category_id\">\r\n            <span class=\"name\" [appTooltip]=\"category.category_name\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n              {{category?.category_name }}</span>\r\n          </app-cs-radio>\r\n        </li>\r\n      </ul>\r\n      <app-no-data *ngIf=\"searchList.length === 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n        [noDataText]=\"'No Categories Found'\"></app-no-data>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"category-list-footer\">\r\n    <app-floating-bar\r\n      [selectedData]=\"selectedCategory?.selectedCategory?.category_name? [selectedCategory.selectedCategory]:[]\"\r\n      [displayElementKey]=\"'category_name'\" [singularText]=\"'Risk Category selected'\"\r\n      [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\"\r\n      (closeList)=\"close()\"\r\n      [isDisabled]=\"categoryList.length === 0 || !selectedCategory?.selectedCategory\">\r\n    </app-floating-bar>\r\n  </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .category-list{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1E5DD3;z-index:-1}::ng-deep .category-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .category-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .category-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .category-list-body{padding:24px 40px 24px 36px;background:#ffffff;height:calc(100vh - 124px)}::ng-deep .category-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .category-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .category-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .category-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .category-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .category-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .category-list-body .search-block{position:relative}::ng-deep .category-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .category-list-body ul{padding:0;margin:0}::ng-deep .category-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 300px);min-height:calc(100vh - 300px);overflow:auto}::ng-deep .category-list-body ul.categories li{width:100%;padding:16px 0 0;list-style:none}::ng-deep .category-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item span.value{width:auto;color:#161b2f;font-size:13px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .category-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .category-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .category-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .category-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5d08;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .category-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .category-list-body .card-row .card-block.active{box-shadow:0 0 10px #1e5d02;z-index:1}::ng-deep .category-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .category-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .category-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .category-list{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:-1}::ng-deep .category-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .category-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .category-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .category-list-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 124px)}::ng-deep .category-list-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-list-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .category-list-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .category-list-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-list-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .category-list-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .category-list-body .filter-card+.filter-card{margin-left:10px}::ng-deep .category-list-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .category-list-body .search-block{position:relative}::ng-deep .category-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .category-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .category-list-body ul{padding:0;margin:0}::ng-deep .category-list-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 300px);min-height:calc(100vh - 300px);overflow:auto}::ng-deep .category-list-body ul.categories li{width:100%;padding:16px 0 0;list-style:none}::ng-deep .category-list-body ul.categories li app-cs-radio{display:flex}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .category-list-body ul.categories li app-cs-radio label.radio-item span.value{width:auto;color:#161b2f;font-size:13px;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name{display:flex;justify-content:flex-start;width:auto}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li i{font-size:8px;padding-left:8px}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type{color:#66bf72}::ng-deep .category-list-body ul.categories li app-cs-radio ul.category-name li:last-of-type i{display:none}::ng-deep .category-list-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .category-list-body.no-footer{height:calc(100vh - 42px)}::ng-deep .category-list-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .category-list-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px rgba(30,93,211,.27);min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .category-list-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .category-list-body .card-row .card-block.active{box-shadow:0 0 10px rgba(30,93,210,.9);z-index:1}::ng-deep .category-list-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .category-list-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .category-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 CategoryListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/category-multiselect/category-multi-select.component.js

@@ -138,7 +138,7 @@ CategoryMultiSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-category-multi-select',
                 template: "<div class=\"category-multi-select\" [class.animate]=\"animation\">\r\n  <div class=\"category-multi-select-head\">\r\n    <h3 class=\"category-multi-select-title\">Select Programs</h3>\r\n  </div>\r\n  <div class=\"category-multi-select-body\">\r\n    <div class=\"filter-card-row\">\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"activeTab = 'regulations'\">\r\n        <div class=\"left\">\r\n          <label>REGULATIONS</label>\r\n          <p *ngIf=\"categoryList?.regulations?.selectedList?.length != 0\">\r\n            {{categoryList?.regulations?.selectedList?.length}}\r\n            {{(categoryList?.regulations?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.regulations?.list?.length}}</span>\r\n      </div>\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"activeTab = 'standards'\">\r\n        <div class=\"left\">\r\n          <label>STANDARDS</label>\r\n          <p *ngIf=\"categoryList?.standards?.selectedList?.length != 0\">\r\n            {{categoryList?.standards?.selectedList?.length}}\r\n            {{(categoryList?.standards?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.standards?.list?.length}}</span>\r\n      </div>\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'internalControls'\"\r\n        (click)=\"activeTab = 'internalControls'\">\r\n        <div class=\"left\">\r\n          <label>INTERNAL CONTROLS</label>\r\n          <p *ngIf=\"categoryList?.internalControls?.selectedList?.length != 0\">\r\n            {{categoryList?.internalControls?.selectedList?.length}}\r\n            {{(categoryList?.internalControls?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.internalControls?.list?.length}}</span>\r\n      </div>\r\n      <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"activeTab = 'others'\">\r\n        <div class=\"left\">\r\n          <label>OTHERS</label>\r\n          <p *ngIf=\"categoryList?.others?.selectedList?.length != 0\">\r\n            {{categoryList?.others?.selectedList?.length}}\r\n            {{(categoryList?.others?.selectedList?.length==1)?'Category':'Categories'}} selected\r\n          </p>\r\n        </div>\r\n        <span class=\"counter\">{{categoryList?.others?.list?.length}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"search-block\">\r\n      <i class=\"icons\">&#xe90b;</i>\r\n      <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search Responsibility Category\" />\r\n    </div>\r\n    <!-- <div class=\"body-top\">\r\n      <div class=\"pagination\"></div>\r\n    </div> -->\r\n    <ng-container *ngIf=\"(categoryList[activeTab].list | filter: search) as searchList\">\r\n      <div class=\"body-top\" *ngIf=\"searchList?.length > 0 && search.trim()?.length === 0\">\r\n        <app-cs-checkbox [ngValue]=\"checkSelectAll(activeTab)\" (ngValueChange)=\"selectAll($event,activeTab)\">\r\n          <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n        </app-cs-checkbox>\r\n      </div>\r\n      <ul class=\"categories\" *ngIf=\"searchList?.length > 0 \">\r\n        <li *ngFor=\"let category of searchList\" >\r\n          <app-cs-checkbox [ngValue]=\"selectedIds.includes(category[categoryIdKey])\"\r\n            (ngValueChange)=\"selectCategory($event,activeTab,category)\">\r\n            <ul class=\"category-name\" #listBlock>\r\n              <li *ngFor=\"let entity of category.category_name; let j = index\" [appTooltip]=\"entity\" placement=\"bottom\"\r\n                type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\" [style.max-width.px]=\"blockWidth / category.category_name.length\">\r\n                <span>\r\n                  <i class=\"icons\" *ngIf=\"j !== 0\">&#xe910;</i>{{ entity }}\r\n                </span>\r\n              </li>\r\n            </ul>\r\n          </app-cs-checkbox>\r\n        </li>\r\n      </ul>\r\n      <app-no-data *ngIf=\"searchList.length === 0\"\r\n        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n        [noDataText]=\"'No Categories Found'\"></app-no-data>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"category-multi-select-footer\">\r\n    <app-floating-bar [selectedData]=\"selectedCategories\" [displayElementKey]=\"'item_name'\"\r\n      [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\"\r\n      (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\"\r\n      [isDisabled]=\"selectedCategories?.length === 0 ||  categoryList[activeTab]?.list?.length === 0\">\r\n    </app-floating-bar>\r\n  </div>\r\n</div>",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .category-multi-select{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1E5DD3;z-index:-1}::ng-deep .category-multi-select-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .category-multi-select-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .category-multi-select-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .category-multi-select-body{padding:24px 40px 24px 36px;background:#ffffff;height:calc(100vh - 124px)}::ng-deep .category-multi-select-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-multi-select-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .category-multi-select-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .category-multi-select-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-multi-select-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .category-multi-select-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .category-multi-select-body .filter-card+.filter-card{margin-left:10px}::ng-deep .category-multi-select-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .category-multi-select-body .search-block{position:relative}::ng-deep .category-multi-select-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .category-multi-select-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-multi-select-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .category-multi-select-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .category-multi-select-body .body-top app-cs-checkbox,::ng-deep .category-multi-select-body .body-top app-cs-radio{display:flex}::ng-deep .category-multi-select-body .body-top app-cs-checkbox label span.value strong,::ng-deep .category-multi-select-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .category-multi-select-body ul{padding:0;margin:0}::ng-deep .category-multi-select-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 300px);min-height:calc(100vh - 300px);overflow:auto;padding:16px 0 0}::ng-deep .category-multi-select-body ul.categories li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .category-multi-select-body ul.categories li app-cs-radio,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox{display:flex}::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item span.value{color:#161b2f;font-size:13px;font-weight:400;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name{display:flex;justify-content:flex-start;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name li{list-style:none;color:#747576;width:auto;padding:0 8px 0 0;max-width:40%;display:inline-flex}::ng-deep .category-multi-select-body ul.categories li ul.category-name li span{font-size:14px;font-weight:400;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}::ng-deep .category-multi-select-body ul.categories li ul.category-name li i{font-size:8px;padding-left:0;padding-right:4px}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:first-child span{color:#4681ef}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:last-of-type span{color:#66bf72}::ng-deep .category-multi-select-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .category-multi-select-body.no-footer{height:calc(100vh - 42px)}::ng-deep .category-multi-select-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .category-multi-select-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px #1e5d08;min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .category-multi-select-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .category-multi-select-body .card-row .card-block.active{box-shadow:0 0 10px #1e5d02;z-index:1}::ng-deep .category-multi-select-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .category-multi-select-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .category-multi-select.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .category-multi-select{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:-1}::ng-deep .category-multi-select-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .category-multi-select-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .category-multi-select-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .category-multi-select-body{padding:24px 40px 24px 36px;background:#fff;height:calc(100vh - 124px)}::ng-deep .category-multi-select-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .category-multi-select-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .category-multi-select-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .category-multi-select-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .category-multi-select-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .category-multi-select-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .category-multi-select-body .filter-card+.filter-card{margin-left:10px}::ng-deep .category-multi-select-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .category-multi-select-body .search-block{position:relative}::ng-deep .category-multi-select-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .category-multi-select-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .category-multi-select-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .category-multi-select-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .category-multi-select-body .body-top app-cs-checkbox,::ng-deep .category-multi-select-body .body-top app-cs-radio{display:flex}::ng-deep .category-multi-select-body .body-top app-cs-checkbox label span.value strong,::ng-deep .category-multi-select-body .body-top app-cs-radio label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .category-multi-select-body ul{padding:0;margin:0}::ng-deep .category-multi-select-body ul.categories{display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 300px);min-height:calc(100vh - 300px);overflow:auto;padding:16px 0 0}::ng-deep .category-multi-select-body ul.categories li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox,::ng-deep .category-multi-select-body ul.categories li app-cs-radio{display:flex}::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item{width:100%}::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.checkbox-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-checkbox label.radio-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.checkbox-item span.value,::ng-deep .category-multi-select-body ul.categories li app-cs-radio label.radio-item span.value{color:#161b2f;font-size:13px;font-weight:400;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name{display:flex;justify-content:flex-start;width:100%}::ng-deep .category-multi-select-body ul.categories li ul.category-name li{list-style:none;color:#747576;width:auto;padding:0 8px 0 0;max-width:40%;display:inline-flex}::ng-deep .category-multi-select-body ul.categories li ul.category-name li span{font-size:14px;font-weight:400;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}::ng-deep .category-multi-select-body ul.categories li ul.category-name li i{font-size:8px;padding-left:0;padding-right:4px}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:first-child span{color:#4681ef}::ng-deep .category-multi-select-body ul.categories li ul.category-name li:last-of-type span{color:#66bf72}::ng-deep .category-multi-select-body app-no-data .no-data-wrapper{height:calc(100% - 42px)!important}::ng-deep .category-multi-select-body.no-footer{height:calc(100vh - 42px)}::ng-deep .category-multi-select-body .card-row{display:flex;justify-content:space-between;margin-bottom:12px}::ng-deep .category-multi-select-body .card-row .card-block{width:100%;display:flex;padding:8px 12px;border-radius:2px;box-shadow:0 0 3px rgba(30,93,211,.27);min-height:48px;position:relative;cursor:pointer;justify-content:space-between;align-items:center}::ng-deep .category-multi-select-body .card-row .card-block+.card-block{margin-left:4px}::ng-deep .category-multi-select-body .card-row .card-block.active{box-shadow:0 0 10px rgba(30,93,210,.9);z-index:1}::ng-deep .category-multi-select-body .card-row .card-block .card-text{padding:0;margin:0;font-weight:500;font-size:11px;text-transform:uppercase;line-height:16px;width:auto;white-space:nowrap}::ng-deep .category-multi-select-body .card-row .card-block span.count{font-size:14px;line-height:24px;background:#042e7d;padding:0 8px;border-radius:2px;min-width:28px;color:#fff}::ng-deep .category-multi-select.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 CategoryMultiSelectComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/checkbox-list/checkbox-list.component.js

@@ -60,7 +60,7 @@ CheckboxListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkbox-list',
                 template: "<div class=\"add-risk-rc\" [class.animate]=\"animation\">\r\n    <div class=\"add-risk-rc-head\">\r\n        <h3 class=\"add-risk-rc-title\">{{config?.panelTitle}}</h3>\r\n        <!-- <button class=\"add-risk-rc-close\" (click)=close()>\r\n            <i class=\"icons\">&#xe90d;</i>\r\n        </button> -->\r\n    </div>\r\n    <div class=\"add-risk-rc-body\">\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"{{config?.searchPlaceholder}}\" [(ngModel)]=\"searchItem\" />\r\n        </div>\r\n        <ng-container *ngIf=\"(itemsList | search:searchItem:displayKey) as searchList\">\r\n            <div class=\"body-top\" *ngIf=\"config?.selectAllEnabled && searchList?.length > 0 && searchItem?.trim()?.length === 0 \">\r\n                <app-cs-checkbox [ngValue]=\"itemsList?.length === selectedItems?.length && selectedItems?.length > 0\"\r\n                    (ngValueChange)=\"selectAll($event)\"><strong> {{itemsList?.length === selectedItems?.length &&\r\n                        selectedItems?.length > 0?'Deselect All':'Select All'}}</strong>\r\n                </app-cs-checkbox>\r\n            </div>\r\n            <ul class=\"add-risk-rc-list\" [class.two-column]=\"twoColumn\" *ngIf=\"searchList?.length > 0\">\r\n                <li *ngFor=\"let item  of searchList\" #ulElement>\r\n                    <app-cs-checkbox *ngIf=\"config.workflow !== 'policy'\" [ngValue]=\"selectedItems.includes(item[identifierKey])\"\r\n                        (ngValueChange)=\"selectItem(item[identifierKey],$event)\"\r\n                        [appTooltip]=\"tooltipKey ? item[tooltipKey]: item[displayKey]\" placement=\"bottom-left\" delay=\"0\"\r\n                        [tooltipMandatory]=\"true\">\r\n                        {{item[displayKey]}}{{item?.parent_items?.length && config.workflow === 'policy'? ' < ' + item?.parent_items?.join(' < '):'' }}\r\n                    </app-cs-checkbox>\r\n                    <app-cs-checkbox *ngIf=\"config.workflow === 'policy'\" [ngValue]=\"selectedItems.includes(item[identifierKey])\"\r\n                    (ngValueChange)=\"selectItem(item[identifierKey],$event)\">\r\n                        <ul class=\"add-category-name\">\r\n                          <li *ngFor=\"let data of item?.parent_items; let i = index\" [appTooltip]=\"data\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                              <i *ngIf=\"i > 0;\" class=\"icons\">&#xe910;</i>{{data}}\r\n                          </li>\r\n                          <li  [appTooltip]=\"item[displayKey]\" placement=\"bottom-left\" type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                            <i *ngIf=\"item?.parent_items?.length > 0\" class=\"icons\">&#xe910;</i> {{item[displayKey]}}\r\n                          </li>\r\n                        </ul>\r\n                    </app-cs-checkbox>\r\n                </li>\r\n            </ul>\r\n            <app-no-data *ngIf=\"searchList.length === 0\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"config?.noDataText?.length > 0 ? config?.noDataText:'No data to display'\"></app-no-data>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <app-floating-bar [selectedData]=\"selectedItems|listMapper:itemsList:identifierKey\" [displayElementKey]=\"displayKey\"\r\n        [singularText]=\"config?.floatingTextSingular\"\r\n        [pluralText]=\"config?.floatingTextPlural ?config?.floatingTextPlural:'Users selected'\" (closeEvent)=\"save()\"\r\n        (closeList)=\"close()\" [isDisabled]=\"selectedItems.length === 0 || itemsList.length === 0 \"\r\n        (deleteEvent)=\"deleteItem($event)\"></app-floating-bar>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .add-risk-rc{border-top:3px solid #1E5DD3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-rc-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{padding:24px 36px 16px;height:calc(100vh - 112px)}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body ul{padding:0;margin:0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list{padding:16px 0 0;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 248px);overflow:auto}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li:last-of-type{color:#66bf72}::ng-deep .add-risk-rc-body ul.add-risk-rc-list.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body ul.add-risk-rc-list.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 182px)}::ng-deep .add-risk-rc.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-rc{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-rc-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-rc-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-rc-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-rc-body{padding:24px 36px 16px;height:calc(100vh - 112px)}::ng-deep .add-risk-rc-body .search-block{position:relative}::ng-deep .add-risk-rc-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-rc-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-rc-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-rc-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-rc-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-rc-body ul{padding:0;margin:0}::ng-deep .add-risk-rc-body ul.add-risk-rc-list{padding:16px 0 0;display:block;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 248px);overflow:auto}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li{width:100%;padding:0 0 16px;list-style:none}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio{display:flex}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label{width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox label span.value,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;line-height:18px!important}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name{display:flex;justify-content:flex-start;width:auto;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li{list-style:none;color:#747576;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:auto;padding:0 8px 0 0;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li i,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li i{font-size:8px;padding-right:8px}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li:first-child,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li:first-child{color:#4681ef;max-width:100%}::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-checkbox ul.add-category-name li:last-of-type,::ng-deep .add-risk-rc-body ul.add-risk-rc-list li app-cs-radio ul.add-category-name li:last-of-type{color:#66bf72}::ng-deep .add-risk-rc-body ul.add-risk-rc-list.two-column{display:flex;flex-wrap:wrap}::ng-deep .add-risk-rc-body ul.add-risk-rc-list.two-column li{width:50%;padding-right:20px}::ng-deep .add-risk-rc-body app-no-data .no-data-wrapper{height:calc(100vh - 182px)}::ng-deep .add-risk-rc.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .add-risk-rc .message-footer{background:#1e5dd3;border-radius:5px;margin:0 0 0 30px;width:calc(100% - 60px);position:relative;bottom:0}::ng-deep .add-risk-rc .message-footer .message{padding:15px;display:flex;align-items:flex-start}::ng-deep .add-risk-rc .message-footer .message i{width:auto;font-size:16px;color:#fff}::ng-deep .add-risk-rc .message-footer .message span{color:#fff;font-size:12px;line-height:18px;padding-left:9px;font-weight:300}::ng-deep .add-risk-rc .message-footer .footer{border-top:1px solid #1483ef;display:flex;justify-content:space-between;align-items:center;padding:10px 15px}::ng-deep .add-risk-rc .message-footer .footer span{color:#fff;font-size:14px}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper{display:flex}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button{width:60px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:500;border:1px solid #fff;text-transform:uppercase;border-radius:2px;outline:none;padding:0;margin:0}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.outline{background:#1e5dd3;color:#fff}::ng-deep .add-risk-rc .message-footer .footer .button-wrapper button.fill{background:#fff;color:#1e5dd3}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 CheckboxListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/checkpoint/checkpoints/checkpoints.component.js

@@ -231,7 +231,7 @@ CheckpointsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoints',
                 template: "<!-- <p>checkpoints works!</p> -->\r\n<div class=\"checkpoints\" [class.animate]=\"animation\">\r\n    <div class=\"checkpoints-head\">\r\n        <h3 class=\"checkpoints-title\">Add Checkpoints</h3>\r\n    </div>\r\n    <div class=\"checkpoints-body\" [class.align-center]=\"checkpointData?.length === 0\">\r\n        <app-checkpoints-list *ngIf=\"checkpointData?.length === 0\" (createQuestion)=\"addQuestion($event)\" [questionTypeList]=\"questionTypeList\"></app-checkpoints-list>\r\n        <app-checkpoints-questions *ngIf=\"checkpointData?.length > 0\" [checkpointInstruction]=\"checkpointInstruction\" [errorIndex]='errorIndex' [checkpointData]=\"checkpointData\" [questionTypeList]=\"questionTypeList\"\r\n           (createQuestion)=\"addQuestion($event)\" (deleteQuestion)=\"removeQuestion($event)\" (copyQuestion)=\"copyQuestion($event)\"\r\n           (blankQuestion)=\"addQuestion($event.type,$event.index)\" (createOption)=\"createOption($event.questionIndex,$event.optionIndex,$event.type)\"\r\n           (removeOption)=\"deleteOption($event.questionIndex,$event.optionIndex,$event.type)\" (updateDescription)=\"checkpointDescription($event)\"></app-checkpoints-questions>\r\n    </div>\r\n    <div class=\"checkpoints-footer\">\r\n        <app-checkpoint-floating-bar [count]=\"checkpointData.length\" (saveList)=\"save()\" [pluralText]=\"'Checkpoints selected.'\" [singularText]=\"'Checkpoint selected.'\"\r\n        (closeList)=\"close()\" ></app-checkpoint-floating-bar>\r\n    </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.checkpoints{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1E5DD3;z-index:-1}.checkpoints-head{background:#FBFBFB;height:44px;padding:0 12px;display:flex;align-items:center}.checkpoints-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.checkpoints-body{padding:60px 156px;height:calc(100vh - 110px);overflow:auto}.checkpoints-body.align-center{display:flex;align-items:center;justify-content:center}.checkpoints-body::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.checkpoints-body::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.checkpoints-body::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.checkpoints-footer{display:block}.checkpoints.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.checkpoints{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:-1}.checkpoints-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.checkpoints-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.checkpoints-body{padding:60px 156px;height:calc(100vh - 110px);overflow:auto}.checkpoints-body.align-center{display:flex;align-items:center;justify-content:center}.checkpoints-body::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.checkpoints-body::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.checkpoints-body::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.checkpoints-footer{display:block}.checkpoints.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 CheckpointsComponent.ctorParameters = () => [

package/esm2015/lib/sharedComponents/checkpoint/checkpoints-list/checkpoints-list.component.js

@@ -14,7 +14,7 @@ CheckpointsListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoints-list',
                 template: "<div class=\"checkpoints-list\">\r\n    <h4 class=\"title\">Please select a question type to begin:</h4>\r\n    <ul class=\"list-of-type\">\r\n        <li *ngFor=\"let questionType of questionTypeList\">\r\n            <button (click)=\"addQuestion(questionType)\">\r\n                <i class=\"icons\" [innerHTML]=\"questionType?.icon\"></i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">{{questionType?.text}}</span>\r\n                    <span class=\"description\">{{questionType?.description}}</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.checkpoints-list{position:relative;margin:0 -100px;height:60%}.checkpoints-list h4.title{color:#161b2f;font-size:18px;margin:0 0 20px;padding:0;line-height:20px;font-weight:500;text-align:center}.checkpoints-list ul{display:flex;flex-wrap:wrap;padding:0;margin:0;width:700px}.checkpoints-list ul li{list-style:none;padding:4px;width:calc(100% / 2);animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both}.checkpoints-list ul li button{display:flex;align-items:center;padding:14px;box-shadow:0 0 5px #fbfbfb;transition:all .3s ease-in-out;background:#fff;cursor:pointer;border-radius:4px;height:100%;width:100%;border:1px solid #F1F1F1}.checkpoints-list ul li button i{height:36px;width:36px;border-radius:2px;background:#f1f1f1;font-size:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#1e5dd3;margin-right:8px}.checkpoints-list ul li button span{text-align:left}.checkpoints-list ul li button span.value{display:block;width:calc(100% - 40px);text-transform:none}.checkpoints-list ul li button span.title{font-size:14px;color:#161b2f;width:100%;display:block;line-height:18px;font-weight:400}.checkpoints-list ul li button span.description{font-size:12px;color:#747576;display:block;font-weight:400}.checkpoints-list ul li button:hover{box-shadow:0 0 5px #1e5d08}@keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.checkpoints-list{position:relative;margin:0 -100px;height:60%}.checkpoints-list h4.title{color:#161b2f;font-size:18px;margin:0 0 20px;padding:0;line-height:20px;font-weight:500;text-align:center}.checkpoints-list ul{display:flex;flex-wrap:wrap;padding:0;margin:0;width:700px}.checkpoints-list ul li{list-style:none;padding:4px;width:calc(100% / 2);-webkit-animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both;animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both}.checkpoints-list ul li button{display:flex;align-items:center;padding:14px;box-shadow:0 0 5px 0 #fbfbfb;transition:all .3s ease-in-out;background:#fff;cursor:pointer;border-radius:4px;height:100%;width:100%;border:1px solid #f1f1f1}.checkpoints-list ul li button i{height:36px;width:36px;border-radius:2px;background:#f1f1f1;font-size:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#1e5dd3;margin-right:8px}.checkpoints-list ul li button span{text-align:left}.checkpoints-list ul li button span.value{display:block;width:calc(100% - 40px);text-transform:none}.checkpoints-list ul li button span.title{font-size:14px;color:#161b2f;width:100%;display:block;line-height:18px;font-weight:400}.checkpoints-list ul li button span.description{font-size:12px;color:#747576;display:block;font-weight:400}.checkpoints-list ul li button:hover{box-shadow:0 0 5px rgba(30,93,211,.27)}@-webkit-keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}"]
             },] }
 ];
 CheckpointsListComponent.ctorParameters = () => [];