@sunbird-cb/tree-hierarchy 0.0.4-cbrelease-4.8.26 → 0.0.6-cbrelease-4.8.26

package/fesm2022/sunbird-cb-tree-hierarchy.mjs

@@ -85,7 +85,8 @@ const API_ENDPOINT = {
     UPDATE_TERMS: `/apis/proxies/v8/framework/v1/term/update/`,
     UPDATE_ASSOCIATION: `/apis/proxies/v8/framework/v1/term/update/`,
     PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`,
-    RETIRE_TREM: `apis/proxies/v8/framework/v1/term/retire`
+    RETIRE_TREM: `/apis/proxies/v8/framework/v1/term/retire`,
+    UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`
 };
 class TreeHierarchyService {
     constructor(http) {
@@ -114,6 +115,9 @@ class TreeHierarchyService {
     retireTerm(requestBody, frameworkObj) {
         return this.http.post(`${API_ENDPOINT.RETIRE_TREM}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
     }
+    updateCategory(requestBody, frameworkObj) {
+        return this.http.patch(`${API_ENDPOINT.UPDATE_CATEGORY}${frameworkObj.category}?framework=${frameworkObj.id}`, requestBody);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyService, providedIn: 'root' }); }
 }
@@ -9724,10 +9728,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i5$2.MatLegacySnackBar }]; } });
 
 class OrgHierarchyAddModalComponent {
-    constructor(dialogRef, data, treeHierarchySvc) {
+    constructor(dialogRef, data, treeHierarchySvc, frameworkService) {
         this.dialogRef = dialogRef;
         this.data = data;
         this.treeHierarchySvc = treeHierarchySvc;
+        this.frameworkService = frameworkService;
         this.searchControl = new FormControl('');
         this.selectedOrgsControl = new FormControl([]);
         this.orgOptions = [];
@@ -9842,11 +9847,27 @@ class OrgHierarchyAddModalComponent {
         });
         if (orgListData && orgListData.result &&
             orgListData.result.response && orgListData.result.response.content) {
-            this.orgOptions = orgListData.result.response.content || [];
+            const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
+            let orgIdsAdded = [];
+            if (framworkData && framworkData.categories && framworkData.categories.length > 0) {
+                framworkData.categories.forEach((category) => {
+                    if (category.terms && category.terms.length > 0) {
+                        category.terms.forEach((term) => {
+                            if (term.additionalProperties && term.additionalProperties.orgId) {
+                                if (!orgIdsAdded.includes(term.additionalProperties.orgId)) {
+                                    orgIdsAdded.push(term.additionalProperties.orgId);
+                                }
+                            }
+                        });
+                    }
+                });
+            }
+            const filteredOrgList = orgListData.result.response.content.filter((org) => !orgIdsAdded.includes(org.identifier));
+            this.orgOptions = filteredOrgList || [];
             this.filteredOptions = [...this.orgOptions];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: TreeHierarchyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: TreeHierarchyService }, { token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <div class=\"header-title\">\n      <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n    </div>\n    <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Content -->\n  <div class=\"modal-content\">\n    <div class=\"content-container\">\n        <div class=\"flex flex-col org-container\">\n          <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n          <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n          <div class=\"dashed-line\"></div>\n        </div>\n        <ng-container *ngIf=\"data?.previous?.length > 0\">\n            <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n            [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n                <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n                <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n                <div class=\"dashed-line\"></div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"data?.currentData\">\n            <div class=\"flex flex-col org-container\" \n            [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n                <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n                \n                <!-- Searchable multi-select -->\n                <div class=\"select-search-container\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                        <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n                        [panelClass]=\"'mat-select-panel-below'\" disableOptionCentering [disableOptionCentering]=\"true\"\n                        multiple> <!-- Added the multiple attribute here -->\n                            <!-- Search container -->\n                            <div class=\"search-container\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"$event.key === ' ' ? $event.stopPropagation() : null\" (click)=\"$event.stopPropagation()\"\n                                class=\"search-input\" #searchInput>\n                            </div>\n                            <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n                                {{organization.orgName}}\n                            </mat-option>\n                            <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n                                No data found\n                            </mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n                \n            </div>\n        </ng-container>\n    </div>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n      Cancel\n    </button>\n    <button \n      mat-stroked-button \n      class=\"btn-common btn-primary\" \n      [disabled]=\"!selectedOrgsControl.value?.length\" \n      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
@@ -9855,7 +9876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: TreeHierarchyService }]; } });
+                }] }, { type: TreeHierarchyService }, { type: FrameworkService }]; } });
 
 class CategoryEditModuleComponent {
     constructor(fb, dialogRef, data) {
@@ -9879,16 +9900,15 @@ class CategoryEditModuleComponent {
     saveCategoryName() {
         if (this.categoryForm.valid) {
             const updatedCategory = {
-                ...this.data.column,
-                config: {
-                    ...this.data.column.config,
-                    categoryDisplayName: this.categoryForm.get('categoryName')?.value || ''
-                }
+                formData: {
+                    categoryName: this.categoryForm.get('categoryName')?.value || '',
+                    categotyDescription: this.categoryForm.get('categoryDescription')?.value || ''
+                },
+                columnData: this.data.columnInfo
             };
             this.dialogRef.close({
                 updated: true,
-                column: updatedCategory,
-                index: this.data.index
+                column: updatedCategory
             });
         }
     }
@@ -11383,7 +11403,15 @@ class TreeViewComponent {
             position: { top: '50px' }
         });
         dialog.afterClosed().subscribe((res) => {
-            console.log('Category edit dialog closed', res);
+            if (res) {
+                const requestBody = {
+                    frameworkId: this.frameworkService.getFrameworkId(),
+                    categoryCode: res.column.columnData.code,
+                    categoryName: res.column.formData.categoryName,
+                    categoryDescription: res.column.formData.categotyDescription || ''
+                };
+                this.updateCategory(requestBody);
+            }
         });
     }
     getSelectedTermsAssociation(categoryCode) {
@@ -11434,6 +11462,30 @@ class TreeViewComponent {
         }
         return tempData;
     }
+    async updateCategory(event) {
+        const requestBody = {
+            request: {
+                category: {
+                    name: event.categoryName || '',
+                    description: event.categoryDescription || '',
+                }
+            }
+        };
+        const frameworkObj = {
+            id: event.frameworkId,
+            category: event.categoryCode
+        };
+        this.treeHierarchySvc.setLoaderState(true);
+        const updateCatRes = await this.treeHierarchySvc.updateCategory(requestBody, frameworkObj).toPromise().catch((_err) => {
+            this.treeHierarchySvc.setLoaderState(false);
+            if (_err && _err.error && _err.error.params && _err.error.params.errMsg) {
+                this._snackBar.open(`${_err.error.params.errMsg}`);
+            }
+        });
+        if (updateCatRes && updateCatRes.params && updateCatRes.params.status.toLowerCase() === 'successful') {
+            await this.publishFramework(frameworkObj);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, deps: [{ token: FrameworkService }, { token: LocalConnectionService }, { token: i1$3.MatLegacyDialog }, { token: ApprovalService }, { token: i5$2.MatLegacySnackBar }, { token: ConnectorService }, { token: i0.ChangeDetectorRef }, { token: TreeHierarchyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable", manageOrg: "manageOrg" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n    <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n        <mat-icon>{{app_strings.build}}</mat-icon>\n    </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n    <ng-container *ngFor=\"let column of list; let i = index;\">\n        <div class=\"flex-1 felx-col  col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n            <div class=\"category-heading-sticky\">\n                <div class=\"category-heading-container\">\n                    <div class='category-header'>\n                        <div class=\"category-header-items w-full flex padding-remove\" id=\"box{{i}}Header\">\n                            <span class=\"flex gap-1 mat-body-1\">\n                                <ng-container *ngIf=\"column?.config?.iconEnabled\">\n                                    <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n                                </ng-container>\n                                <!-- {{column.name}} -->\n                                {{column?.config?.categoryDisplayName || column.name }}\n                                <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n                                    <ng-container *ngIf=\"column.index !== 1\">\n                                        <span class=\"count\">({{getCount(column.code)}})</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"column?.config?.levelNameEdit\">\n                                    <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n                                        <mat-icon>edit</mat-icon>\n                                    </button>\n                            </ng-container>\n                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <!-- {{column.code}} -->\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n                    (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.edit-btn{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;position:relative}.edit-btn mat-icon{font-size:16px;position:absolute;top:50%;height:16px;left:50%;width:16px;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
 }