vcomply-workflow-engine 6.1.82 → 6.1.84

package/fesm2022/vcomply-workflow-engine.mjs

@@ -2755,6 +2755,16 @@ class CommonService {
             total_count: total,
         };
     }
+    /**
+     * Post Message to parent window
+     * @param message
+     */
+    postMessageToParent(message) {
+        window.parent.postMessage(message, this.getOrigin());
+    }
+    getOrigin() {
+        return window.location.origin;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommonService, providedIn: 'root' }); }
 }
@@ -26302,11 +26312,11 @@ class ProgramListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListComponent, deps: [{ token: ListUtilsService }, { token: ProgramListApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramListComponent, selector: "app-program-list", inputs: { items: "items", selectedItems: "selectedItems", url: "url" }, outputs: { itemSelected: "itemSelected", itemDeselected: "itemDeselected", itemsSelectedChange: "itemsSelectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">\n        Select Program Type\n      </div>\n      <ng-template #selectedTypeFilter>\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"appliedProgramType.length\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"appliedProgramType[0]?.name\"\n            placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\n          <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n            appPopover placement=\"right\" *ngIf=\"appliedProgramType.length > 1\">\n            +{{ appliedProgramType.length - 1 }}\n          </button>\n        </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div class=\"dynamic-list-table\" *ngIf=\"\n      paginatedItems?.length > 0 ||\n        loaderState.programList || loaderState.categoryList;\n      else defaultTemplate\n    \">\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n            #\n          </div>\n          <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList; else programListLoader\">\n          <div *ngFor=\"\n              let item of paginatedItems | search : searchTerm : 'name';\n              let i = index\n            \" class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n            <div class=\"list-column serial\">\n              <div class=\"srNo\">{{ i + 1 }}</div>\n            </div>\n            <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n            </div>\n            <div class=\"list-column count\" *ngIf=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                {{ selectedItems[item.id].length }}\n              </div>\n              <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                {{\n                selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                }}\n                SELECTED\n              </div>\n            </div>\n            <div class=\"list-column action\">\n              <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                <i class=\"icons\"> &#xe970; </i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"\n            !loaderState.categoryList && !loaderState.programList;\n            else categoryListLoader\n          \">\n          <ng-container *ngIf=\"\n              categoryList[activeProgram?.id]?.length > 0;\n              else defaultSubCategoryTemplate\n            \">\n            <div class=\"list-row vx-pl-2 vx-pr-2\" *ngFor=\"\n                let item of categoryList[activeProgram?.id];\n                let i = index\n              \">\n              <app-cs-checkbox [value]=\"item?.id\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                <span class=\"value-inner\">\n                  <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                  <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                    <div *ngIf=\"item?.parentTree?.length\"\n                      class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                      Within\n                    </div>\n                    <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{ item?.parentTree?.join(\" > \") }}\n                    </div>\n                  </div>\n                </span>\n              </app-cs-checkbox>\n            </div>Select a Program to view the associated sub-categories.\n          </ng-container>\n          <ng-template #defaultSubCategoryTemplate>\n            <div class=\"sub-no-data\">\n              <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\">\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: TableLoaderComponent, selector: "app-table-loader", inputs: ["listSize"] }, { kind: "pipe", type: SearchPipe$1, name: "search" }, { kind: "pipe", type: CheckSelectedItemsPipe, name: "checkSelectedItems" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramListComponent, selector: "app-program-list", inputs: { items: "items", selectedItems: "selectedItems", url: "url" }, outputs: { itemSelected: "itemSelected", itemDeselected: "itemDeselected", itemsSelectedChange: "itemsSelectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">\n        Select Program Type\n      </div>\n      <ng-template #selectedTypeFilter>\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"appliedProgramType.length\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"appliedProgramType[0]?.name\"\n            placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\n          <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n            appPopover placement=\"right\" *ngIf=\"appliedProgramType.length > 1\">\n            +{{ appliedProgramType.length - 1 }}\n          </button>\n        </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div class=\"dynamic-list-table\" *ngIf=\"\n      paginatedItems?.length > 0 ||\n        loaderState.programList || loaderState.categoryList;\n      else defaultTemplate\n    \">\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n            #\n          </div>\n          <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList; else programListLoader\">\n          <div *ngFor=\"\n              let item of paginatedItems | search : searchTerm : 'name';\n              let i = index\n            \" class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n            <div class=\"list-column serial\">\n              <div class=\"srNo\">{{ i + 1 }}</div>\n            </div>\n            <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n            </div>\n            <div class=\"list-column count\" *ngIf=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                {{ selectedItems[item.id].length }}\n              </div>\n              <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                {{\n                selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                }}\n                SELECTED\n              </div>\n            </div>\n            <div class=\"list-column action\">\n              <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                <i class=\"icons\"> &#xe970; </i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"\n            !loaderState.categoryList && !loaderState.programList;\n            else categoryListLoader\n          \">\n          <ng-container *ngIf=\"\n              categoryList[activeProgram?.id]?.length > 0;\n              else defaultSubCategoryTemplate\n            \">\n            <div class=\"list-row vx-pl-2 vx-pr-2\" *ngFor=\"\n                let item of categoryList[activeProgram?.id];\n                let i = index\n              \">\n              <app-cs-checkbox [value]=\"item?.id\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                <span class=\"value-inner\">\n                  <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                  <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                    <div *ngIf=\"item?.parentTree?.length\"\n                      class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                      Within\n                    </div>\n                    <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{ item?.parentTree?.join(\" > \") }}\n                    </div>\n                  </div>\n                </span>\n              </app-cs-checkbox>\n            </div>\n          </ng-container>\n          <ng-template #defaultSubCategoryTemplate>\n            <div class=\"sub-no-data\">\n              <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\">\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: TableLoaderComponent, selector: "app-table-loader", inputs: ["listSize"] }, { kind: "pipe", type: SearchPipe$1, name: "search" }, { kind: "pipe", type: CheckSelectedItemsPipe, name: "checkSelectedItems" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-program-list', template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">\n        Select Program Type\n      </div>\n      <ng-template #selectedTypeFilter>\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"appliedProgramType.length\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"appliedProgramType[0]?.name\"\n            placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\n          <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n            appPopover placement=\"right\" *ngIf=\"appliedProgramType.length > 1\">\n            +{{ appliedProgramType.length - 1 }}\n          </button>\n        </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div class=\"dynamic-list-table\" *ngIf=\"\n      paginatedItems?.length > 0 ||\n        loaderState.programList || loaderState.categoryList;\n      else defaultTemplate\n    \">\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n            #\n          </div>\n          <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList; else programListLoader\">\n          <div *ngFor=\"\n              let item of paginatedItems | search : searchTerm : 'name';\n              let i = index\n            \" class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n            <div class=\"list-column serial\">\n              <div class=\"srNo\">{{ i + 1 }}</div>\n            </div>\n            <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n            </div>\n            <div class=\"list-column count\" *ngIf=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                {{ selectedItems[item.id].length }}\n              </div>\n              <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                {{\n                selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                }}\n                SELECTED\n              </div>\n            </div>\n            <div class=\"list-column action\">\n              <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                <i class=\"icons\"> &#xe970; </i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"\n            !loaderState.categoryList && !loaderState.programList;\n            else categoryListLoader\n          \">\n          <ng-container *ngIf=\"\n              categoryList[activeProgram?.id]?.length > 0;\n              else defaultSubCategoryTemplate\n            \">\n            <div class=\"list-row vx-pl-2 vx-pr-2\" *ngFor=\"\n                let item of categoryList[activeProgram?.id];\n                let i = index\n              \">\n              <app-cs-checkbox [value]=\"item?.id\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                <span class=\"value-inner\">\n                  <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                  <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                    <div *ngIf=\"item?.parentTree?.length\"\n                      class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                      Within\n                    </div>\n                    <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{ item?.parentTree?.join(\" > \") }}\n                    </div>\n                  </div>\n                </span>\n              </app-cs-checkbox>\n            </div>Select a Program to view the associated sub-categories.\n          </ng-container>\n          <ng-template #defaultSubCategoryTemplate>\n            <div class=\"sub-no-data\">\n              <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\">\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+            args: [{ selector: 'app-program-list', template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchTerm\" placeholder=\"Search...\" (keyup)=\"search()\" />\n    </div>\n    <div class=\"dynamic-list-filter\" appPopover (click)=\"programTypePopover.popover()\" placement=\"right\">\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">\n        Select Program Type\n      </div>\n      <ng-template #selectedTypeFilter>\n        <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"appliedProgramType.length\">\n          <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"appliedProgramType[0]?.name\"\n            placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ appliedProgramType[0]?.name\n            }}</span>\n          <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n            appPopover placement=\"right\" *ngIf=\"appliedProgramType.length > 1\">\n            +{{ appliedProgramType.length - 1 }}\n          </button>\n        </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div class=\"dynamic-list-table\" *ngIf=\"\n      paginatedItems?.length > 0 ||\n        loaderState.programList || loaderState.categoryList;\n      else defaultTemplate\n    \">\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\">\n            #\n          </div>\n          <div class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\">\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList; else programListLoader\">\n          <div *ngFor=\"\n              let item of paginatedItems | search : searchTerm : 'name';\n              let i = index\n            \" class=\"list-row\" [class.selected]=\"activeProgram?.id === item.id\" (click)=\"viewCategory(item)\">\n            <div class=\"list-column serial\">\n              <div class=\"srNo\">{{ i + 1 }}</div>\n            </div>\n            <div class=\"list-column name\" [class.with-count]=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n            </div>\n            <div class=\"list-column count\" *ngIf=\"selectedItems[item.id]?.length > 0\">\n              <div class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\">\n                {{ selectedItems[item.id].length }}\n              </div>\n              <div class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\">\n                {{\n                selectedItems[item.id].length > 1 ? \"CATEGORIES\" : \"CATEGORY\"\n                }}\n                SELECTED\n              </div>\n            </div>\n            <div class=\"list-column action\">\n              <button class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                <i class=\"icons\"> &#xe970; </i>\n              </button>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"\n            !loaderState.categoryList && !loaderState.programList;\n            else categoryListLoader\n          \">\n          <ng-container *ngIf=\"\n              categoryList[activeProgram?.id]?.length > 0;\n              else defaultSubCategoryTemplate\n            \">\n            <div class=\"list-row vx-pl-2 vx-pr-2\" *ngFor=\"\n                let item of categoryList[activeProgram?.id];\n                let i = index\n              \">\n              <app-cs-checkbox [value]=\"item?.id\" [ngValue]=\"\n                  item.id\n                    | checkSelectedItems : selectedItems[activeProgram?.id]\n                \" (ngValueChange)=\"selectItem($event, item)\">\n                <span class=\"value-inner\">\n                  <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n                  <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                    <div *ngIf=\"item?.parentTree?.length\"\n                      class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                      Within\n                    </div>\n                    <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                      placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{ item?.parentTree?.join(\" > \") }}\n                    </div>\n                  </div>\n                </span>\n              </app-cs-checkbox>\n            </div>\n          </ng-container>\n          <ng-template #defaultSubCategoryTemplate>\n            <div class=\"sub-no-data\">\n              <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"PROGRAM_NO_DATA.categoryList\"></app-no-data>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\n          searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\n        \"></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover (closePopoverEvent)=\"closePopover($event)\">\n  <div class=\"new-action-list\">\n    <div class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\">\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox [value]=\"item.id\" [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\">\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\">\n      <button (click)=\"resetFilter(); programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\">\n        RESET\n      </button>\n      <button (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\">\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper{border:1px solid #cdced6;border-radius:.25rem}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container img{width:180px}::ng-deep .dynamic-list-body .right-column .sub-no-data app-no-data .no-data-wrapper .no-data-container p{font-size:16px}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: ListUtilsService }, { type: ProgramListApiService }]; }, propDecorators: { items: [{
                 type: Input
             }], selectedItems: [{
@@ -31279,10 +31289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; } });
 
 class AssessmentListComponent {
-    constructor(responsibilityService, assessmentService, auth) {
+    constructor(responsibilityService, assessmentService, auth, commonService) {
         this.responsibilityService = responsibilityService;
         this.assessmentService = assessmentService;
         this.auth = auth;
+        this.commonService = commonService;
         this.ASSETS = ASSETS;
         this.animation = false;
         this.subList = false;
@@ -31394,7 +31405,6 @@ class AssessmentListComponent {
         this.assessmentPayload.search_text = '';
         this.getAssessmentCategoryList();
     }
-    // TODO: Call API method
     getAssessmentCategoryList() {
         this.isLoader = true;
         this.responsibilityService
@@ -31402,6 +31412,11 @@ class AssessmentListComponent {
             .subscribe((res) => {
             this.assessmentCategory = res;
             this.isLoader = false;
+            this.commonService.postMessageToParent({
+                event: 'iframeLoaded',
+                data: {},
+                meta: {}
+            });
         });
     }
     // TODO: Call Sub data API method
@@ -31450,13 +31465,13 @@ class AssessmentListComponent {
         };
         this.isDeleted = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssessmentListComponent, deps: [{ token: ResponsibilityService }, { token: AssessmentService$2 }, { token: AuthService$1 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssessmentListComponent, selector: "app-assessment-list", inputs: { isEdit: "isEdit", mode: "mode", selectedAssessment: "selectedAssessment", selectedAssessmentData: "selectedAssessmentData", program_ids: "program_ids", isFullScreen: "isFullScreen" }, outputs: { onAssessmentSelect: "onAssessmentSelect", cancelAssessment: "cancelAssessment" }, ngImport: i0, template: "<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"\n  [isFullScreen]=\"isFullScreen\"></app-preview>\n<div class=\"assessment-list\" [class.animate]=\"animation\" [class.full-screen]=\"isFullScreen\">\n  <div *ngIf=\"!isFullScreen\" class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\n  </div>\n  <div class=\"assessment-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\"\n        placeholder=\"Search Assessment Category\" />\n    </div>\n    <app-workflow-pagination [pageCount]=\"assessmentCategory?.totalPage\" [total]=\"assessmentCategory?.totalRecords\"\n      [start]=\"assessmentCategory?.start_value\" [end]=\"assessmentCategory?.end_value\" [activeAlphabet]=\"''\"\n      (selectedAlphabet)=\"onAlphabetSelected($event)\"\n      (selectedPage)=\"onPageSelection($event)\"></app-workflow-pagination>\n    <div *ngIf=\"\n        assessmentCategory.data.length === 0 && !isLoader && searchAssessments\n      \" class=\"assessment-list-part vx-mb-4\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\n    </div>\n    <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\n      <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\n        <div class=\"assessment-list-heading\">\n          {{\n          mode === \"policy\"\n          ? \"Assessment already selected\"\n          : \"Assessment already selected for this responsibility\"\n          }}\n        </div>\n        <div class=\"assessment-list-item\">\n          <div class=\"table-row\">\n            <div class=\"table-column serial disabled\">\n              <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\n            </div>\n            <div class=\"table-column sub-name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"\n                    selectedAssessment?.assessmentDetails?.assessment_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ selectedAssessment?.assessmentDetails?.assessment_name }}\n                </div>\n                <div class=\"within-part\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"\n                      selectedAssessment?.category_details?.category_name +\n                      (selectedAssessment?.category_details?.parent_tree\n                        ? ' > ' +\n                          selectedAssessment?.category_details?.parent_tree\n                        : '')\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    selectedAssessment?.category_details?.category_name +\n                    (selectedAssessment?.category_details?.parent_tree\n                    ? \" > \" +\n                    selectedAssessment?.category_details?.parent_tree\n                    : \"\")\n                    }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column question\">\n              <div class=\"buttons\">\n                <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\">\n                  <i class=\"icons\">&#xeae5;</i> Preview\n                </button>\n                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\n              </div>\n              <div class=\"label\">\n                {{ selectedAssessment?.assessmentDetails?.questions }}\n                {{\n                selectedAssessment?.assessmentDetails?.questions > 1\n                ? \"Questions\"\n                : \"Question\"\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"assessment-list-heading\">\n        {{\n        mode === \"policy\"\n        ? \"Select an Assessment\"\n        : \"Select an Assessment for this responsibility\"\n        }}\n      </div>\n\n      <!--\n                    Assessment category list \n                    active class is used for highlighting opened element\n            -->\n      <ng-container *ngIf=\"!isLoader\">\n        <div *ngFor=\"let data of assessmentCategory.data; let i = index\" class=\"assessment-list-item\" [class.active]=\"\n            openedCategory.includes(i) ||\n            data.id === selectedAssessment?.category_id\n          \">\n          <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\"\n            [class.disabled]=\"data?.assessmentcount < 1\">\n            <div class=\"table-column serial\">\n              <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ dataPerPage * (assessmentPayload.page_no - 1) + (i + 1) }}\n              </div>\n            </div>\n            <div class=\"table-column name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                  [tooltipMandatory]=\"false\">\n                  {{ data?.category_name }}\n                </div>\n                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                    [tooltipMandatory]=\"false\">{{ data?.parent_tree }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column action\">\n              <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled]=\"data?.assessmentcount < 1\"\n                [disabled]=\"data?.assessmentcount < 1\">\n                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\n                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\n              </button>\n            </div>\n          </div>\n\n          <!-- Assessment list start from here -->\n          <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\n            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\n              <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"\n                  assessment.id === selectedAssessment?.assessment_id &&\n                  data.id === selectedAssessment?.category_id\n                \">\n                <div class=\"table-column serial\">\n                  <div [id]=\"'sub-sr-no' + i + j\" class=\"sr-no\" appTooltip=\"{{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\n                    <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"\n                        assessment?.id === selectedAssessment?.assessment_id &&\n                        data?.id === selectedAssessment?.category_id\n                      \" (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\n                  </div>\n                </div>\n                <div class=\"table-column sub-name\">\n                  <div class=\"value\" [appTooltip]=\"\n                      'Mission and message, communications to external audiences'\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                    {{ assessment?.assessment_name }}\n                  </div>\n                </div>\n                <div class=\"table-column question\">\n                  <div class=\"buttons\">\n                    <button class=\"action-btn\" (click)=\"preview(assessment)\">\n                      <i class=\"icons\">&#xeae5;</i> Preview\n                    </button>\n                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\n                  </div>\n                  <div class=\"label\">\n                    {{ assessment?.questions }}\n                    {{ assessment?.questions > 1 ? \"Questions\" : \"Question\" }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <!-- Loader loading isLoader  -->\n            <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\n            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\n          </div>\n        </div>\n      </ng-container>\n      <!-- Loader loading isLoader  -->\n      <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\n    </div>\n    <!-- No data image  -->\n    <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\"\n      [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n\n    <app-floating-bar [selectedData]=\"[]\" (closeEvent)=\"save()\" (closeList)=\"close()\"\n      [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\" [selectedData]=\"\n        selectedAssessment?.assessment_id\n          ? [selectedAssessment?.assessmentDetails]\n          : []\n      \" [displayElementKey]=\"'assessment_name'\" [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\">\n    </app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;inset:0 500px 0 0}::ng-deep .assessment-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}::ng-deep .assessment-list-body app-no-data .no-data-wrapper{height:calc(100% - 118px)}::ng-deep .assessment-list.full-screen{width:100%}::ng-deep .assessment-list.full-screen:before{display:none}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: PreviewComponent, selector: "app-preview", inputs: ["questionData", "isFullScreen"], outputs: ["previewBack"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: WorkflowPaginationComponent, selector: "app-workflow-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "noFilter", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: AssessmentListLoaderComponent, selector: "app-assessment-list-loader" }, { kind: "component", type: AssessmentListSubLoaderComponent, selector: "app-assessment-list-sub-loader" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssessmentListComponent, deps: [{ token: ResponsibilityService }, { token: AssessmentService$2 }, { token: AuthService$1 }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssessmentListComponent, selector: "app-assessment-list", inputs: { isEdit: "isEdit", mode: "mode", selectedAssessment: "selectedAssessment", selectedAssessmentData: "selectedAssessmentData", program_ids: "program_ids", isFullScreen: "isFullScreen" }, outputs: { onAssessmentSelect: "onAssessmentSelect", cancelAssessment: "cancelAssessment" }, ngImport: i0, template: "<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"\n  [isFullScreen]=\"isFullScreen\"></app-preview>\n<div class=\"assessment-list\" [class.animate]=\"animation\" [class.full-screen]=\"isFullScreen\">\n  <div *ngIf=\"!isFullScreen\" class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\n  </div>\n  <div class=\"assessment-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\"\n        placeholder=\"Search Assessment Category\" />\n    </div>\n    <app-workflow-pagination [pageCount]=\"assessmentCategory?.totalPage\" [total]=\"assessmentCategory?.totalRecords\"\n      [start]=\"assessmentCategory?.start_value\" [end]=\"assessmentCategory?.end_value\" [activeAlphabet]=\"''\"\n      (selectedAlphabet)=\"onAlphabetSelected($event)\"\n      (selectedPage)=\"onPageSelection($event)\"></app-workflow-pagination>\n    <div *ngIf=\"\n        assessmentCategory.data.length === 0 && !isLoader && searchAssessments\n      \" class=\"assessment-list-part vx-mb-4\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\n    </div>\n    <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\n      <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\n        <div class=\"assessment-list-heading\">\n          {{\n          mode === \"policy\"\n          ? \"Assessment already selected\"\n          : \"Assessment already selected for this responsibility\"\n          }}\n        </div>\n        <div class=\"assessment-list-item\">\n          <div class=\"table-row\">\n            <div class=\"table-column serial disabled\">\n              <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\n            </div>\n            <div class=\"table-column sub-name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"\n                    selectedAssessment?.assessmentDetails?.assessment_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ selectedAssessment?.assessmentDetails?.assessment_name }}\n                </div>\n                <div class=\"within-part\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"\n                      selectedAssessment?.category_details?.category_name +\n                      (selectedAssessment?.category_details?.parent_tree\n                        ? ' > ' +\n                          selectedAssessment?.category_details?.parent_tree\n                        : '')\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    selectedAssessment?.category_details?.category_name +\n                    (selectedAssessment?.category_details?.parent_tree\n                    ? \" > \" +\n                    selectedAssessment?.category_details?.parent_tree\n                    : \"\")\n                    }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column question\">\n              <div class=\"buttons\">\n                <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\">\n                  <i class=\"icons\">&#xeae5;</i> Preview\n                </button>\n                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\n              </div>\n              <div class=\"label\">\n                {{ selectedAssessment?.assessmentDetails?.questions }}\n                {{\n                selectedAssessment?.assessmentDetails?.questions > 1\n                ? \"Questions\"\n                : \"Question\"\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"assessment-list-heading\">\n        {{\n        mode === \"policy\"\n        ? \"Select an Assessment\"\n        : \"Select an Assessment for this responsibility\"\n        }}\n      </div>\n\n      <!--\n                    Assessment category list \n                    active class is used for highlighting opened element\n            -->\n      <ng-container *ngIf=\"!isLoader\">\n        <div *ngFor=\"let data of assessmentCategory.data; let i = index\" class=\"assessment-list-item\" [class.active]=\"\n            openedCategory.includes(i) ||\n            data.id === selectedAssessment?.category_id\n          \">\n          <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\"\n            [class.disabled]=\"data?.assessmentcount < 1\">\n            <div class=\"table-column serial\">\n              <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ dataPerPage * (assessmentPayload.page_no - 1) + (i + 1) }}\n              </div>\n            </div>\n            <div class=\"table-column name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                  [tooltipMandatory]=\"false\">\n                  {{ data?.category_name }}\n                </div>\n                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                    [tooltipMandatory]=\"false\">{{ data?.parent_tree }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column action\">\n              <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled]=\"data?.assessmentcount < 1\"\n                [disabled]=\"data?.assessmentcount < 1\">\n                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\n                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\n              </button>\n            </div>\n          </div>\n\n          <!-- Assessment list start from here -->\n          <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\n            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\n              <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"\n                  assessment.id === selectedAssessment?.assessment_id &&\n                  data.id === selectedAssessment?.category_id\n                \">\n                <div class=\"table-column serial\">\n                  <div [id]=\"'sub-sr-no' + i + j\" class=\"sr-no\" appTooltip=\"{{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\n                    <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"\n                        assessment?.id === selectedAssessment?.assessment_id &&\n                        data?.id === selectedAssessment?.category_id\n                      \" (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\n                  </div>\n                </div>\n                <div class=\"table-column sub-name\">\n                  <div class=\"value\" [appTooltip]=\"\n                      'Mission and message, communications to external audiences'\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                    {{ assessment?.assessment_name }}\n                  </div>\n                </div>\n                <div class=\"table-column question\">\n                  <div class=\"buttons\">\n                    <button class=\"action-btn\" (click)=\"preview(assessment)\">\n                      <i class=\"icons\">&#xeae5;</i> Preview\n                    </button>\n                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\n                  </div>\n                  <div class=\"label\">\n                    {{ assessment?.questions }}\n                    {{ assessment?.questions > 1 ? \"Questions\" : \"Question\" }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <!-- Loader loading isLoader  -->\n            <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\n            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\n          </div>\n        </div>\n      </ng-container>\n      <!-- Loader loading isLoader  -->\n      <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\n    </div>\n    <!-- No data image  -->\n    <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\"\n      [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n\n    <app-floating-bar [selectedData]=\"[]\" (closeEvent)=\"save()\" (closeList)=\"close()\"\n      [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\" [selectedData]=\"\n        selectedAssessment?.assessment_id\n          ? [selectedAssessment?.assessmentDetails]\n          : []\n      \" [displayElementKey]=\"'assessment_name'\" [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\">\n    </app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;inset:0 500px 0 0}::ng-deep .assessment-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 220px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}::ng-deep .assessment-list-body app-no-data .no-data-wrapper{height:calc(100% - 118px)}::ng-deep .assessment-list.full-screen{width:100%}::ng-deep .assessment-list.full-screen:before{display:none}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: PreviewComponent, selector: "app-preview", inputs: ["questionData", "isFullScreen"], outputs: ["previewBack"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: WorkflowPaginationComponent, selector: "app-workflow-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "noFilter", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: AssessmentListLoaderComponent, selector: "app-assessment-list-loader" }, { kind: "component", type: AssessmentListSubLoaderComponent, selector: "app-assessment-list-sub-loader" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssessmentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-assessment-list', template: "<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"\n  [isFullScreen]=\"isFullScreen\"></app-preview>\n<div class=\"assessment-list\" [class.animate]=\"animation\" [class.full-screen]=\"isFullScreen\">\n  <div *ngIf=\"!isFullScreen\" class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\n  </div>\n  <div class=\"assessment-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\"\n        placeholder=\"Search Assessment Category\" />\n    </div>\n    <app-workflow-pagination [pageCount]=\"assessmentCategory?.totalPage\" [total]=\"assessmentCategory?.totalRecords\"\n      [start]=\"assessmentCategory?.start_value\" [end]=\"assessmentCategory?.end_value\" [activeAlphabet]=\"''\"\n      (selectedAlphabet)=\"onAlphabetSelected($event)\"\n      (selectedPage)=\"onPageSelection($event)\"></app-workflow-pagination>\n    <div *ngIf=\"\n        assessmentCategory.data.length === 0 && !isLoader && searchAssessments\n      \" class=\"assessment-list-part vx-mb-4\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\n    </div>\n    <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\n      <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\n        <div class=\"assessment-list-heading\">\n          {{\n          mode === \"policy\"\n          ? \"Assessment already selected\"\n          : \"Assessment already selected for this responsibility\"\n          }}\n        </div>\n        <div class=\"assessment-list-item\">\n          <div class=\"table-row\">\n            <div class=\"table-column serial disabled\">\n              <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\n            </div>\n            <div class=\"table-column sub-name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"\n                    selectedAssessment?.assessmentDetails?.assessment_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ selectedAssessment?.assessmentDetails?.assessment_name }}\n                </div>\n                <div class=\"within-part\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"\n                      selectedAssessment?.category_details?.category_name +\n                      (selectedAssessment?.category_details?.parent_tree\n                        ? ' > ' +\n                          selectedAssessment?.category_details?.parent_tree\n                        : '')\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    selectedAssessment?.category_details?.category_name +\n                    (selectedAssessment?.category_details?.parent_tree\n                    ? \" > \" +\n                    selectedAssessment?.category_details?.parent_tree\n                    : \"\")\n                    }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column question\">\n              <div class=\"buttons\">\n                <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\">\n                  <i class=\"icons\">&#xeae5;</i> Preview\n                </button>\n                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\n              </div>\n              <div class=\"label\">\n                {{ selectedAssessment?.assessmentDetails?.questions }}\n                {{\n                selectedAssessment?.assessmentDetails?.questions > 1\n                ? \"Questions\"\n                : \"Question\"\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"assessment-list-heading\">\n        {{\n        mode === \"policy\"\n        ? \"Select an Assessment\"\n        : \"Select an Assessment for this responsibility\"\n        }}\n      </div>\n\n      <!--\n                    Assessment category list \n                    active class is used for highlighting opened element\n            -->\n      <ng-container *ngIf=\"!isLoader\">\n        <div *ngFor=\"let data of assessmentCategory.data; let i = index\" class=\"assessment-list-item\" [class.active]=\"\n            openedCategory.includes(i) ||\n            data.id === selectedAssessment?.category_id\n          \">\n          <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\"\n            [class.disabled]=\"data?.assessmentcount < 1\">\n            <div class=\"table-column serial\">\n              <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ dataPerPage * (assessmentPayload.page_no - 1) + (i + 1) }}\n              </div>\n            </div>\n            <div class=\"table-column name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                  [tooltipMandatory]=\"false\">\n                  {{ data?.category_name }}\n                </div>\n                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                    [tooltipMandatory]=\"false\">{{ data?.parent_tree }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column action\">\n              <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled]=\"data?.assessmentcount < 1\"\n                [disabled]=\"data?.assessmentcount < 1\">\n                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\n                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\n              </button>\n            </div>\n          </div>\n\n          <!-- Assessment list start from here -->\n          <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\n            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\n              <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"\n                  assessment.id === selectedAssessment?.assessment_id &&\n                  data.id === selectedAssessment?.category_id\n                \">\n                <div class=\"table-column serial\">\n                  <div [id]=\"'sub-sr-no' + i + j\" class=\"sr-no\" appTooltip=\"{{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\n                    <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"\n                        assessment?.id === selectedAssessment?.assessment_id &&\n                        data?.id === selectedAssessment?.category_id\n                      \" (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\n                  </div>\n                </div>\n                <div class=\"table-column sub-name\">\n                  <div class=\"value\" [appTooltip]=\"\n                      'Mission and message, communications to external audiences'\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                    {{ assessment?.assessment_name }}\n                  </div>\n                </div>\n                <div class=\"table-column question\">\n                  <div class=\"buttons\">\n                    <button class=\"action-btn\" (click)=\"preview(assessment)\">\n                      <i class=\"icons\">&#xeae5;</i> Preview\n                    </button>\n                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\n                  </div>\n                  <div class=\"label\">\n                    {{ assessment?.questions }}\n                    {{ assessment?.questions > 1 ? \"Questions\" : \"Question\" }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <!-- Loader loading isLoader  -->\n            <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\n            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\n          </div>\n        </div>\n      </ng-container>\n      <!-- Loader loading isLoader  -->\n      <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\n    </div>\n    <!-- No data image  -->\n    <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\"\n      [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n\n    <app-floating-bar [selectedData]=\"[]\" (closeEvent)=\"save()\" (closeList)=\"close()\"\n      [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\" [selectedData]=\"\n        selectedAssessment?.assessment_id\n          ? [selectedAssessment?.assessmentDetails]\n          : []\n      \" [displayElementKey]=\"'assessment_name'\" [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\">\n    </app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;inset:0 500px 0 0}::ng-deep .assessment-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}::ng-deep .assessment-list-body app-no-data .no-data-wrapper{height:calc(100% - 118px)}::ng-deep .assessment-list.full-screen{width:100%}::ng-deep .assessment-list.full-screen:before{display:none}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: ResponsibilityService }, { type: AssessmentService$2 }, { type: AuthService$1 }]; }, propDecorators: { isEdit: [{
+            args: [{ selector: 'app-assessment-list', template: "<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"\n  [isFullScreen]=\"isFullScreen\"></app-preview>\n<div class=\"assessment-list\" [class.animate]=\"animation\" [class.full-screen]=\"isFullScreen\">\n  <div *ngIf=\"!isFullScreen\" class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\n  </div>\n  <div class=\"assessment-list-body\">\n    <div class=\"search-block\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\"\n        placeholder=\"Search Assessment Category\" />\n    </div>\n    <app-workflow-pagination [pageCount]=\"assessmentCategory?.totalPage\" [total]=\"assessmentCategory?.totalRecords\"\n      [start]=\"assessmentCategory?.start_value\" [end]=\"assessmentCategory?.end_value\" [activeAlphabet]=\"''\"\n      (selectedAlphabet)=\"onAlphabetSelected($event)\"\n      (selectedPage)=\"onPageSelection($event)\"></app-workflow-pagination>\n    <div *ngIf=\"\n        assessmentCategory.data.length === 0 && !isLoader && searchAssessments\n      \" class=\"assessment-list-part vx-mb-4\">\n      <app-no-data [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\n    </div>\n    <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\n      <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\n        <div class=\"assessment-list-heading\">\n          {{\n          mode === \"policy\"\n          ? \"Assessment already selected\"\n          : \"Assessment already selected for this responsibility\"\n          }}\n        </div>\n        <div class=\"assessment-list-item\">\n          <div class=\"table-row\">\n            <div class=\"table-column serial disabled\">\n              <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\n            </div>\n            <div class=\"table-column sub-name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"\n                    selectedAssessment?.assessmentDetails?.assessment_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ selectedAssessment?.assessmentDetails?.assessment_name }}\n                </div>\n                <div class=\"within-part\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"\n                      selectedAssessment?.category_details?.category_name +\n                      (selectedAssessment?.category_details?.parent_tree\n                        ? ' > ' +\n                          selectedAssessment?.category_details?.parent_tree\n                        : '')\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    selectedAssessment?.category_details?.category_name +\n                    (selectedAssessment?.category_details?.parent_tree\n                    ? \" > \" +\n                    selectedAssessment?.category_details?.parent_tree\n                    : \"\")\n                    }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column question\">\n              <div class=\"buttons\">\n                <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\">\n                  <i class=\"icons\">&#xeae5;</i> Preview\n                </button>\n                <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\n              </div>\n              <div class=\"label\">\n                {{ selectedAssessment?.assessmentDetails?.questions }}\n                {{\n                selectedAssessment?.assessmentDetails?.questions > 1\n                ? \"Questions\"\n                : \"Question\"\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"assessment-list-heading\">\n        {{\n        mode === \"policy\"\n        ? \"Select an Assessment\"\n        : \"Select an Assessment for this responsibility\"\n        }}\n      </div>\n\n      <!--\n                    Assessment category list \n                    active class is used for highlighting opened element\n            -->\n      <ng-container *ngIf=\"!isLoader\">\n        <div *ngFor=\"let data of assessmentCategory.data; let i = index\" class=\"assessment-list-item\" [class.active]=\"\n            openedCategory.includes(i) ||\n            data.id === selectedAssessment?.category_id\n          \">\n          <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\"\n            [class.disabled]=\"data?.assessmentcount < 1\">\n            <div class=\"table-column serial\">\n              <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ dataPerPage * (assessmentPayload.page_no - 1) + (i + 1) }}\n              </div>\n            </div>\n            <div class=\"table-column name\">\n              <div class=\"name-inner\">\n                <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                  [tooltipMandatory]=\"false\">\n                  {{ data?.category_name }}\n                </div>\n                <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\n                  <span class=\"within-box\">Within</span>\n                  <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                    [tooltipMandatory]=\"false\">{{ data?.parent_tree }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"table-column action\">\n              <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled]=\"data?.assessmentcount < 1\"\n                [disabled]=\"data?.assessmentcount < 1\">\n                <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\n                <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\n              </button>\n            </div>\n          </div>\n\n          <!-- Assessment list start from here -->\n          <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\n            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\n              <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"\n                  assessment.id === selectedAssessment?.assessment_id &&\n                  data.id === selectedAssessment?.category_id\n                \">\n                <div class=\"table-column serial\">\n                  <div [id]=\"'sub-sr-no' + i + j\" class=\"sr-no\" appTooltip=\"{{\n                      dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)\n                    }}.{{ j + 1 }}\n                    <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"\n                        assessment?.id === selectedAssessment?.assessment_id &&\n                        data?.id === selectedAssessment?.category_id\n                      \" (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\n                  </div>\n                </div>\n                <div class=\"table-column sub-name\">\n                  <div class=\"value\" [appTooltip]=\"\n                      'Mission and message, communications to external audiences'\n                    \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                    {{ assessment?.assessment_name }}\n                  </div>\n                </div>\n                <div class=\"table-column question\">\n                  <div class=\"buttons\">\n                    <button class=\"action-btn\" (click)=\"preview(assessment)\">\n                      <i class=\"icons\">&#xeae5;</i> Preview\n                    </button>\n                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\n                  </div>\n                  <div class=\"label\">\n                    {{ assessment?.questions }}\n                    {{ assessment?.questions > 1 ? \"Questions\" : \"Question\" }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <!-- Loader loading isLoader  -->\n            <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\n            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\n          </div>\n        </div>\n      </ng-container>\n      <!-- Loader loading isLoader  -->\n      <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\n    </div>\n    <!-- No data image  -->\n    <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader && !searchAssessments\"\n      [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n\n    <app-floating-bar [selectedData]=\"[]\" (closeEvent)=\"save()\" (closeList)=\"close()\"\n      [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\" [selectedData]=\"\n        selectedAssessment?.assessment_id\n          ? [selectedAssessment?.assessmentDetails]\n          : []\n      \" [displayElementKey]=\"'assessment_name'\" [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\"\n      (deleteEvent)=\"deleteEvent($event)\">\n    </app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;inset:0 500px 0 0}::ng-deep .assessment-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 220px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}::ng-deep .assessment-list-body app-no-data .no-data-wrapper{height:calc(100% - 118px)}::ng-deep .assessment-list.full-screen{width:100%}::ng-deep .assessment-list.full-screen:before{display:none}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ResponsibilityService }, { type: AssessmentService$2 }, { type: AuthService$1 }, { type: CommonService }]; }, propDecorators: { isEdit: [{
                 type: Input
             }], mode: [{
                 type: Input