@sunbird-cb/tree-hierarchy 0.0.1-cbrelease-4.8.29 → 0.0.1-cbrelease-4.8.32

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

@@ -89,7 +89,8 @@ const API_ENDPOINT$1 = {
     PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`,
     RETIRE_TREM: `/apis/proxies/v8/framework/v1/term/retire`,
     UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`,
-    USERS_SEARCH: `apis/proxies/v8/user/v1/search`
+    USERS_SEARCH: `apis/proxies/v8/user/v1/search`,
+    ORG_CONTENT_UPDATE: `/apis/proxies/v8/org/ext/v2/update`
 };
 class TreeHierarchyService {
     constructor(http) {
@@ -118,6 +119,9 @@ class TreeHierarchyService {
     retireTerm(requestBody, frameworkObj) {
         return this.http.post(`${API_ENDPOINT$1.RETIRE_TREM}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
     }
+    orgContentUpdate(requestBody) {
+        return this.http.patch(`${API_ENDPOINT$1.ORG_CONTENT_UPDATE}`, requestBody);
+    }
     updateCategory(requestBody, frameworkObj) {
         return this.http.patch(`${API_ENDPOINT$1.UPDATE_CATEGORY}${frameworkObj.category}?framework=${frameworkObj.id}`, requestBody);
     }
@@ -7224,7 +7228,7 @@ class FrameworkService {
                 }));
             }), tap(async (response) => {
                 this.resetAll();
-                this.formateData(response, _childOrgData);
+                this.formateData(response, _orgData, _childOrgData);
                 this.completeResponse = response.result.framework;
             }), catchError((err) => {
                 this.resetAll();
@@ -7354,16 +7358,19 @@ class FrameworkService {
         }) || [];
         return filteredData;
     }
-    formateData(response, _childOrgData) {
+    formateData(response, _orgData, _childOrgData) {
         this.frameworkId = response.result.framework.code;
         let categories = response.result.framework.categories;
-        if (_childOrgData?.rootOrgId) {
+        if (_childOrgData?.id !== _orgData?.id) {
             categories = this.getOrgFromChildOnwards(categories || [], _childOrgData || '');
         }
+        if (categories?.length > 0) {
+            categories = ___default.sortBy(categories, 'index');
+        }
         response.result.framework.categories = categories;
         (categories).forEach((a, _idx) => {
             this.list.set(a.code, {
-                code: a.code,
+                code: a.code || '',
                 identifier: a.identifier,
                 index: (_idx + 1),
                 name: a.name,
@@ -7373,7 +7380,7 @@ class FrameworkService {
                 translations: a.translations,
                 category: a.category,
                 associations: a.associations,
-                config: this.getConfig(a.code),
+                config: this.getConfig(a.code, _childOrgData),
                 children: (a.terms || []).map((c) => {
                     const associations = c.associations || [];
                     const tempCount = this.getUserCount(c);
@@ -7427,7 +7434,7 @@ class FrameworkService {
     setConfig(config) {
         this.rootConfig = config;
     }
-    getConfig(code) {
+    getConfig(code, _childOrgData) {
         let categoryConfig;
         if (this.rootConfig && this.rootConfig[0]) {
             this.rootConfig.forEach((config) => {
@@ -7437,7 +7444,8 @@ class FrameworkService {
             });
         }
         if (!categoryConfig) {
-            return this.rootConfig.config[0];
+            const config = this.rootConfig.config[0];
+            return config;
         }
         return categoryConfig;
     }
@@ -7593,14 +7601,15 @@ class FrameworkService {
         }
     }
     getSelectedStateOrg(_orgData) {
+        debugger;
         const requestBody = {
             request: {
                 filters: {
                     status: 1,
                     ministryOrStateType: (_orgData) ?
                         _orgData.sbOrgType : '',
-                    ministryOrStateId: (_orgData) ?
-                        _orgData.identifier : ''
+                    ministryOrStateId: (_orgData?.identifier) ?
+                        _orgData?.identifier : (_orgData?.rootOrgId) ? _orgData.rootOrgId : ''
                 },
                 sort_by: {
                     createdDate: "desc"
@@ -7615,7 +7624,8 @@ class FrameworkService {
                     'ministryOrStateId',
                     'ministryOrStateType',
                     'ministryOrStateName',
-                    'sbOrgSubType'
+                    'sbOrgSubType',
+                    'rootOrgId'
                 ]
             }
         };
@@ -10064,11 +10074,11 @@ class OrgHierarchyAddModalComponent {
         this.parentFilteredOptions = this.frameworkData.categories.find((v) => v.code === item.category).terms;
     }
     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: FrameworkService }, { token: i3$1.MatLegacySnackBar }], 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            <ng-container *ngIf=\"data?.type === 'update' && i === (data?.previous?.length - 2)\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"sub-label\">Only the imported organisation will be listed.</label>\n              <div class=\"select-search-container\">\n                  <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                      <mat-select [formControl]=\"parentSelectedOrgControl\" placeholder=\"Select\" #parentSelect\n                        [panelClass]=\"'mat-select-panel-below'\" \n                        disableOptionCentering \n                        [disableOptionCentering]=\"true\"\n                        (keydown)=\"handleKeydown($event)\">\n                          <!-- Search container -->\n                          <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                              <input type=\"text\" [formControl]=\"parentSearchControl\" placeholder=\"Search...\"\n                              (keydown)=\"handleSearchKeydown($event)\"\n                              class=\"search-input\" #searchInput>\n                          </div>\n                          <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\" [value]=\"organization.code\">\n                              {{organization.name}}\n                          </mat-option>\n                          <mat-option *ngIf=\"parentFilteredOptions.length === 0\" disabled>\n                              No data found\n                          </mat-option>\n                      </mat-select>\n                  </mat-form-field>\n                  <div class=\"dashed-line\"></div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!(data?.type === 'update' && i === (data?.previous?.length - 2))\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n              <div class=\"dashed-line\"></div>\n            </ng-container>\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                <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\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'\" \n                          disableOptionCentering \n                          [disableOptionCentering]=\"true\"\n                          (keydown)=\"handleKeydown($event)\"\n                          multiple>\n                            <!-- Search container -->\n                            <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"handleSearchKeydown($event)\"\n                                class=\"search-input\" #searchInput>\n                                <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">add</mat-icon>\n                                </button>\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                    <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n                      <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n                        <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n                          {{getNameOfOrg(item)}}\n                          <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n                        </mat-chip>\n                      </mat-chip-list>\n                    </ng-container>\n                </div>\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      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .no-checkbox .mat-pseudo-checkbox{display:none!important}.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}.sub-label{font-weight:400;font-size:12px;color:#0009}.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}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\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$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7$2.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$2.MatLegacyChipRemove, selector: "[matChipRemove]" }, { 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"] }, { kind: "component", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
+    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            <ng-container *ngIf=\"data?.type === 'update' && i === (data?.previous?.length - 2)\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"sub-label\">Only the imported organisation will be listed.</label>\n              <div class=\"select-search-container\">\n                  <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                      <mat-select [formControl]=\"parentSelectedOrgControl\" placeholder=\"Select\" #parentSelect\n                        [panelClass]=\"'mat-select-panel-below'\" \n                        disableOptionCentering \n                        [disableOptionCentering]=\"true\"\n                        (keydown)=\"handleKeydown($event)\">\n                          <!-- Search container -->\n                          <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                              <input type=\"text\" [formControl]=\"parentSearchControl\" placeholder=\"Search...\"\n                              (keydown)=\"handleSearchKeydown($event)\"\n                              class=\"search-input\" #searchInput>\n                          </div>\n                          <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\" [value]=\"organization.code\">\n                              {{organization.name}}\n                          </mat-option>\n                          <mat-option *ngIf=\"parentFilteredOptions.length === 0\" disabled>\n                              No data found\n                          </mat-option>\n                      </mat-select>\n                  </mat-form-field>\n                  <div class=\"dashed-line\"></div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!(data?.type === 'update' && i === (data?.previous?.length - 2))\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n              <div class=\"dashed-line\"></div>\n            </ng-container>\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                <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\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'\" \n                          disableOptionCentering \n                          [disableOptionCentering]=\"true\"\n                          (keydown)=\"handleKeydown($event)\"\n                          multiple>\n                            <!-- Search container -->\n                            <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"handleSearchKeydown($event)\"\n                                class=\"search-input\" #searchInput>\n                                <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">add</mat-icon>\n                                </button>\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                    <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n                      <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n                        <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n                          {{getNameOfOrg(item)}}\n                          <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n                        </mat-chip>\n                      </mat-chip-list>\n                    </ng-container>\n                </div>\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      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .no-checkbox .mat-pseudo-checkbox{display:none!important}.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}.sub-label{font-weight:400;font-size:12px;color:#0009}.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;top:0}.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}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\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$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.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: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7$2.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$2.MatLegacyChipRemove, selector: "[matChipRemove]" }, { 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"] }, { kind: "component", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sb-cb-tree-org-hierarchy-add-modal', 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            <ng-container *ngIf=\"data?.type === 'update' && i === (data?.previous?.length - 2)\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"sub-label\">Only the imported organisation will be listed.</label>\n              <div class=\"select-search-container\">\n                  <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                      <mat-select [formControl]=\"parentSelectedOrgControl\" placeholder=\"Select\" #parentSelect\n                        [panelClass]=\"'mat-select-panel-below'\" \n                        disableOptionCentering \n                        [disableOptionCentering]=\"true\"\n                        (keydown)=\"handleKeydown($event)\">\n                          <!-- Search container -->\n                          <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                              <input type=\"text\" [formControl]=\"parentSearchControl\" placeholder=\"Search...\"\n                              (keydown)=\"handleSearchKeydown($event)\"\n                              class=\"search-input\" #searchInput>\n                          </div>\n                          <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\" [value]=\"organization.code\">\n                              {{organization.name}}\n                          </mat-option>\n                          <mat-option *ngIf=\"parentFilteredOptions.length === 0\" disabled>\n                              No data found\n                          </mat-option>\n                      </mat-select>\n                  </mat-form-field>\n                  <div class=\"dashed-line\"></div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!(data?.type === 'update' && i === (data?.previous?.length - 2))\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n              <div class=\"dashed-line\"></div>\n            </ng-container>\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                <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\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'\" \n                          disableOptionCentering \n                          [disableOptionCentering]=\"true\"\n                          (keydown)=\"handleKeydown($event)\"\n                          multiple>\n                            <!-- Search container -->\n                            <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"handleSearchKeydown($event)\"\n                                class=\"search-input\" #searchInput>\n                                <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">add</mat-icon>\n                                </button>\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                    <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n                      <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n                        <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n                          {{getNameOfOrg(item)}}\n                          <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n                        </mat-chip>\n                      </mat-chip-list>\n                    </ng-container>\n                </div>\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      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .no-checkbox .mat-pseudo-checkbox{display:none!important}.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}.sub-label{font-weight:400;font-size:12px;color:#0009}.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}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\n"] }]
+            args: [{ selector: 'sb-cb-tree-org-hierarchy-add-modal', 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            <ng-container *ngIf=\"data?.type === 'update' && i === (data?.previous?.length - 2)\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"sub-label\">Only the imported organisation will be listed.</label>\n              <div class=\"select-search-container\">\n                  <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                      <mat-select [formControl]=\"parentSelectedOrgControl\" placeholder=\"Select\" #parentSelect\n                        [panelClass]=\"'mat-select-panel-below'\" \n                        disableOptionCentering \n                        [disableOptionCentering]=\"true\"\n                        (keydown)=\"handleKeydown($event)\">\n                          <!-- Search container -->\n                          <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                              <input type=\"text\" [formControl]=\"parentSearchControl\" placeholder=\"Search...\"\n                              (keydown)=\"handleSearchKeydown($event)\"\n                              class=\"search-input\" #searchInput>\n                          </div>\n                          <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\" [value]=\"organization.code\">\n                              {{organization.name}}\n                          </mat-option>\n                          <mat-option *ngIf=\"parentFilteredOptions.length === 0\" disabled>\n                              No data found\n                          </mat-option>\n                      </mat-select>\n                  </mat-form-field>\n                  <div class=\"dashed-line\"></div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!(data?.type === 'update' && i === (data?.previous?.length - 2))\">\n              <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n              <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n              <div class=\"dashed-line\"></div>\n            </ng-container>\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                <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\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'\" \n                          disableOptionCentering \n                          [disableOptionCentering]=\"true\"\n                          (keydown)=\"handleKeydown($event)\"\n                          multiple>\n                            <!-- Search container -->\n                            <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"handleSearchKeydown($event)\"\n                                class=\"search-input\" #searchInput>\n                                <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">add</mat-icon>\n                                </button>\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                    <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n                      <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n                        <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n                          {{getNameOfOrg(item)}}\n                          <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n                        </mat-chip>\n                      </mat-chip-list>\n                    </ng-container>\n                </div>\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      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .no-checkbox .mat-pseudo-checkbox{display:none!important}.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}.sub-label{font-weight:400;font-size:12px;color:#0009}.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;top:0}.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}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
@@ -10706,16 +10716,18 @@ class TermCardComponent {
         this.dialog.closeAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, deps: [{ token: FrameworkService }, { token: LocalConnectionService }, { token: ApprovalService }, { token: i1$3.MatLegacyDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermCardComponent, selector: "lib-term-card", inputs: { enableThreeDots: "enableThreeDots", data: "data" }, outputs: { isSelected: "isSelected", selectedCard: "selectedCard", cardAction: "cardAction" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n    <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n    <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n    <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n        [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n    data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n        id=\"{{data.children.name}}\"\n        [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n        <!-- (click)=\"data.selected=!data.selected\" -->   \n        <div class=\"term-card-parent\">\n            <!-- <Below element is to show id on top left of the card> -->\n            <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n             \n            <div class=\"term-card-content w-full\">\n                <!-- <ng-container  *ngIf=\"data?.children?.refId\">\n                    <div class=\"ribbon\">{{data?.children?.refId}}</div>\n                </ng-container> -->\n\n                <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n                    <div  class=\"mb-2\">\n                        <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n                     </div>\n                 </ng-container>\n                <div class=\"flex flex-between flex-middle\">\n                    <div class=\"card-title\">{{data.children.name}}\n                        <ng-container *ngIf=\"data?.children?.refId\">\n                            <div class=\"refIdCard mt-2\">\n                                <span>{{data?.children?.refId}} </span>\n                            </div>\n                        </ng-container> \n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn small-btn\" (click)=\"openDialog()\">\n                            <mat-icon class=\"small-icon\">info</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n                <!-- <ng-container *ngIf=\"data?.children?.refId\">\n                    <div class=\"refIdCard px-4\">\n                        <span>{{data?.children?.refId}} </span>\n                    </div>\n                </ng-container> -->\n                <!-- <span>++{{data.children.selected}}+++</span>\n                <span>=={{data.children.status}}==</span>  -->\n                <div class=\"flex gap-3 flex-middle mt-4\">\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                    <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n                    </div>\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                        <span>{{getuserCount(data)}} Users</span>\n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot && enableThreeDots\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n                        [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn small-btn ml-auto\">\n                        <mat-icon class=\"small-icon\">more_vert</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n        <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n        <!-- (click)=\"$event.stopPropagation();\" -->\n        <!-- <div class=\"term-card-checkbox\">\n            <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n            data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n            data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n                (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n            <mat-icon color=\"primary\" class=\"approve-flag\"\n                *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n        </div> -->\n    </div>\n</ng-template>\n\n<ng-template #cardStandard>\n    <div>\n        {{data.children.name}} \n    </div>\n    <div>\n        {{data.children.description}} s\n    </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n    <div>\n        {{data.children.name}}\n    </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <!-- <div > -->\n        <button *ngIf=\"data.columnInfo.config.enableView\"  (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>visibility</mat-icon> <span>View</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data,  data.children,data.index, cardRef)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon>\n            <span>Edit</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>add</mat-icon>\n            <span>Add</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\"  (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>close</mat-icon>\n            <span>Remove Connection</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>settings</mat-icon>\n            <span>Manage Organisation</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n  <div class=\"flex flex-col flex-middle\">\n    <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n    <p class=\"color-primary modal-text margin-top-s\">Select a organisation to {{enableThreeDots ? 'add or ' : ''}}see further connections.</p>\n    <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n  </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{font-family:Lato;font-size:14px;font-weight:400;line-height:16px}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}.small-btn{width:16px!important;height:16px!important;line-height:16px!important;padding:0!important}.small-btn ::ng-deep .mat-mdc-button-touch-target{width:16px!important;height:16px!important}.small-icon{font-size:16px;width:16px;height:16px;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.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: i6.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: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermCardComponent, selector: "lib-term-card", inputs: { enableThreeDots: "enableThreeDots", checkIfChildOrg: "checkIfChildOrg", data: "data" }, outputs: { isSelected: "isSelected", selectedCard: "selectedCard", cardAction: "cardAction" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n    <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n    <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n    <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n        [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n    data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n        id=\"{{data.children.name}}\"\n        [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n        <!-- (click)=\"data.selected=!data.selected\" -->   \n        <div class=\"term-card-parent\">\n            <!-- <Below element is to show id on top left of the card> -->\n            <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n             \n            <div class=\"term-card-content w-full\">\n                <!-- <ng-container  *ngIf=\"data?.children?.refId\">\n                    <div class=\"ribbon\">{{data?.children?.refId}}</div>\n                </ng-container> -->\n\n                <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n                    <div  class=\"mb-2\">\n                        <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n                     </div>\n                 </ng-container>\n                <div class=\"flex flex-between flex-middle\">\n                    <div class=\"card-title\">{{data.children.name}}\n                        <ng-container *ngIf=\"data?.children?.refId\">\n                            <div class=\"refIdCard mt-2\">\n                                <span>{{data?.children?.refId}} </span>\n                            </div>\n                        </ng-container> \n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn small-btn\" (click)=\"openDialog()\">\n                            <mat-icon class=\"small-icon\">info</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n                <!-- <ng-container *ngIf=\"data?.children?.refId\">\n                    <div class=\"refIdCard px-4\">\n                        <span>{{data?.children?.refId}} </span>\n                    </div>\n                </ng-container> -->\n                <!-- <span>++{{data.children.selected}}+++</span>\n                <span>=={{data.children.status}}==</span>  -->\n                <div class=\"flex gap-3 flex-middle mt-4\">\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                    <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n                    </div>\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                        <span>{{getuserCount(data)}} Users</span>\n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot && enableThreeDots\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n                        [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn small-btn ml-auto\">\n                        <mat-icon class=\"small-icon\">more_vert</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n        <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n        <!-- (click)=\"$event.stopPropagation();\" -->\n        <!-- <div class=\"term-card-checkbox\">\n            <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n            data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n            data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n                (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n            <mat-icon color=\"primary\" class=\"approve-flag\"\n                *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n        </div> -->\n    </div>\n</ng-template>\n\n<ng-template #cardStandard>\n    <div>\n        {{data.children.name}} \n    </div>\n    <div>\n        {{data.children.description}} s\n    </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n    <div>\n        {{data.children.name}}\n    </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <!-- <div > -->\n        <button *ngIf=\"data.columnInfo.config.enableView\"  (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>visibility</mat-icon> <span>View</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data,  data.children,data.index, cardRef)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon>\n            <span>Edit</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>add</mat-icon>\n            <span>Add</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\"  (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection && !checkIfChildOrg\" (click)=\"menuAction('remove-term', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>close</mat-icon>\n            <span>Remove Connection</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>settings</mat-icon>\n            <span>Manage Organisation</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n  <div class=\"flex flex-col flex-middle\">\n    <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n    <p class=\"color-primary modal-text margin-top-s\">Select a organisation to {{enableThreeDots ? 'add or ' : ''}}see further connections.</p>\n    <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n  </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{font-family:Lato;font-size:14px;font-weight:400;line-height:16px}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}.small-btn{width:16px!important;height:16px!important;line-height:16px!important;padding:0!important}.small-btn ::ng-deep .mat-mdc-button-touch-target{width:16px!important;height:16px!important}.small-icon{font-size:16px;width:16px;height:16px;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.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: i6.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: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-term-card', template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n    <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n    <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n    <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n        [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n    data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n        id=\"{{data.children.name}}\"\n        [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n        <!-- (click)=\"data.selected=!data.selected\" -->   \n        <div class=\"term-card-parent\">\n            <!-- <Below element is to show id on top left of the card> -->\n            <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n             \n            <div class=\"term-card-content w-full\">\n                <!-- <ng-container  *ngIf=\"data?.children?.refId\">\n                    <div class=\"ribbon\">{{data?.children?.refId}}</div>\n                </ng-container> -->\n\n                <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n                    <div  class=\"mb-2\">\n                        <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n                     </div>\n                 </ng-container>\n                <div class=\"flex flex-between flex-middle\">\n                    <div class=\"card-title\">{{data.children.name}}\n                        <ng-container *ngIf=\"data?.children?.refId\">\n                            <div class=\"refIdCard mt-2\">\n                                <span>{{data?.children?.refId}} </span>\n                            </div>\n                        </ng-container> \n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn small-btn\" (click)=\"openDialog()\">\n                            <mat-icon class=\"small-icon\">info</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n                <!-- <ng-container *ngIf=\"data?.children?.refId\">\n                    <div class=\"refIdCard px-4\">\n                        <span>{{data?.children?.refId}} </span>\n                    </div>\n                </ng-container> -->\n                <!-- <span>++{{data.children.selected}}+++</span>\n                <span>=={{data.children.status}}==</span>  -->\n                <div class=\"flex gap-3 flex-middle mt-4\">\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                    <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n                    </div>\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                        <span>{{getuserCount(data)}} Users</span>\n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot && enableThreeDots\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n                        [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn small-btn ml-auto\">\n                        <mat-icon class=\"small-icon\">more_vert</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n        <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n        <!-- (click)=\"$event.stopPropagation();\" -->\n        <!-- <div class=\"term-card-checkbox\">\n            <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n            data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n            data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n                (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n            <mat-icon color=\"primary\" class=\"approve-flag\"\n                *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n        </div> -->\n    </div>\n</ng-template>\n\n<ng-template #cardStandard>\n    <div>\n        {{data.children.name}} \n    </div>\n    <div>\n        {{data.children.description}} s\n    </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n    <div>\n        {{data.children.name}}\n    </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <!-- <div > -->\n        <button *ngIf=\"data.columnInfo.config.enableView\"  (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>visibility</mat-icon> <span>View</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data,  data.children,data.index, cardRef)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon>\n            <span>Edit</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>add</mat-icon>\n            <span>Add</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\"  (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>close</mat-icon>\n            <span>Remove Connection</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>settings</mat-icon>\n            <span>Manage Organisation</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n  <div class=\"flex flex-col flex-middle\">\n    <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n    <p class=\"color-primary modal-text margin-top-s\">Select a organisation to {{enableThreeDots ? 'add or ' : ''}}see further connections.</p>\n    <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n  </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{font-family:Lato;font-size:14px;font-weight:400;line-height:16px}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}.small-btn{width:16px!important;height:16px!important;line-height:16px!important;padding:0!important}.small-btn ::ng-deep .mat-mdc-button-touch-target{width:16px!important;height:16px!important}.small-icon{font-size:16px;width:16px;height:16px;line-height:16px}\n"] }]
+            args: [{ selector: 'lib-term-card', template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n    <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n    <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n    <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n        [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n    data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n        id=\"{{data.children.name}}\"\n        [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n        <!-- (click)=\"data.selected=!data.selected\" -->   \n        <div class=\"term-card-parent\">\n            <!-- <Below element is to show id on top left of the card> -->\n            <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n             \n            <div class=\"term-card-content w-full\">\n                <!-- <ng-container  *ngIf=\"data?.children?.refId\">\n                    <div class=\"ribbon\">{{data?.children?.refId}}</div>\n                </ng-container> -->\n\n                <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n                    <div  class=\"mb-2\">\n                        <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n                     </div>\n                 </ng-container>\n                <div class=\"flex flex-between flex-middle\">\n                    <div class=\"card-title\">{{data.children.name}}\n                        <ng-container *ngIf=\"data?.children?.refId\">\n                            <div class=\"refIdCard mt-2\">\n                                <span>{{data?.children?.refId}} </span>\n                            </div>\n                        </ng-container> \n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn small-btn\" (click)=\"openDialog()\">\n                            <mat-icon class=\"small-icon\">info</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n                <!-- <ng-container *ngIf=\"data?.children?.refId\">\n                    <div class=\"refIdCard px-4\">\n                        <span>{{data?.children?.refId}} </span>\n                    </div>\n                </ng-container> -->\n                <!-- <span>++{{data.children.selected}}+++</span>\n                <span>=={{data.children.status}}==</span>  -->\n                <div class=\"flex gap-3 flex-middle mt-4\">\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                    <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n                    </div>\n                    <div class=\"card-description flex flex-middle gap-1\">\n                        <mat-icon svgIcon=\"frac\"></mat-icon> \n                        <span>{{getuserCount(data)}} Users</span>\n                    </div>\n                    <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot && enableThreeDots\" >\n                        <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n                        [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn small-btn ml-auto\">\n                        <mat-icon class=\"small-icon\">more_vert</mat-icon>\n                        </button>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n        <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n        <!-- (click)=\"$event.stopPropagation();\" -->\n        <!-- <div class=\"term-card-checkbox\">\n            <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n            data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n            data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n                (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n            <mat-icon color=\"primary\" class=\"approve-flag\"\n                *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n        </div> -->\n    </div>\n</ng-template>\n\n<ng-template #cardStandard>\n    <div>\n        {{data.children.name}} \n    </div>\n    <div>\n        {{data.children.description}} s\n    </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n    <div>\n        {{data.children.name}}\n    </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <!-- <div > -->\n        <button *ngIf=\"data.columnInfo.config.enableView\"  (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>visibility</mat-icon> <span>View</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data,  data.children,data.index, cardRef)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon>\n            <span>Edit</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>add</mat-icon>\n            <span>Add</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>delete</mat-icon>\n            <span>Delete</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\"  (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n            <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection && !checkIfChildOrg\" (click)=\"menuAction('remove-term', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>close</mat-icon>\n            <span>Remove Connection</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n            mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n            aria-label=\"Analytics\">\n            <mat-icon>settings</mat-icon>\n            <span>Manage Organisation</span>\n        </button>\n    </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n  <div class=\"flex flex-col flex-middle\">\n    <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n    <p class=\"color-primary modal-text margin-top-s\">Select a organisation to {{enableThreeDots ? 'add or ' : ''}}see further connections.</p>\n    <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n  </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{font-family:Lato;font-size:14px;font-weight:400;line-height:16px}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}.small-btn{width:16px!important;height:16px!important;line-height:16px!important;padding:0!important}.small-btn ::ng-deep .mat-mdc-button-touch-target{width:16px!important;height:16px!important}.small-icon{font-size:16px;width:16px;height:16px;line-height:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { dialogTemplate: [{
                 type: ViewChild,
                 args: ['dialogTemplate']
             }], enableThreeDots: [{
                 type: Input
+            }], checkIfChildOrg: [{
+                type: Input
             }], data: [{
                 type: Input
             }], isSelected: [{
@@ -11047,17 +11059,19 @@ class TreeColumnViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, deps: [{ token: FrameworkService }, { token: ConnectorService }, { token: ApprovalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: { column: "column", containerId: "containerId", isChildOrg: "isChildOrg" }, outputs: { updateTaxonomyTerm: "updateTaxonomyTerm", updateTermList: "updateTermList", cardsCount: "cardsCount", cardAction: "cardAction" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-5\">\n            <div class=\"rsearch\">\n                <div class=\"sinput mat-field-rounded flex flex-middle\">\n                    <mat-icon class=\"search-icon\">search</mat-icon>\n                    <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n                    <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n                        <mat-icon>clear</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n    <ng-container *ngFor=\"let child of columnItems; let j = index\">\n        <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n            <lib-term-card\n                [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n                [enableThreeDots]=\"isChildOrg ? false : true\"\n                (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n            </lib-term-card>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #noDataTemplate >\n    <ng-container *ngIf=\"searchValue?.value\">\n    <div>No Data found</div>\n    </ng-container>\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n    <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n    [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.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:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\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: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }, { kind: "component", type: TermCardComponent, selector: "lib-term-card", inputs: ["enableThreeDots", "data"], outputs: ["isSelected", "selectedCard", "cardAction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: { column: "column", containerId: "containerId", isChildOrg: "isChildOrg", childOrg: "childOrg" }, outputs: { updateTaxonomyTerm: "updateTaxonomyTerm", updateTermList: "updateTermList", cardsCount: "cardsCount", cardAction: "cardAction" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-5\">\n            <div class=\"rsearch\">\n                <div class=\"sinput mat-field-rounded flex flex-middle\">\n                    <mat-icon class=\"search-icon\">search</mat-icon>\n                    <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n                    <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n                        <mat-icon>clear</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n    <ng-container *ngFor=\"let child of columnItems; let j = index\">\n        <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n            <lib-term-card\n                [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n                [enableThreeDots]=\"(isChildOrg && childOrg.channel === child.name) ? true : (isChildOrg) ? false : true\"\n                [checkIfChildOrg]=\"isChildOrg\"\n                (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n            </lib-term-card>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #noDataTemplate >\n    <ng-container *ngIf=\"searchValue?.value\">\n    <div>No Data found</div>\n    </ng-container>\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n    <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n    [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.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:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\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: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }, { kind: "component", type: TermCardComponent, selector: "lib-term-card", inputs: ["enableThreeDots", "checkIfChildOrg", "data"], outputs: ["isSelected", "selectedCard", "cardAction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-5\">\n            <div class=\"rsearch\">\n                <div class=\"sinput mat-field-rounded flex flex-middle\">\n                    <mat-icon class=\"search-icon\">search</mat-icon>\n                    <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n                    <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n                        <mat-icon>clear</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n    <ng-container *ngFor=\"let child of columnItems; let j = index\">\n        <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n            <lib-term-card\n                [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n                [enableThreeDots]=\"isChildOrg ? false : true\"\n                (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n            </lib-term-card>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #noDataTemplate >\n    <ng-container *ngIf=\"searchValue?.value\">\n    <div>No Data found</div>\n    </ng-container>\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n    <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n    [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.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:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\n"] }]
+            args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-5\">\n            <div class=\"rsearch\">\n                <div class=\"sinput mat-field-rounded flex flex-middle\">\n                    <mat-icon class=\"search-icon\">search</mat-icon>\n                    <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n                    <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n                        <mat-icon>clear</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n    <ng-container *ngFor=\"let child of columnItems; let j = index\">\n        <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n            <lib-term-card\n                [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n                [enableThreeDots]=\"(isChildOrg && childOrg.channel === child.name) ? true : (isChildOrg) ? false : true\"\n                [checkIfChildOrg]=\"isChildOrg\"\n                (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n            </lib-term-card>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #noDataTemplate >\n    <ng-container *ngIf=\"searchValue?.value\">\n    <div>No Data found</div>\n    </ng-container>\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n    <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n    [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.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:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: FrameworkService }, { type: ConnectorService }, { type: ApprovalService }]; }, propDecorators: { column: [{
                 type: Input
             }], containerId: [{
                 type: Input
             }], isChildOrg: [{
                 type: Input
+            }], childOrg: [{
+                type: Input
             }], updateTaxonomyTerm: [{
                 type: Output
             }], updateTermList: [{
@@ -11664,6 +11678,39 @@ class TreeViewComponent {
                 this._snackBar.open(`Failed to remove connection.`, 'cancel');
             });
             if (retireRes && retireRes.params && retireRes.params.status?.toLowerCase() === 'successful') {
+                let orgId = null;
+                const findOrgId = (children, targetCode) => {
+                    for (const child of children) {
+                        if (child?.code === targetCode) {
+                            return child?.additionalProperties?.orgId || null;
+                        }
+                        if (child?.children && child?.children?.length > 0) {
+                            const found = findOrgId(child?.children, targetCode);
+                            if (found)
+                                return found;
+                        }
+                    }
+                    return null;
+                };
+                if (ele.ids && ele.ids.length > 0) {
+                    const completeData = ___default.cloneDeep(this.frameworkService?.completeResponse);
+                    if (completeData && completeData?.categories) {
+                        for (const category of completeData?.categories) {
+                            if (category?.terms) {
+                                orgId = findOrgId(category?.terms, ele?.ids[0]);
+                                if (orgId)
+                                    break;
+                            }
+                        }
+                    }
+                }
+                const orgUpdateBody = {
+                    orgId: orgId,
+                    parentPathId: ""
+                };
+                await this.treeHierarchySvc.orgContentUpdate(orgUpdateBody).toPromise().catch((_err) => {
+                    console.log('Error in org content update', _err);
+                });
                 count += 1;
             }
             else {
@@ -11840,14 +11887,14 @@ class TreeViewComponent {
         });
     }
     checkChildOrg() {
-        return (this.childOrgData?.rootOrgId) ? true : false;
+        return (this.childOrgData?.rootOrgId !== this.orgSelectedData?.id || this.userRolesData?.has('mdo_admin')) ? true : false;
     }
     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: i3$1.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", childOrgData: "childOrgData" }, 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 flex-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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i, 'add')\" 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            <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)\" [isChildOrg]=\"checkChildOrg()\" (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) && !checkChildOrg()\">\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, 'add')\" 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{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.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:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;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: i6.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: i6.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", "isChildOrg"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
+    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", childOrgData: "childOrgData", userRolesData: "userRolesData" }, 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 flex-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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i, 'add')\" 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            <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)\" [childOrg]=\"childOrgData\" [isChildOrg]=\"checkChildOrg()\" (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) && !checkChildOrg()\">\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, 'add')\" 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{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.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:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;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: i6.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: i6.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", "isChildOrg", "childOrg"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tree-view', 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 flex-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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i, 'add')\" 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            <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)\" [isChildOrg]=\"checkChildOrg()\" (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) && !checkChildOrg()\">\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, 'add')\" 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{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.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:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;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"] }]
+            args: [{ selector: 'lib-tree-view', 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 flex-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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\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 && !checkChildOrg()\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i, 'add')\" 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            <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)\" [childOrg]=\"childOrgData\" [isChildOrg]=\"checkChildOrg()\" (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) && !checkChildOrg()\">\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, 'add')\" 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{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.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:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;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"] }]
         }], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: i1$3.MatLegacyDialog }, { type: ApprovalService }, { type: i3$1.MatLegacySnackBar }, { type: ConnectorService }, { type: i0.ChangeDetectorRef }, { type: TreeHierarchyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { approvalList: [{
                 type: Input
             }], isApprovalView: [{
@@ -11862,6 +11909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], childOrgData: [{
                 type: Input
+            }], userRolesData: [{
+                type: Input
             }], sentForApprove: [{
                 type: Output
             }], loaderEnable: [{
@@ -11917,7 +11966,7 @@ class ApproveViewComponent {
         this.frameworkService.removeOldLine();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ApprovalService }, { token: FrameworkService }, { token: i3$1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApproveViewComponent, selector: "lib-approve-view", ngImport: i0, template: "<!-- <div class=\"approve-view__container\" *ngIf=\"listItems && listItems.length > 0 \">\n        <ng-container *ngFor=\"let column of categories let i = index;\">\n            <div class=\"approve-view__columns\">\n                   <h4 class=\"approve-view__columns-title\">{{column}}</h4> \n                <section>\n                    <ng-container *ngFor=\"let term of listItems\">\n                        <div *ngIf=\"column === term.category\" >\n                            <lib-term-card\n                                [data]=\"{'children': term, 'selected' : false, 'category':column, cardSubType: 'minimal', isViewOnly:true}\">\n                            </lib-term-card>\n                        </div>\n                        \n                    </ng-container>\n                </section>\n            </div>\n        </ng-container>\n        <lib-action-bar *ngIf=\"showAction\" [configType]=\"workflowDetails.currentStatus\" [actionType]=\"'approve'\" (sendApproval)=\"approvalRequest()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar> \n</div> -->\n<ng-container *ngIf=\"listItems\">\n    <lib-tree-view \n        [isApprovalView]=\"true\" \n        [approvalList]=\"listItems\" \n        [workFlowStatus]=\"workflowDetails?.currentStatus\"\n        (sentForApprove)=\"approvalRequest($event)\">\n    </lib-tree-view>\n</ng-container>\n", styles: [".approve-view__container{display:flex;justify-content:center;flex-direction:row}.approve-view__columns{flex:1;padding:30px}.approve-view__columns-title{text-transform:capitalize;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeViewComponent, selector: "lib-tree-view", inputs: ["approvalList", "isApprovalView", "workFlowStatus", "environment", "taxonomyConfig", "orgSelectedData", "childOrgData"], outputs: ["sentForApprove", "loaderEnable", "manageOrg"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApproveViewComponent, selector: "lib-approve-view", ngImport: i0, template: "<!-- <div class=\"approve-view__container\" *ngIf=\"listItems && listItems.length > 0 \">\n        <ng-container *ngFor=\"let column of categories let i = index;\">\n            <div class=\"approve-view__columns\">\n                   <h4 class=\"approve-view__columns-title\">{{column}}</h4> \n                <section>\n                    <ng-container *ngFor=\"let term of listItems\">\n                        <div *ngIf=\"column === term.category\" >\n                            <lib-term-card\n                                [data]=\"{'children': term, 'selected' : false, 'category':column, cardSubType: 'minimal', isViewOnly:true}\">\n                            </lib-term-card>\n                        </div>\n                        \n                    </ng-container>\n                </section>\n            </div>\n        </ng-container>\n        <lib-action-bar *ngIf=\"showAction\" [configType]=\"workflowDetails.currentStatus\" [actionType]=\"'approve'\" (sendApproval)=\"approvalRequest()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar> \n</div> -->\n<ng-container *ngIf=\"listItems\">\n    <lib-tree-view \n        [isApprovalView]=\"true\" \n        [approvalList]=\"listItems\" \n        [workFlowStatus]=\"workflowDetails?.currentStatus\"\n        (sentForApprove)=\"approvalRequest($event)\">\n    </lib-tree-view>\n</ng-container>\n", styles: [".approve-view__container{display:flex;justify-content:center;flex-direction:row}.approve-view__columns{flex:1;padding:30px}.approve-view__columns-title{text-transform:capitalize;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeViewComponent, selector: "lib-tree-view", inputs: ["approvalList", "isApprovalView", "workFlowStatus", "environment", "taxonomyConfig", "orgSelectedData", "childOrgData", "userRolesData"], outputs: ["sentForApprove", "loaderEnable", "manageOrg"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, decorators: [{
             type: Component,