vcomply-workflow-engine 6.1.82 → 6.1.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -26302,11 +26302,11 @@ class ProgramListComponent {
|
|
|
26302
26302
|
}
|
|
26303
26303
|
}
|
|
26304
26304
|
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 }); }
|
|
26305
|
-
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\"></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\">  </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\">  </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" }] }); }
|
|
26305
|
+
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\"></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\">  </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\">  </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" }] }); }
|
|
26306
26306
|
}
|
|
26307
26307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListComponent, decorators: [{
|
|
26308
26308
|
type: Component,
|
|
26309
|
-
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\"></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\">  </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\">  </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"] }]
|
|
26309
|
+
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\"></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\">  </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\">  </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"] }]
|
|
26310
26310
|
}], ctorParameters: function () { return [{ type: ListUtilsService }, { type: ProgramListApiService }]; }, propDecorators: { items: [{
|
|
26311
26311
|
type: Input
|
|
26312
26312
|
}], selectedItems: [{
|