@sunbird-cb/tree-hierarchy 0.0.1-cbrelease-4.8.29 → 0.0.2-ang-17-20

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, NgModule, EventEmitter, Output, Pipe, ViewEncapsulation, Inject, ViewChild, InjectionToken } from '@angular/core';
+import { Injectable, Input, Component, NgModule, EventEmitter, Output, Pipe, ViewEncapsulation, Inject, ViewChild, InjectionToken } from '@angular/core';
 import { BehaviorSubject, of, Subject } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
@@ -29,36 +29,36 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7$2 from '@angular/material/legacy-chips';
-import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
+import * as i8 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i10 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
+import * as i1$3 from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i11 from '@angular/material/expansion';
+import * as i9 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6$3 from '@angular/material/input';
+import * as i6$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
-import * as i14 from '@angular/material/menu';
+import * as i12$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i6$2 from '@angular/material/core';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i16 from '@angular/material/progress-spinner';
+import * as i13 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i17 from '@angular/material/radio';
+import * as i14 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i17$1 from '@angular/material/select';
+import * as i15 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i3$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -69,16 +69,10 @@ import * as i6$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i7$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import * as i3 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, Validators, FormControl, UntypedFormControl } from '@angular/forms';
-import * as i3$1 from '@angular/material/legacy-snack-bar';
-import * as i1$3 from '@angular/material/legacy-dialog';
-import { MAT_LEGACY_DIALOG_DATA } from '@angular/material/legacy-dialog';
-import * as i15 from '@angular/cdk/text-field';
-import * as i18 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
+import * as i12 from '@angular/cdk/text-field';
 import * as d3 from 'd3';
 
 const API_ENDPOINT$1 = {
@@ -89,7 +83,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,21 +113,24 @@ 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);
     }
     getUsersSearch(requestBody) {
         return this.http.post(`${API_ENDPOINT$1.USERS_SEARCH}`, requestBody);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 const FRAMEWORK = {
     id: "api.framework.read",
@@ -7169,16 +7167,18 @@ class LocalConnectionService {
     getConfigInfo() {
         return this._vars.data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalConnectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalConnectionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocalConnectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocalConnectionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalConnectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LocalConnectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
+// import { TreeHierarchyService } from '../tree-hierarchy.service';
+/* tslint:enable */
 const API_ENDPOINT = {
     ORG_V1_SEARCH: '/apis/proxies/v8/org/v1/search',
     CREATE_TERMS: `/apis/proxies/v8/action/framework/v3/term/create`,
@@ -7224,7 +7224,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();
@@ -7312,12 +7312,16 @@ class FrameworkService {
         })) === (this.categoriesHash.value.length - 1);
     }
     removeItemFromArray(array, item) {
+        /* assign a empty array */
         var tmp = [];
+        /* loop over all array items */
         for (var index in array) {
             if (array[index] !== item) {
+                /* push to temporary array if not like item */
                 tmp.push(array[index]);
             }
         }
+        /* return the temporary array */
         return tmp;
     }
     set setTerm(res) {
@@ -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;
     }
@@ -7599,8 +7607,8 @@ class FrameworkService {
                     status: 1,
                     ministryOrStateType: (_orgData) ?
                         _orgData.sbOrgType : '',
-                    ministryOrStateId: (_orgData) ?
-                        _orgData.identifier : ''
+                    ministryOrStateId: (_orgData?.identifier) ?
+                        _orgData?.identifier : (_orgData?.rootOrgId) ? _orgData.rootOrgId : ''
                 },
                 sort_by: {
                     createdDate: "desc"
@@ -7615,12 +7623,14 @@ class FrameworkService {
                     'ministryOrStateId',
                     'ministryOrStateType',
                     'ministryOrStateName',
-                    'sbOrgSubType'
+                    'sbOrgSubType',
+                    'rootOrgId'
                 ]
             }
         };
         return this.http.post(`${API_ENDPOINT.ORG_V1_SEARCH}`, requestBody).pipe(catchError(error => {
             console.error('Error fetching Org data:', error);
+            // Return empty data to continue the chain even if this API fails
             return of({});
         }));
     }
@@ -7685,15 +7695,15 @@ class FrameworkService {
         }
         return 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrameworkService, deps: [{ token: i1.HttpClient }, { token: LocalConnectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrameworkService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrameworkService, deps: [{ token: i1.HttpClient }, { token: LocalConnectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrameworkService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrameworkService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrameworkService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: LocalConnectionService }]; } });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: LocalConnectionService }] });
 
 class TreeHierarchyComponent {
     constructor(frameworkService) {
@@ -7703,21 +7713,23 @@ class TreeHierarchyComponent {
         this.frameworkService.updateEnvironment(this.environment);
         this.frameworkService.setConfig(this.taxonomyConfig);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyComponent, deps: [{ token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeHierarchyComponent, selector: "d-v2-tree-hierarchy", inputs: { environment: "environment", taxonomyConfig: "taxonomyConfig" }, ngImport: i0, template: "<router-outlet></router-outlet>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyComponent, deps: [{ token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TreeHierarchyComponent, isStandalone: false, selector: "d-v2-tree-hierarchy", inputs: { environment: "environment", taxonomyConfig: "taxonomyConfig" }, ngImport: i0, template: "<router-outlet></router-outlet>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'd-v2-tree-hierarchy', template: "<router-outlet></router-outlet>" }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }]; }, propDecorators: { environment: [{
+            args: [{ selector: 'd-v2-tree-hierarchy', standalone: false, template: "<router-outlet></router-outlet>" }]
+        }], ctorParameters: () => [{ type: FrameworkService }], propDecorators: { environment: [{
                 type: Input
             }], taxonomyConfig: [{
                 type: Input
             }] } });
 
 class MaterialModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MaterialModule, exports: [A11yModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MaterialModule, exports: [A11yModule,
+            HttpClientModule,
+            // ClipboardModule,
             CdkStepperModule,
             CdkTableModule,
             CdkTreeModule,
@@ -7729,7 +7741,7 @@ class MaterialModule {
             MatButtonToggleModule,
             MatCardModule,
             MatCheckboxModule,
-            MatLegacyChipsModule,
+            MatChipsModule,
             MatStepperModule,
             MatDatepickerModule,
             MatDialogModule,
@@ -7764,7 +7776,9 @@ class MaterialModule {
             ReactiveFormsModule,
             FormsModule,
             HttpClientModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialModule, imports: [A11yModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaterialModule, imports: [A11yModule,
+            HttpClientModule,
+            // ClipboardModule,
             CdkStepperModule,
             CdkTableModule,
             CdkTreeModule,
@@ -7776,7 +7790,7 @@ class MaterialModule {
             MatButtonToggleModule,
             MatCardModule,
             MatCheckboxModule,
-            MatLegacyChipsModule,
+            MatChipsModule,
             MatStepperModule,
             MatDatepickerModule,
             MatDialogModule,
@@ -7812,11 +7826,13 @@ class MaterialModule {
             FormsModule,
             HttpClientModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
                         A11yModule,
+                        HttpClientModule,
+                        // ClipboardModule,
                         CdkStepperModule,
                         CdkTableModule,
                         CdkTreeModule,
@@ -7828,7 +7844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatButtonToggleModule,
                         MatCardModule,
                         MatCheckboxModule,
-                        MatLegacyChipsModule,
+                        MatChipsModule,
                         MatStepperModule,
                         MatDatepickerModule,
                         MatDialogModule,
@@ -7927,13 +7943,13 @@ class ActionBarComponent {
         }
         return `Approve ${res.substr(res.lastIndexOf('_') + 1, res.length)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionBarComponent, selector: "lib-action-bar", inputs: { actionType: "actionType", configType: "configType" }, outputs: { sendApproval: "sendApproval", closeAction: "closeAction" }, ngImport: i0, template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n    <div class=\"action-bar-buttons\">\n        <div>\n            <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n        </div>\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n                {{actionType? getApproveLevelText(configType) :'Send for Approval'}}  \n           </button>\n        </div>\n    </div>\n        <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n        <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n            <mat-icon color=\"primary\">flag</mat-icon>\n            Terms tobe Approve\n       </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width: 1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"], dependencies: [{ 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: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ActionBarComponent, isStandalone: false, selector: "lib-action-bar", inputs: { actionType: "actionType", configType: "configType" }, outputs: { sendApproval: "sendApproval", closeAction: "closeAction" }, ngImport: i0, template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n    <div class=\"action-bar-buttons\">\n        <div>\n            <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n        </div>\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n                {{actionType? getApproveLevelText(configType) :'Send for Approval'}}  \n           </button>\n        </div>\n    </div>\n        <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n        <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n            <mat-icon color=\"primary\">flag</mat-icon>\n            Terms tobe Approve\n       </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width:1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ActionBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-bar', template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n    <div class=\"action-bar-buttons\">\n        <div>\n            <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n        </div>\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n                {{actionType? getApproveLevelText(configType) :'Send for Approval'}}  \n           </button>\n        </div>\n    </div>\n        <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n        <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n            <mat-icon color=\"primary\">flag</mat-icon>\n            Terms tobe Approve\n       </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width: 1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { actionType: [{
+            args: [{ selector: 'lib-action-bar', standalone: false, template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n    <div class=\"action-bar-buttons\">\n        <div>\n            <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n        </div>\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n                {{actionType? getApproveLevelText(configType) :'Send for Approval'}}  \n           </button>\n        </div>\n    </div>\n        <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n        <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n            <mat-icon color=\"primary\">flag</mat-icon>\n            Terms tobe Approve\n       </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width:1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actionType: [{
                 type: Input
             }], configType: [{
                 type: Input
@@ -8014,21 +8030,22 @@ class ApprovalService {
     getUpdateList() {
         return this.approvalListSubject.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalService, deps: [{ token: FrameworkService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApprovalService, deps: [{ token: FrameworkService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApprovalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }, { type: i1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: FrameworkService }, { type: i1.HttpClient }] });
 
 class OrderByPipe {
     constructor() {
         this.approvalTerms = [];
     }
     transform(value, sortBy) {
+        // return null;
         if (!sortBy) {
             if (value) {
                 return value.slice().reverse();
@@ -8047,15 +8064,16 @@ class OrderByPipe {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: OrderByPipe, name: "orderBy" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrderByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OrderByPipe, isStandalone: false, name: "orderBy" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrderByPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrderByPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'orderBy'
+                    name: 'orderBy',
+                    standalone: false
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class PendingApprovalComponent {
     constructor(approvalService, frameworkService) {
@@ -8101,13 +8119,13 @@ class PendingApprovalComponent {
         temp.shift();
         return temp;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, deps: [{ token: ApprovalService }, { token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PendingApprovalComponent, selector: "lib-pending-approval", ngImport: i0, template: "<div class=\"pending-approval\">\n    <header class=\"mat-header\">\n        <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n    </header>\n\n    <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n        <mat-card-content>\n            <span class=\"date\">\n                <h4>{{app_strings.date}}</h4>\n                <span>{{p.lastUpdatedOn | date}}</span>\n            </span>\n            <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                <h4>{{t.name}}</h4>\n                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                    {{t.children[0].name}}\n                    <ng-container *ngIf=\"t.children.length>1\">\n                        & {{t.children.length-1}} {{app_strings.more}}\n                    </ng-container>\n                </div>\n            </div>\n            <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n        </mat-card-content>\n    </mat-card>\n    <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n        <mat-tab label=\"Sent for approval\" active>  -->\n    <!-- <mat-card>\n                <mat-card-content>\n                <div *ngFor=\"let t of categories\" class=\"col\">\n                        <h4>{{t}}</h4>\n                </div>\n                </mat-card-content>\n            </mat-card> -->\n    <!-- <mat-card *ngFor=\"let p of approvalList\">\n                    <mat-card-content>\n                        <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                                <h4>{{t.name}}</h4>\n                                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                                        {{t.children[0].name}}\n                                        <ng-container *ngIf=\"t.children.length>1\">\n                                        & {{t.children.length-1}} more...\n                                        </ng-container>\n                                </div>\n                              \n                        </div> \n                        <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n                    </mat-card-content>\n            </mat-card>\n        </mat-tab> -->\n    <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\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: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PendingApprovalComponent, deps: [{ token: ApprovalService }, { token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PendingApprovalComponent, isStandalone: false, selector: "lib-pending-approval", ngImport: i0, template: "<div class=\"pending-approval\">\n    <header class=\"mat-header\">\n        <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n    </header>\n\n    <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n        <mat-card-content>\n            <span class=\"date\">\n                <h4>{{app_strings.date}}</h4>\n                <span>{{p.lastUpdatedOn | date}}</span>\n            </span>\n            <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                <h4>{{t.name}}</h4>\n                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                    {{t.children[0].name}}\n                    <ng-container *ngIf=\"t.children.length>1\">\n                        & {{t.children.length-1}} {{app_strings.more}}\n                    </ng-container>\n                </div>\n            </div>\n            <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n        </mat-card-content>\n    </mat-card>\n    <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n        <mat-tab label=\"Sent for approval\" active>  -->\n    <!-- <mat-card>\n                <mat-card-content>\n                <div *ngFor=\"let t of categories\" class=\"col\">\n                        <h4>{{t}}</h4>\n                </div>\n                </mat-card-content>\n            </mat-card> -->\n    <!-- <mat-card *ngFor=\"let p of approvalList\">\n                    <mat-card-content>\n                        <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                                <h4>{{t.name}}</h4>\n                                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                                        {{t.children[0].name}}\n                                        <ng-container *ngIf=\"t.children.length>1\">\n                                        & {{t.children.length-1}} more...\n                                        </ng-container>\n                                </div>\n                              \n                        </div> \n                        <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n                    </mat-card-content>\n            </mat-card>\n        </mat-tab> -->\n    <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\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: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PendingApprovalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pending-approval', template: "<div class=\"pending-approval\">\n    <header class=\"mat-header\">\n        <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n    </header>\n\n    <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n        <mat-card-content>\n            <span class=\"date\">\n                <h4>{{app_strings.date}}</h4>\n                <span>{{p.lastUpdatedOn | date}}</span>\n            </span>\n            <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                <h4>{{t.name}}</h4>\n                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                    {{t.children[0].name}}\n                    <ng-container *ngIf=\"t.children.length>1\">\n                        & {{t.children.length-1}} {{app_strings.more}}\n                    </ng-container>\n                </div>\n            </div>\n            <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n        </mat-card-content>\n    </mat-card>\n    <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n        <mat-tab label=\"Sent for approval\" active>  -->\n    <!-- <mat-card>\n                <mat-card-content>\n                <div *ngFor=\"let t of categories\" class=\"col\">\n                        <h4>{{t}}</h4>\n                </div>\n                </mat-card-content>\n            </mat-card> -->\n    <!-- <mat-card *ngFor=\"let p of approvalList\">\n                    <mat-card-content>\n                        <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                                <h4>{{t.name}}</h4>\n                                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                                        {{t.children[0].name}}\n                                        <ng-container *ngIf=\"t.children.length>1\">\n                                        & {{t.children.length-1}} more...\n                                        </ng-container>\n                                </div>\n                              \n                        </div> \n                        <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n                    </mat-card-content>\n            </mat-card>\n        </mat-tab> -->\n    <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\n"] }]
-        }], ctorParameters: function () { return [{ type: ApprovalService }, { type: FrameworkService }]; } });
+            args: [{ selector: 'lib-pending-approval', standalone: false, template: "<div class=\"pending-approval\">\n    <header class=\"mat-header\">\n        <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n    </header>\n\n    <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n        <mat-card-content>\n            <span class=\"date\">\n                <h4>{{app_strings.date}}</h4>\n                <span>{{p.lastUpdatedOn | date}}</span>\n            </span>\n            <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                <h4>{{t.name}}</h4>\n                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                    {{t.children[0].name}}\n                    <ng-container *ngIf=\"t.children.length>1\">\n                        & {{t.children.length-1}} {{app_strings.more}}\n                    </ng-container>\n                </div>\n            </div>\n            <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n        </mat-card-content>\n    </mat-card>\n    <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n        <mat-tab label=\"Sent for approval\" active>  -->\n    <!-- <mat-card>\n                <mat-card-content>\n                <div *ngFor=\"let t of categories\" class=\"col\">\n                        <h4>{{t}}</h4>\n                </div>\n                </mat-card-content>\n            </mat-card> -->\n    <!-- <mat-card *ngFor=\"let p of approvalList\">\n                    <mat-card-content>\n                        <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n                                <h4>{{t.name}}</h4>\n                                <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n                                        {{t.children[0].name}}\n                                        <ng-container *ngIf=\"t.children.length>1\">\n                                        & {{t.children.length-1}} more...\n                                        </ng-container>\n                                </div>\n                              \n                        </div> \n                        <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n                    </mat-card-content>\n            </mat-card>\n        </mat-tab> -->\n    <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\n"] }]
+        }], ctorParameters: () => [{ type: ApprovalService }, { type: FrameworkService }] });
 
 class ApprovalComponent {
     constructor() {
@@ -8115,13 +8133,13 @@ class ApprovalComponent {
     }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApprovalComponent, selector: "lib-approval", ngImport: i0, template: "<div class=\"approval-container\">\n    <mat-tab-group mat-align-tabs=\"start\" animationDuration=\"0ms\" [selectedIndex]=\"1\">\n        <mat-tab label=\"{{app_strings.allFrac}}\"> \n            <h2>{{app_strings.allFrac}}</h2>\n        </mat-tab>\n        <mat-tab label=\"{{app_strings.pendingApproval}}\" active> \n            <ng-template matTabContent>\n                <lib-pending-approval></lib-pending-approval>\n            </ng-template>\n        </mat-tab>\n        <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    </mat-tab-group>\n    <!-- <lib-pending-approval></lib-pending-approval> -->\n</div>", styles: [".approval-container{padding:0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header{background-color:#f3f3f3}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:30px 0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#666}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: PendingApprovalComponent, selector: "lib-pending-approval" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApprovalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ApprovalComponent, isStandalone: false, selector: "lib-approval", ngImport: i0, template: "<div class=\"approval-container\">\n    <mat-tab-group mat-align-tabs=\"start\" animationDuration=\"0ms\" [selectedIndex]=\"1\">\n        <mat-tab label=\"{{app_strings.allFrac}}\"> \n            <h2>{{app_strings.allFrac}}</h2>\n        </mat-tab>\n        <mat-tab label=\"{{app_strings.pendingApproval}}\" active> \n            <ng-template matTabContent>\n                <lib-pending-approval></lib-pending-approval>\n            </ng-template>\n        </mat-tab>\n        <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    </mat-tab-group>\n    <!-- <lib-pending-approval></lib-pending-approval> -->\n</div>", styles: [".approval-container{padding:0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header{background-color:#f3f3f3}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:30px 0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#666}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: PendingApprovalComponent, selector: "lib-pending-approval" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApprovalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-approval', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"approval-container\">\n    <mat-tab-group mat-align-tabs=\"start\" animationDuration=\"0ms\" [selectedIndex]=\"1\">\n        <mat-tab label=\"{{app_strings.allFrac}}\"> \n            <h2>{{app_strings.allFrac}}</h2>\n        </mat-tab>\n        <mat-tab label=\"{{app_strings.pendingApproval}}\" active> \n            <ng-template matTabContent>\n                <lib-pending-approval></lib-pending-approval>\n            </ng-template>\n        </mat-tab>\n        <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    </mat-tab-group>\n    <!-- <lib-pending-approval></lib-pending-approval> -->\n</div>", styles: [".approval-container{padding:0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header{background-color:#f3f3f3}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:30px 0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#666}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#fff}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'lib-approval', encapsulation: ViewEncapsulation.Emulated, standalone: false, template: "<div class=\"approval-container\">\n    <mat-tab-group mat-align-tabs=\"start\" animationDuration=\"0ms\" [selectedIndex]=\"1\">\n        <mat-tab label=\"{{app_strings.allFrac}}\"> \n            <h2>{{app_strings.allFrac}}</h2>\n        </mat-tab>\n        <mat-tab label=\"{{app_strings.pendingApproval}}\" active> \n            <ng-template matTabContent>\n                <lib-pending-approval></lib-pending-approval>\n            </ng-template>\n        </mat-tab>\n        <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n        <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n    </mat-tab-group>\n    <!-- <lib-pending-approval></lib-pending-approval> -->\n</div>", styles: [".approval-container{padding:0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header{background-color:#f3f3f3}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:30px 0}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#666}.approval-container .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#fff}\n"] }]
+        }], ctorParameters: () => [] });
 
 const API_ENDPOINTS = {
     getDesignation: '/apis/proxies/v8/user/v1/positions',
@@ -8133,15 +8151,15 @@ class OdcsService {
     getDesignations(_req) {
         return this.http.get(API_ENDPOINTS.getDesignation);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OdcsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OdcsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OdcsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OdcsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OdcsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OdcsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class CreateTermComponent {
     constructor(dialogRef, data, frameWorkService, fb, odcsService, _snackBar, cdr) {
@@ -8205,9 +8223,16 @@ class CreateTermComponent {
             dname: [{ value: '', disabled: true }, [Validators.required]],
             description: ['']
         });
+        // this.createThemeForm.controls['dname'].disable()
+        // this.createThemeForm.controls['name'].valueChanges.subscribe((value)=>{
+        //   if(value.length){
+        //    this.createThemeForm.controls['dname'].enable()
+        //   }
+        // })
         this.createThemeFormMulti = this.fb.group({
             themeFields: this.fb.array([this.createThemeFields()])
         });
+        // this.initializeValueChanges()
         this.filtedTermLists = this.createTermForm.get('name').valueChanges.pipe(startWith(''), map(value => {
             if (value && this.createTermForm.controls.dname) {
                 this.createTermForm.controls.dname.enable();
@@ -8217,6 +8242,7 @@ class CreateTermComponent {
             }
             return this._filter(value || '');
         }));
+        // if mode is "view" then check for which type of form has to be used and then append the values in form
         if (this.data &&
             (this.data.mode === 'view')) {
             switch (this.data.columnInfo.code) {
@@ -8248,10 +8274,47 @@ class CreateTermComponent {
         }
         else if (this.data &&
             (this.data.mode === 'multi-create')) {
+            // switch (this.data.columnInfo.code) {
+            //   case 'theme': this.updateFormEdit(this.createThemeForm, this.data)
+            //     break
+            //   case 'subtheme': this.updateFormEdit(this.createThemeForm, this.data)
+            //     break
+            //   default: this.updateFormEdit(this.createThemeForm, this.data)
+            //     break
+            // }
         }
     }
     getComptencyData() {
-    }
+        // const filterObj = {
+        //   search: {
+        //     type: 'Competency Area',
+        //   },
+        //   filter: {
+        //     isDetail: true,
+        //   },
+        // }
+        // this.frameWorkService.getFilterEntity(filterObj).subscribe((data)=>{
+        //  if(data && data.length){
+        //   this.allCompetency = data
+        //  }
+        // })
+    }
+    // initializeValueChanges() {
+    //   this.themeFields.controls.forEach((group: FormGroup) => {
+    //     this.setUpValueChanges(group);
+    //   });
+    // }
+    // setUpValueChanges(group: FormGroup) {
+    //   group.controls['name'].valueChanges.subscribe(value => {
+    //     const dnameControl = group.controls['dname'];
+    //     dnameControl.disable();
+    //     if (value.trim().length) {
+    //       dnameControl.enable();
+    //     } else {
+    //       dnameControl.disable();
+    //     }
+    //   });
+    // }
     get themeFields() {
         return this.createThemeFormMulti.get('themeFields');
     }
@@ -8270,6 +8333,7 @@ class CreateTermComponent {
         this.values = '';
         this.filteredMasterList = [...this.masterList];
         if (this.data.mode === 'multi-create') {
+            // this.themeFields.push(this.createThemeFields());
             this.themeFields.insert(0, this.createThemeFields());
         }
     }
@@ -8299,7 +8363,7 @@ class CreateTermComponent {
             case 'subtheme':
                 return 'Competency Sub Theme';
             default:
-                return categoryName;
+                return categoryName; // Default return to handle any unmatched case
         }
     }
     getName(item) {
@@ -8312,7 +8376,7 @@ class CreateTermComponent {
             case 'Sub Theme':
                 return `Competency ${labelName} name`;
             default:
-                return labelName;
+                return labelName; // Default return to handle any unmatched case
         }
     }
     createCompThemeFields() {
@@ -8334,6 +8398,10 @@ class CreateTermComponent {
     get compThemeFields() {
         return this.competencyForm.get('compThemeFields');
     }
+    // get compThemeFieldsControls() {
+    //   const createCompThemeFields = this.competencyForm.get('createCompThemeFields')
+    //   return (<any>createCompThemeFields)['controls']
+    // }
     updateFormView(form, data) {
         if (data && data.childrenData && data.childrenData.additionalProperties && data.childrenData.additionalProperties.displayName) {
             form.get('dname').patchValue(data.childrenData.additionalProperties.displayName);
@@ -8345,6 +8413,7 @@ class CreateTermComponent {
                 form.controls['name'].setValue(assignName);
             }
         }
+        // form.get('name').patchValue(data.childrenData.name)
         setTimeout(() => {
             form.get('name').disable();
             form.get('dname').disable();
@@ -8360,13 +8429,17 @@ class CreateTermComponent {
                 form.controls['name'].setValue(assignName);
             }
         }
+        // form.get('name').patchValue(data.childrenData.name)
         setTimeout(() => {
             form.get('name').disable();
             form.get('dname').enable();
         });
     }
     onKey(event) {
+        //  this.values = event.target.value.toLowerCase();
+        //  this.filteredMasterList = this.filterOrgValues(this.values, this.masterList)
         clearTimeout(this.debounceTimeout);
+        // Set the new timeout
         this.debounceTimeout = setTimeout(() => {
             this.values = event.target.value.toLowerCase();
             this.filteredMasterList = this.filterOrgValues(this.values, this.masterList);
@@ -8426,6 +8499,7 @@ class CreateTermComponent {
                 return false;
             });
         }
+        //
         return result >= 0 ? true : false;
     }
     multiCreate(form, _data) {
@@ -8444,6 +8518,8 @@ class CreateTermComponent {
                         status: LIVE,
                         refId: val.name.id,
                         refType: this.data.columnInfo.code,
+                        // framework:this.data.frameworkId,
+                        // approvalStatus:appConstants.DRAFT,
                         parents: [
                             { identifier: `${this.data.frameworkId.toLowerCase()}_${this.data.columnInfo.code}` }
                         ],
@@ -8465,6 +8541,8 @@ class CreateTermComponent {
                             const parentColumn = this.frameWorkService.getPreviousCategory(this.data.columnInfo.code);
                             let parentCol = this.frameWorkService.selectionList.get(parentColumn.code);
                             this.updateTermAssociationsMultiV2(createdTerms, parentCol);
+                            // this.updateTermAssociationsMulti(createdTerms)
+                            // this.dialogClose({ term: createdTerms, created: true, multi:true })
                         }
                     });
                 });
@@ -8486,6 +8564,7 @@ class CreateTermComponent {
                     counter++;
                     temp = parent.children ? parent.children.filter((child) => child.identifier === this.selectedTerm.identifier) : null;
                     associations = parent.children ? parent.children.map((c) => {
+                        // return { identifier: c.identifier, approvalStatus: c.associationProperties?c.associationProperties.approvalStatus: 'Draft' }
                         return c.identifier ? { identifier: c.identifier } : null;
                     }) : [];
                     if (temp && temp.length) {
@@ -8495,6 +8574,7 @@ class CreateTermComponent {
                     else {
                         associations.push({ identifier: this.selectedTerm.identifier });
                         this.isTermExist = false;
+                        // if(createdTermsCounter === (createdTerms.length-1)) {
                         const reguestBody = {
                             request: {
                                 term: {
@@ -8502,7 +8582,9 @@ class CreateTermComponent {
                                 }
                             }
                         };
+                        // this.dialogClose({ term: this.selectedTerm, created: true })
                         await this.callUpdateAssociations(counter, parent, reguestBody);
+                        // }
                     }
                 }
                 createdTermsCounter++;
@@ -8525,7 +8607,19 @@ class CreateTermComponent {
             this.frameWorkService.updateTerm(this.data.frameworkId, parent.category, parent.code, reguestBody).subscribe(() => {
                 parent['children'] = parent && parent.children ? [...parent.children, ...[this.selectedTerm]] : [this.selectedTerm];
                 if (counter === this.frameWorkService.selectionList.size) {
+                    // this.selectedTerm['associationProperties']['approvalStatus'] = 'Draft';
+                    // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+                    // so term is set from childdata which is received from params in updateData
+                    // const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : {}
+                    // const found = parent.children ? parent.children.find(c=> c.identifier === this.selectedTerm.identifier) : false
+                    // if(!found) {
+                    //   parent.children ? parent.children.push(this.selectedTerm) : parent['children'] = [this.selectedTerm]
+                    // }
                     this.disableUpdate = false;
+                    // this.frameWorkService.publishFramework().subscribe(res => {
+                    //   // this.dialogRef.close(term)
+                    //   return resolve(true)
+                    // });
                     resolve(true);
                 }
                 else {
@@ -8537,6 +8631,12 @@ class CreateTermComponent {
         });
     }
     updateDname(_name, _form, _i) {
+        // if(this.data.mode === 'create' && !form.controls['dname'].value.trim().length){
+        //   form.get('dname').patchValue(name)
+        // }
+        // if(this.data.mode === 'multi-create' && !form.controls.themeFields.controls[i].controls['dname'].value.trim().length){
+        //   form.controls.themeFields.controls[i].controls['dname'].patchValue(name)
+        // }
     }
     change(event, form, i) {
         if (this.data && this.data.mode) {
@@ -8563,6 +8663,7 @@ class CreateTermComponent {
         const details = form.get('name').value;
         return _.get(details, 'title', '');
     }
+    //#region (designations)
     get designationControls() {
         return this.createThemeForm.get('designations').controls;
     }
@@ -8585,11 +8686,12 @@ class CreateTermComponent {
             name: ['', Validators.required],
             id: [null, Validators.required],
             designationDescription: ['', [Validators.required, Validators.maxLength(600)]],
-            isSaved: [false],
-            creationId: this.addedDesignationCount
+            isSaved: [false], // isSaved can be used to change button text from save to update if needed
+            creationId: this.addedDesignationCount // creationId is created to use locally to give unique id to added records
         });
         this.addedDesignationCount = this.addedDesignationCount + 1;
         this.createThemeForm.get('designations').insert(0, newDesignation);
+        // this.panelOpenState.insert(0, true)
         this.panelOpenState.splice(0, 0, true);
     }
     clearSelectedDesignaionOnChange(index, event) {
@@ -8629,11 +8731,13 @@ class CreateTermComponent {
         }
         return false;
     }
+    //#endregion
     _filter(searchTxt) {
         let isExist;
         this.disableCreate = false;
         this.isTermExist = false;
         this.createTermForm.get('description').enable();
+        // this.createTermForm.get('description').patchValue('')
         const filterValue = typeof (searchTxt) === 'object' ? this._normalizeValue(searchTxt.name) : this._normalizeValue(searchTxt);
         isExist = this.termLists.filter((term) => this._normalizeValue(term.name).includes(filterValue));
         return isExist;
@@ -8659,6 +8763,16 @@ class CreateTermComponent {
             }
         });
     }
+    // compAreaSelected(option: any) {
+    //   this.resetCompSubfields()
+    //   this.allCompetencies.forEach((val: any) => {
+    //     if (option.name === val.name) {
+    //       this.seletedCompetencyArea = val
+    //       this.allCompetencyTheme = val.children
+    //       this.filteredallCompetencyTheme = this.allCompetencyTheme
+    //     }
+    //   })
+    // }
     onSelect(term, form) {
         switch (this.colCode) {
             case 'designation':
@@ -8686,6 +8800,8 @@ class CreateTermComponent {
                 description: this.createTermForm.value.description,
                 category: this.data.columnInfo.code,
                 status: LIVE,
+                // framework:this.data.frameworkId,
+                // approvalStatus:appConstants.DRAFT,
                 parents: [
                     { identifier: `${this.data.frameworkId.toLowerCase()}_${this.data.columnInfo.code}` }
                 ],
@@ -8714,7 +8830,9 @@ class CreateTermComponent {
         form.value.displayName = form.value.dname;
         this.disableUpdate = true;
         const formData = {
+            // use this if you need disabled field values : form.getRawValue()
             ...form.value,
+            // displayName:{...form.value.dname}
         };
         const updateData = {
             formData,
@@ -8733,6 +8851,7 @@ class CreateTermComponent {
         if (listThme && listThme.children && listThme.children.length) {
             const data = listThme.children.find((c) => c.identifier === selectionData.identifier);
             themAssociations = data.associations ? data.associations.map((c) => {
+                // return { identifier: c.identifier, approvalStatus: c.associationProperties?c.associationProperties.approvalStatus: 'Draft' }
                 return c.identifier ? { identifier: c.identifier } : null;
             }) : [];
         }
@@ -8745,8 +8864,12 @@ class CreateTermComponent {
             }
         };
         this.frameWorkService.updateTerm(this.data.frameworkId, selectionData.category, selectionData.code, reguestBody).subscribe(() => {
+            // this.selectedTerm['associationProperties']['approvalStatus'] = 'Draft';
+            // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+            // so term is set from childdata which is received from params in updateData
             const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : (updateData) ? { ...updateData.updateTermData, ...updateData.formData } : {};
             this.disableUpdate = false;
+            // const selectionData = this.frameWorkService.selectionList.get(this.data.columnInfo.code)
             selectionData['description'] = reguestBody.request.term.description;
             selectionData['additionalProperties'] = reguestBody.request.term.additionalProperties;
             selectionData['associations'] = themAssociations;
@@ -8762,10 +8885,12 @@ class CreateTermComponent {
         let associations = [];
         let temp;
         let counter = 0;
+        // let localIsExist = false
         this.frameWorkService.selectionList.forEach((parent) => {
             counter++;
             temp = parent.children ? parent.children.filter((child) => child.identifier === this.selectedTerm.identifier) : null;
             associations = parent.children ? parent.children.map((c) => {
+                // return { identifier: c.identifier, approvalStatus: c.associationProperties?c.associationProperties.approvalStatus: 'Draft' }
                 return c.identifier ? { identifier: c.identifier } : null;
             }) : [];
             if (temp && temp.length) {
@@ -8773,6 +8898,7 @@ class CreateTermComponent {
                 return;
             }
             else {
+                // associations.push({ identifier: this.selectedTerm.identifier, approvalStatus: appConstants.DRAFT })
                 if (this.selectedTerm && this.selectedTerm.identifier) {
                     associations.push({ identifier: this.selectedTerm.identifier });
                 }
@@ -8785,8 +8911,12 @@ class CreateTermComponent {
                         }
                     }
                 };
+                // this.dialogClose({ term: this.selectedTerm, created: true })
                 this.frameWorkService.updateTerm(this.data.frameworkId, parent.category, parent.code, reguestBody).subscribe(() => {
                     if (counter === this.frameWorkService.selectionList.size) {
+                        // this.selectedTerm['associationProperties']['approvalStatus'] = 'Draft';
+                        // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+                        // so term is set from childdata which is received from params in updateData
                         const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : (updateData) ? { ...updateData.updateTermData, ...updateData.formData } : {};
                         this.disableUpdate = false;
                         this._snackBar.open(`Competency ${value.category} updated successfully`);
@@ -8810,6 +8940,7 @@ class CreateTermComponent {
                 description: this.createThemeForm.value.description,
                 category: this.data.columnInfo.code,
                 status: LIVE,
+                // approvalStatus:appConstants.DRAFT,
                 parents: [
                     { identifier: `${this.data.frameworkId.toLowerCase()}_${this.data.columnInfo.code}` }
                 ],
@@ -8840,6 +8971,7 @@ class CreateTermComponent {
     }
     async updateTermAssociationsMultiV2(createdTerms, parentSelectedTerm) {
         this.selectedTermArray = [];
+        // let createdTermsCounter = 0
         let createdTermsIdentifiers = [];
         this.selectedTermArray = createdTerms;
         this.selectedTerm = createdTerms[createdTerms.length - 1];
@@ -8860,6 +8992,7 @@ class CreateTermComponent {
                         counter++;
                         temp = parent.children ? parent.children.filter((child) => child.identifier === this.selectedTerm.identifier) : null;
                         associations = parent.children ? parent.children.map((c) => {
+                            // return { identifier: c.identifier, approvalStatus: c.associationProperties?c.associationProperties.approvalStatus: 'Draft' }
                             return c.identifier ? { identifier: c.identifier } : null;
                         }) : [];
                         if (temp && temp.length) {
@@ -8869,6 +9002,7 @@ class CreateTermComponent {
                         else {
                             associations.push({ identifier: this.selectedTerm.identifier });
                             this.isTermExist = false;
+                            // if(createdTermsCounter === (createdTerms.length-1)) {
                             const reguestBody = {
                                 request: {
                                     term: {
@@ -8876,7 +9010,9 @@ class CreateTermComponent {
                                     }
                                 }
                             };
+                            // this.dialogClose({ term: this.selectedTerm, created: true })
                             await this.callUpdateAssociations(counter, parent, reguestBody);
+                            // }
                         }
                     }
                     createdTermsCounter++;
@@ -8941,7 +9077,19 @@ class CreateTermComponent {
                     }
                 });
                 if (counter === this.frameWorkService.selectionList.size) {
+                    // this.selectedTerm['associationProperties']['approvalStatus'] = 'Draft';
+                    // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+                    // so term is set from childdata which is received from params in updateData
+                    //  const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : {}
+                    //  const found = parent.children ? parent.children.find(c=> c.identifier === this.selectedTerm.identifier) : false
+                    // if(!found) {
+                    //   parent.children ? parent.children.push(this.selectedTerm) : parent['children'] = [this.selectedTerm]
+                    // }
                     this.disableUpdate = false;
+                    // this.frameWorkService.publishFramework().subscribe(res => {
+                    //   // this.dialogRef.close(term)
+                    //   return resolve(true)
+                    // });
                     resolve(true);
                 }
                 else {
@@ -8952,16 +9100,16 @@ class CreateTermComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: FrameworkService }, { token: i3.UntypedFormBuilder }, { token: OdcsService }, { token: i3$1.MatLegacySnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermComponent, selector: "lib-create-term", ngImport: i0, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n    <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n    <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n    </ng-container> -->\n    <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'view'\">\n        <div class=\"dialog-title\" mat-dialog-title></div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'edit'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n    </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n    <div class=\"dialog\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n            class=\"defaultForm\">\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n                    <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                        {{option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n            </mat-form-field>\n            <footer class=\"actions\">\n                <button mat-raised-button color=\"default\" type=\"reset\"\n                    (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n            </footer>\n        </form>\n    </div>\n</ng-template>\n\n<ng-template #themeCreate >\n    <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{getCategoryName(term.category,term)}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n                                        <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                          (keydown.space)=\"$event.stopPropagation()\"  (keyup)=\"onKey($event)\" matInput>\n                                        <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n                                        <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                            No results found!\n                                          </mat-option>\n                                        </mat-select>\n\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                               \n                                <div class=\"flex\">\n\n                                    <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                        <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                        matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                \n                                </div>\n                              \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname \n                                        placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <input  autocomplete=\"off\" \n                                           matInput [value]=\"data?.childrenData?.name\" disabled>\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add more\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"themeFields\">\n                    <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                {{getExpansionTitle(field)}} \n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeThemeFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                                placeholder=\"{{app_strings.name}}\"\n                                                (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        \n                                        <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n                                            <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"   (keyup)=\"onKey($event)\" matInput>\n                                            <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\"  [value]=\"option\">{{option.title}} </mat-option>\n                                            <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                                No results found!\n                                              </mat-option>\n                                            \n                                          </mat-select>\n                                          \n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n                                    </div>\n                                    <div class=\"flex-1 flex-col\">\n                                        <div class=\"flex\">\n                                            <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Display Name\n                                        </label>\n        \n                                        \n                                            <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                            matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                                          \n                                                \n                                            \n                                            \n                                            \n                                        </div>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\"> -->\n                                            <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                    </mat-autocomplete> -->\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                    </div>\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Description\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                            [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                            placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-end\">\n                            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n                            [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n                                Save\n                            </button>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.add_btn}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n    <div class=\"themDesignation\">\n        <div class=\"dialogNew\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <div class=\"mb-2\">\n                <span class=\"organisation\">Organisation</span>\n                <div class=\"org-name pl-4 flex items-center\">\n                    <!-- <span>Department of Fisheries</span> -->\n                    <span>{{data?.columnInfo?.name}}</span>\n                </div>\n            </div>\n            <div class=\"row-divider\"></div>\n            <div class=\"flex w-full items-center justify-end mt-4\">\n                <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n                    <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n                    <span>Add Designations</span>\n                </a>\n            </div>\n            <div class=\"mt-5\">\n                <form  [formGroup]=\"createThemeForm\">\n                    <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n                        <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n                            <mat-expansion-panel [formGroupName]=\"i\"  class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n                                <mat-expansion-panel-header>\n                                    <div class=\"flex w-full items-center justify-end\">\n                                        <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n                                    </div>\n                                </mat-expansion-panel-header>\n                                <div class=\"flex flex-col gap-2 \">\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n                                            <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n                                                <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n                                                    {{option.name}}\n                                                </mat-option>\n                                            </mat-autocomplete>\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                        <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n                                    </div>\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Description <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <textarea matInput formControlName=\"designationDescription\"\n                                                placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n                                        </mat-form-field>\n                                    </div>\n                                \n                                    <div class=\"w-full flex justify-end items-center\">\n                                        <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n                                            (click)=\"saveDesignation(i)\">Save</button>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </ng-container>\n                    </mat-accordion>\n                </form>\n            </div>\n        </div>\n        <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n            <button mat-raised-button class=\"cancel flex justify-center items-center\"\n                (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #compTheme>\n    <div class=\"dialogNew\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{term.category}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <form [formGroup]=\"competencyForm\">\n        <div class=\"title-text\">\n            <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                {{'Select Area'}}\n            </label>\n            <div class=\"mt-5\">\n            <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n                <mat-radio-button class=\"learning-section\"  *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n            \n              </mat-radio-group>\n            </div>\n        </div>\n       \n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Add Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                        placeholder=\"Competency display name\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n           \n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add {{data.columnInfo.name}}\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"compThemeFields\">\n                    <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                <!-- {{name?.value}}  -->\n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeCompFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Select Competency Theme\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                                  (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\"  >{{option.name}}</mat-option>\n                                            </mat-select>\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                    </div>\n                                    <!-- <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Display Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Competency display name\">\n                                        </mat-form-field>\n                                    </div> -->\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Select Competency Sub-Theme\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                            <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                            <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.create}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </ng-container>\n        </form>\n        \n    </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i15.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CreateTermComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FrameworkService }, { token: i3.UntypedFormBuilder }, { token: OdcsService }, { token: i3$1.MatSnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CreateTermComponent, isStandalone: false, selector: "lib-create-term", ngImport: i0, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n    <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n    <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n    </ng-container> -->\n    <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'view'\">\n        <div class=\"dialog-title\" mat-dialog-title></div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'edit'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n    </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n    <div class=\"dialog\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n            class=\"defaultForm\">\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n                    <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                        {{option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n            </mat-form-field>\n            <footer class=\"actions\">\n                <button mat-raised-button color=\"default\" type=\"reset\"\n                    (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n            </footer>\n        </form>\n    </div>\n</ng-template>\n\n<ng-template #themeCreate >\n    <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{getCategoryName(term.category,term)}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n                                        <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                          (keydown.space)=\"$event.stopPropagation()\"  (keyup)=\"onKey($event)\" matInput>\n                                        <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n                                        <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                            No results found!\n                                          </mat-option>\n                                        </mat-select>\n\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                               \n                                <div class=\"flex\">\n\n                                    <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                        <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                        matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                \n                                </div>\n                              \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname \n                                        placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <input  autocomplete=\"off\" \n                                           matInput [value]=\"data?.childrenData?.name\" disabled>\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add more\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"themeFields\">\n                    <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                {{getExpansionTitle(field)}} \n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeThemeFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                                placeholder=\"{{app_strings.name}}\"\n                                                (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        \n                                        <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n                                            <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"   (keyup)=\"onKey($event)\" matInput>\n                                            <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\"  [value]=\"option\">{{option.title}} </mat-option>\n                                            <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                                No results found!\n                                              </mat-option>\n                                            \n                                          </mat-select>\n                                          \n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n                                    </div>\n                                    <div class=\"flex-1 flex-col\">\n                                        <div class=\"flex\">\n                                            <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Display Name\n                                        </label>\n        \n                                        \n                                            <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                            matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                                          \n                                                \n                                            \n                                            \n                                            \n                                        </div>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\"> -->\n                                            <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                    </mat-autocomplete> -->\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                    </div>\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Description\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                            [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                            placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-end\">\n                            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n                            [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n                                Save\n                            </button>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.add_btn}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n    <div class=\"themDesignation\">\n        <div class=\"dialogNew\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <div class=\"mb-2\">\n                <span class=\"organisation\">Organisation</span>\n                <div class=\"org-name pl-4 flex items-center\">\n                    <!-- <span>Department of Fisheries</span> -->\n                    <span>{{data?.columnInfo?.name}}</span>\n                </div>\n            </div>\n            <div class=\"row-divider\"></div>\n            <div class=\"flex w-full items-center justify-end mt-4\">\n                <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n                    <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n                    <span>Add Designations</span>\n                </a>\n            </div>\n            <div class=\"mt-5\">\n                <form  [formGroup]=\"createThemeForm\">\n                    <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n                        <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n                            <mat-expansion-panel [formGroupName]=\"i\"  class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n                                <mat-expansion-panel-header>\n                                    <div class=\"flex w-full items-center justify-end\">\n                                        <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n                                    </div>\n                                </mat-expansion-panel-header>\n                                <div class=\"flex flex-col gap-2 \">\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n                                            <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n                                                <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n                                                    {{option.name}}\n                                                </mat-option>\n                                            </mat-autocomplete>\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                        <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n                                    </div>\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Description <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <textarea matInput formControlName=\"designationDescription\"\n                                                placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n                                        </mat-form-field>\n                                    </div>\n                                \n                                    <div class=\"w-full flex justify-end items-center\">\n                                        <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n                                            (click)=\"saveDesignation(i)\">Save</button>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </ng-container>\n                    </mat-accordion>\n                </form>\n            </div>\n        </div>\n        <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n            <button mat-raised-button class=\"cancel flex justify-center items-center\"\n                (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #compTheme>\n    <div class=\"dialogNew\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{term.category}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <form [formGroup]=\"competencyForm\">\n        <div class=\"title-text\">\n            <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                {{'Select Area'}}\n            </label>\n            <div class=\"mt-5\">\n            <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n                <mat-radio-button class=\"learning-section\"  *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n            \n              </mat-radio-group>\n            </div>\n        </div>\n       \n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Add Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                        placeholder=\"Competency display name\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n           \n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add {{data.columnInfo.name}}\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"compThemeFields\">\n                    <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                <!-- {{name?.value}}  -->\n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeCompFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Select Competency Theme\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                                  (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\"  >{{option.name}}</mat-option>\n                                            </mat-select>\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                    </div>\n                                    <!-- <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Display Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Competency display name\">\n                                        </mat-form-field>\n                                    </div> -->\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Select Competency Sub-Theme\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                            <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                            <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.create}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </ng-container>\n        </form>\n        \n    </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width:1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width:992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width:1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i12.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i14.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i14.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CreateTermComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-create-term', template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n    <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n    <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n    </ng-container> -->\n    <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'view'\">\n        <div class=\"dialog-title\" mat-dialog-title></div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'edit'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n    </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n    <div class=\"dialog\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n            class=\"defaultForm\">\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n                    <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                        {{option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n            </mat-form-field>\n            <footer class=\"actions\">\n                <button mat-raised-button color=\"default\" type=\"reset\"\n                    (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n            </footer>\n        </form>\n    </div>\n</ng-template>\n\n<ng-template #themeCreate >\n    <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{getCategoryName(term.category,term)}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n                                        <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                          (keydown.space)=\"$event.stopPropagation()\"  (keyup)=\"onKey($event)\" matInput>\n                                        <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n                                        <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                            No results found!\n                                          </mat-option>\n                                        </mat-select>\n\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                               \n                                <div class=\"flex\">\n\n                                    <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                        <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                        matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                \n                                </div>\n                              \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname \n                                        placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <input  autocomplete=\"off\" \n                                           matInput [value]=\"data?.childrenData?.name\" disabled>\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add more\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"themeFields\">\n                    <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                {{getExpansionTitle(field)}} \n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeThemeFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                                placeholder=\"{{app_strings.name}}\"\n                                                (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        \n                                        <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n                                            <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"   (keyup)=\"onKey($event)\" matInput>\n                                            <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\"  [value]=\"option\">{{option.title}} </mat-option>\n                                            <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                                No results found!\n                                              </mat-option>\n                                            \n                                          </mat-select>\n                                          \n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n                                    </div>\n                                    <div class=\"flex-1 flex-col\">\n                                        <div class=\"flex\">\n                                            <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Display Name\n                                        </label>\n        \n                                        \n                                            <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                            matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                                          \n                                                \n                                            \n                                            \n                                            \n                                        </div>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\"> -->\n                                            <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                    </mat-autocomplete> -->\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                    </div>\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Description\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                            [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                            placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-end\">\n                            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n                            [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n                                Save\n                            </button>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.add_btn}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n    <div class=\"themDesignation\">\n        <div class=\"dialogNew\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <div class=\"mb-2\">\n                <span class=\"organisation\">Organisation</span>\n                <div class=\"org-name pl-4 flex items-center\">\n                    <!-- <span>Department of Fisheries</span> -->\n                    <span>{{data?.columnInfo?.name}}</span>\n                </div>\n            </div>\n            <div class=\"row-divider\"></div>\n            <div class=\"flex w-full items-center justify-end mt-4\">\n                <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n                    <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n                    <span>Add Designations</span>\n                </a>\n            </div>\n            <div class=\"mt-5\">\n                <form  [formGroup]=\"createThemeForm\">\n                    <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n                        <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n                            <mat-expansion-panel [formGroupName]=\"i\"  class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n                                <mat-expansion-panel-header>\n                                    <div class=\"flex w-full items-center justify-end\">\n                                        <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n                                    </div>\n                                </mat-expansion-panel-header>\n                                <div class=\"flex flex-col gap-2 \">\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n                                            <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n                                                <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n                                                    {{option.name}}\n                                                </mat-option>\n                                            </mat-autocomplete>\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                        <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n                                    </div>\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Description <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <textarea matInput formControlName=\"designationDescription\"\n                                                placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n                                        </mat-form-field>\n                                    </div>\n                                \n                                    <div class=\"w-full flex justify-end items-center\">\n                                        <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n                                            (click)=\"saveDesignation(i)\">Save</button>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </ng-container>\n                    </mat-accordion>\n                </form>\n            </div>\n        </div>\n        <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n            <button mat-raised-button class=\"cancel flex justify-center items-center\"\n                (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #compTheme>\n    <div class=\"dialogNew\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{term.category}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <form [formGroup]=\"competencyForm\">\n        <div class=\"title-text\">\n            <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                {{'Select Area'}}\n            </label>\n            <div class=\"mt-5\">\n            <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n                <mat-radio-button class=\"learning-section\"  *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n            \n              </mat-radio-group>\n            </div>\n        </div>\n       \n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Add Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                        placeholder=\"Competency display name\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n           \n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add {{data.columnInfo.name}}\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"compThemeFields\">\n                    <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                <!-- {{name?.value}}  -->\n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeCompFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Select Competency Theme\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                                  (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\"  >{{option.name}}</mat-option>\n                                            </mat-select>\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                    </div>\n                                    <!-- <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Display Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Competency display name\">\n                                        </mat-form-field>\n                                    </div> -->\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Select Competency Sub-Theme\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                            <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                            <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.create}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </ng-container>\n        </form>\n        \n    </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'lib-create-term', standalone: false, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n    <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n    <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n    <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n    </ng-container> -->\n    <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n        <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'view'\">\n        <div class=\"dialog-title\" mat-dialog-title></div>\n    </ng-container>\n    <ng-container *ngIf=\"data?.mode === 'edit'\">\n        <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n    </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n    <div class=\"dialog\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n            class=\"defaultForm\">\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n                    <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                        {{option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n            </mat-form-field>\n            <footer class=\"actions\">\n                <button mat-raised-button color=\"default\" type=\"reset\"\n                    (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                    *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n            </footer>\n        </form>\n    </div>\n</ng-template>\n\n<ng-template #themeCreate >\n    <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{getCategoryName(term.category,term)}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n                                        <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                          (keydown.space)=\"$event.stopPropagation()\"  (keyup)=\"onKey($event)\" matInput>\n                                        <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n                                        <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                            No results found!\n                                          </mat-option>\n                                        </mat-select>\n\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                               \n                                <div class=\"flex\">\n\n                                    <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                        <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                        matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                \n                                </div>\n                              \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname \n                                        placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                     Name\n                                </label>\n                                \n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <input  autocomplete=\"off\" \n                                           matInput [value]=\"data?.childrenData?.name\" disabled>\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add more\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"themeFields\">\n                    <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                {{getExpansionTitle(field)}} \n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeThemeFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n                                                placeholder=\"{{app_strings.name}}\"\n                                                (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        \n                                        <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n                                            <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"   (keyup)=\"onKey($event)\" matInput>\n                                            <mat-option *ngFor=\"let option of filteredMasterList\"    (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\"  [value]=\"option\">{{option.title}} </mat-option>\n                                            <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n                                                No results found!\n                                              </mat-option>\n                                            \n                                          </mat-select>\n                                          \n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n                                    </div>\n                                    <div class=\"flex-1 flex-col\">\n                                        <div class=\"flex\">\n                                            <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                             Display Name\n                                        </label>\n        \n                                        \n                                            <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n                                            matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n                                          \n                                                \n                                            \n                                            \n                                            \n                                        </div>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\"> -->\n                                            <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                    </mat-autocomplete> -->\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                    </div>\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Description\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                            [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                            placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-end\">\n                            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n                            [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n                                Save\n                            </button>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.add_btn}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n    <div class=\"themDesignation\">\n        <div class=\"dialogNew\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <div class=\"mb-2\">\n                <span class=\"organisation\">Organisation</span>\n                <div class=\"org-name pl-4 flex items-center\">\n                    <!-- <span>Department of Fisheries</span> -->\n                    <span>{{data?.columnInfo?.name}}</span>\n                </div>\n            </div>\n            <div class=\"row-divider\"></div>\n            <div class=\"flex w-full items-center justify-end mt-4\">\n                <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n                    <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n                    <span>Add Designations</span>\n                </a>\n            </div>\n            <div class=\"mt-5\">\n                <form  [formGroup]=\"createThemeForm\">\n                    <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n                        <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n                            <mat-expansion-panel [formGroupName]=\"i\"  class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n                                <mat-expansion-panel-header>\n                                    <div class=\"flex w-full items-center justify-end\">\n                                        <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n                                    </div>\n                                </mat-expansion-panel-header>\n                                <div class=\"flex flex-col gap-2 \">\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n                                            <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n                                                <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n                                                    {{option.name}}\n                                                </mat-option>\n                                            </mat-autocomplete>\n                                            <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                        </mat-form-field>\n                                        <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n                                    </div>\n                                    <div class=\"w-full\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n                                            Description <mat-icon class=\"info-icon\">info</mat-icon>\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <textarea matInput formControlName=\"designationDescription\"\n                                                placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n                                        </mat-form-field>\n                                    </div>\n                                \n                                    <div class=\"w-full flex justify-end items-center\">\n                                        <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n                                            (click)=\"saveDesignation(i)\">Save</button>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </ng-container>\n                    </mat-accordion>\n                </form>\n            </div>\n        </div>\n        <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n            <button mat-raised-button class=\"cancel flex justify-center items-center\"\n                (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #compTheme>\n    <div class=\"dialogNew\">\n        <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <div class=\"flex-1 flex-col\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                        {{term.category}}\n                    </label>\n                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                        <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [value]=\"term.name\" disabled>\n                    </mat-form-field>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <form [formGroup]=\"competencyForm\">\n        <div class=\"title-text\">\n            <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                {{'Select Area'}}\n            </label>\n            <div class=\"mt-5\">\n            <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n                <mat-radio-button class=\"learning-section\"  *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n            \n              </mat-radio-group>\n            </div>\n        </div>\n       \n        <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n            <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n                (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n                <div class=\"input-column\">\n                    <div class=\"input-wrapper margin-top-s\">\n                        <div class=\"flex gap-4 \">\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Add Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"name\" id=\"name\" #name\n                                        placeholder=\"{{app_strings.name}}\"\n                                        (blur)=\"updateDname(name.value, createThemeForm)\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\">\n                            <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                            </mat-autocomplete> -->\n                                </mat-form-field>\n                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                            </div>\n                            <div class=\"flex-1 flex-col\">\n                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                    aria-label=\"First name label\">\n                                    Display Name\n                                </label>\n                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                    <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                        placeholder=\"Competency display name\">\n                                    <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                            [matAutocomplete]=\"auto\"> -->\n                                    <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n                            (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                            <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                {{option.name}}\n                            </mat-option>\n                        </mat-autocomplete> -->\n                                    <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n                                </mat-form-field>\n                            </div>\n                        </div>\n\n                        <div class=\"flex-col mt-2\">\n                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                i18n-aria-label aria-label=\"First name label\">\n                                Description\n                            </label>\n                            <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n                                    [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n                                    placeholder=\"{{app_strings.description}}\"></textarea>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </form>\n        </ng-container>\n        <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n           \n                <div class=\"flex flex-end mb-4\">\n                    <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                        <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                        Add {{data.columnInfo.name}}\n                    </button>\n                </div>\n                <mat-accordion formArrayName=\"compThemeFields\">\n                    <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                    class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n                        <mat-expansion-panel-header>\n                            <mat-panel-title>\n                                <!-- {{name?.value}}  -->\n                            </mat-panel-title>\n                            <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                    (click)=\"removeCompFields(i)\">\n                                    <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                            </button>\n                        </mat-expansion-panel-header>\n                        <div class=\"input-column\">\n                            <div class=\"input-wrapper margin-top-s\">\n                                <div class=\"flex gap-4 \">\n                                    <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Select Competency Theme\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                                  (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\"  >{{option.name}}</mat-option>\n                                            </mat-select>\n                                            <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                        [matAutocomplete]=\"auto\">\n                                        <mat-autocomplete #auto=\"matAutocomplete\"\n                                        (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n                                        <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n                                            {{option.name}}\n                                        </mat-option>\n                                        </mat-autocomplete> -->\n                                        </mat-form-field>\n                                        <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                    </div>\n                                    <!-- <div class=\"flex-1 flex-col\">\n                                        <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                            aria-label=\"First name label\">\n                                            Display Name\n                                        </label>\n                                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                            <input matInput formControlName=\"dname\" id=\"dname\" #dname\n                                                placeholder=\"Competency display name\">\n                                        </mat-form-field>\n                                    </div> -->\n                                </div>\n\n                                <div class=\"flex-col mt-2\">\n                                    <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                        i18n=\"First Name label|Label which explains the user to enter first name\"\n                                        i18n-aria-label aria-label=\"First name label\">\n                                        Select Competency Sub-Theme\n                                    </label>\n                                    <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                        <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n                                        <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                            <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n                                              (keydown.space)=\"$event.stopPropagation()\"  formControlName=\"assigneeText\" matInput> -->\n                                            <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-expansion-panel>\n                </mat-accordion>\n                <footer class=\"actions\">\n                    <button mat-raised-button color=\"default\" type=\"reset\"\n                        (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                    <ng-container *ngIf=\"data?.mode === 'create'\">\n                        <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                            [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n                            {{app_strings.create}}\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"data?.mode === 'edit'\">\n                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                            (click)=\"updateTermData(createThemeForm, data)\"\n                            [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n                            *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                    </ng-container>\n                </footer>\n            </ng-container>\n        </form>\n        \n    </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width:1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width:992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width:1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: OdcsService }, { type: i3$1.MatLegacySnackBar }, { type: i0.ChangeDetectorRef }]; } });
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: OdcsService }, { type: i3$1.MatSnackBar }, { type: i0.ChangeDetectorRef }] });
 
 class ConnectorComponent {
     constructor(dialogRef, data, localScv, fb) {
@@ -8972,6 +9120,16 @@ class ConnectorComponent {
         this.app_strings = labels;
     }
     ngOnInit() {
+        // const requestBody = {
+        //   request: {
+        //     search: {
+        //         status: "Draft"
+        //     }
+        // }
+        // }
+        // this.frameWorkService.readTerms(this.data.frameworkId, this.data.categoryId, requestBody).subscribe(data => {
+        //    this.termLists = data.terms
+        // })
         this.initConnectorForm();
     }
     initConnectorForm() {
@@ -8998,17 +9156,18 @@ class ConnectorComponent {
     loadDefault() {
         this.dialogRef.close({ source: 'offline', data: {} });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: LocalConnectionService }, { token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectorComponent, selector: "lib-connector", ngImport: i0, template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n    <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n        <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n    </button>\n</div>\n<div class=\"dialog flex\">\n    <div class=\"flex flex-1 flex-row\">\n        <div class=\"container flex flex-1\">\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-2 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n                    <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.endPoint}}</mat-label>\n                            <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.token}}</mat-label>\n                            <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n                            <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n                        </mat-form-field>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n                            <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n                            <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n                        </footer>\n                    </form>\n                </div>\n            </div>\n            <div class=\"or\">\n                <div class=\"or-line\"></div>\n                <div class=\"or-label\">{{app_strings.or}}</div>\n            </div>\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-1 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n                    <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n                        {{app_strings.playWithIt}}\n                    </button>\n                </div>\n            </div>\n        </div>\u200B\n\n    </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width: 1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"], dependencies: [{ 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: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConnectorComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: LocalConnectionService }, { token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ConnectorComponent, isStandalone: false, selector: "lib-connector", ngImport: i0, template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n    <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n        <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n    </button>\n</div>\n<div class=\"dialog flex\">\n    <div class=\"flex flex-1 flex-row\">\n        <div class=\"container flex flex-1\">\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-2 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n                    <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.endPoint}}</mat-label>\n                            <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.token}}</mat-label>\n                            <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n                            <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n                        </mat-form-field>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n                            <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n                            <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n                        </footer>\n                    </form>\n                </div>\n            </div>\n            <div class=\"or\">\n                <div class=\"or-line\"></div>\n                <div class=\"or-label\">{{app_strings.or}}</div>\n            </div>\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-1 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n                    <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n                        {{app_strings.playWithIt}}\n                    </button>\n                </div>\n            </div>\n        </div>\u200B\n\n    </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width:1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width:1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConnectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-connector', template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n    <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n        <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n    </button>\n</div>\n<div class=\"dialog flex\">\n    <div class=\"flex flex-1 flex-row\">\n        <div class=\"container flex flex-1\">\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-2 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n                    <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.endPoint}}</mat-label>\n                            <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.token}}</mat-label>\n                            <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n                            <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n                        </mat-form-field>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n                            <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n                            <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n                        </footer>\n                    </form>\n                </div>\n            </div>\n            <div class=\"or\">\n                <div class=\"or-line\"></div>\n                <div class=\"or-label\">{{app_strings.or}}</div>\n            </div>\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-1 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n                    <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n                        {{app_strings.playWithIt}}\n                    </button>\n                </div>\n            </div>\n        </div>\u200B\n\n    </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width: 1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'lib-connector', standalone: false, template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n    <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n        <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n    </button>\n</div>\n<div class=\"dialog flex\">\n    <div class=\"flex flex-1 flex-row\">\n        <div class=\"container flex flex-1\">\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-2 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n                    <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.endPoint}}</mat-label>\n                            <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.token}}</mat-label>\n                            <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n                        </mat-form-field>\n                        <mat-form-field appearance=\"outline\">\n                            <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n                            <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n                        </mat-form-field>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n                            <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n                            <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n                        </footer>\n                    </form>\n                </div>\n            </div>\n            <div class=\"or\">\n                <div class=\"or-line\"></div>\n                <div class=\"or-label\">{{app_strings.or}}</div>\n            </div>\n            <div class=\"side flex flex-1\">\n                <div class=\"'flex flex-1 padding-s\">\n                    <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n                    <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n                        {{app_strings.playWithIt}}\n                    </button>\n                </div>\n            </div>\n        </div>\u200B\n\n    </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width:1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width:1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: LocalConnectionService }, { type: i3.UntypedFormBuilder }]; } });
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: LocalConnectionService }, { type: i3.UntypedFormBuilder }] });
 
+/* tslint:enable */
 class ConforamtionPopupComponent {
     constructor(dialogRef, data, frameworkService, _snackBar) {
         this.dialogRef = dialogRef;
@@ -9061,17 +9220,18 @@ class ConforamtionPopupComponent {
             this.dialogRef.close(event);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, 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: ConforamtionPopupComponent, selector: "lib-conforamtion-popup", ngImport: i0, template: "<!-- <div class=\"w-full\">\n  <div class=\"w-full conformation-popup flex justify-center items-center\">\n    <span class=\"msgDescription\">{{dialogData?.message}}</span>\n  </div>\n  <div class=\"w-full flex justify-end items-center gap-4\">\n    <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n    <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n  </div>\n</div> -->\n\n<div class=\"dialog-container\">\n  <ng-container *ngIf=\"showLoader\">\n    <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n      <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      <!-- <p>{{loaderMsg}}</p> -->\n    </div>\n  </ng-container>\n  <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n    <!-- <ng-container *ngSwitchCase=\"'success'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'fail'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n      </div>\n    </ng-container> -->\n    <ng-container *ngSwitchCase=\"'warning'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogDetails.iconDetails\">\n    <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n      <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n    </div>\n  </ng-container>\n  <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n    <ng-container *ngIf=\"description.header\">\n      <div [ngClass]=\"description.headerClass\">\n        <span>{{description.header}}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"description.messages\">\n      <div class=\"description mt-1  flex w-full justify-center\">\n        <span>\n          <ng-container *ngFor=\"let msgDetails of description.messages\">\n            <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n          </ng-container>\n        </span>\n        <!-- <span>{{description.message}}</span> -->\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n  <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n    <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n  </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConforamtionPopupComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FrameworkService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ConforamtionPopupComponent, isStandalone: false, selector: "lib-conforamtion-popup", ngImport: i0, template: "<!-- <div class=\"w-full\">\n  <div class=\"w-full conformation-popup flex justify-center items-center\">\n    <span class=\"msgDescription\">{{dialogData?.message}}</span>\n  </div>\n  <div class=\"w-full flex justify-end items-center gap-4\">\n    <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n    <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n  </div>\n</div> -->\n\n<div class=\"dialog-container\">\n  <ng-container *ngIf=\"showLoader\">\n    <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n      <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      <!-- <p>{{loaderMsg}}</p> -->\n    </div>\n  </ng-container>\n  <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n    <!-- <ng-container *ngSwitchCase=\"'success'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'fail'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n      </div>\n    </ng-container> -->\n    <ng-container *ngSwitchCase=\"'warning'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogDetails.iconDetails\">\n    <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n      <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n    </div>\n  </ng-container>\n  <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n    <ng-container *ngIf=\"description.header\">\n      <div [ngClass]=\"description.headerClass\">\n        <span>{{description.header}}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"description.messages\">\n      <div class=\"description mt-1  flex w-full justify-center\">\n        <span>\n          <ng-container *ngFor=\"let msgDetails of description.messages\">\n            <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n          </ng-container>\n        </span>\n        <!-- <span>{{description.message}}</span> -->\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n  <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n    <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n  </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConforamtionPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-conforamtion-popup', template: "<!-- <div class=\"w-full\">\n  <div class=\"w-full conformation-popup flex justify-center items-center\">\n    <span class=\"msgDescription\">{{dialogData?.message}}</span>\n  </div>\n  <div class=\"w-full flex justify-end items-center gap-4\">\n    <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n    <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n  </div>\n</div> -->\n\n<div class=\"dialog-container\">\n  <ng-container *ngIf=\"showLoader\">\n    <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n      <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      <!-- <p>{{loaderMsg}}</p> -->\n    </div>\n  </ng-container>\n  <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n    <!-- <ng-container *ngSwitchCase=\"'success'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'fail'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n      </div>\n    </ng-container> -->\n    <ng-container *ngSwitchCase=\"'warning'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogDetails.iconDetails\">\n    <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n      <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n    </div>\n  </ng-container>\n  <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n    <ng-container *ngIf=\"description.header\">\n      <div [ngClass]=\"description.headerClass\">\n        <span>{{description.header}}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"description.messages\">\n      <div class=\"description mt-1  flex w-full justify-center\">\n        <span>\n          <ng-container *ngFor=\"let msgDetails of description.messages\">\n            <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n          </ng-container>\n        </span>\n        <!-- <span>{{description.message}}</span> -->\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n  <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n    <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n  </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'lib-conforamtion-popup', standalone: false, template: "<!-- <div class=\"w-full\">\n  <div class=\"w-full conformation-popup flex justify-center items-center\">\n    <span class=\"msgDescription\">{{dialogData?.message}}</span>\n  </div>\n  <div class=\"w-full flex justify-end items-center gap-4\">\n    <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n    <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n  </div>\n</div> -->\n\n<div class=\"dialog-container\">\n  <ng-container *ngIf=\"showLoader\">\n    <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n      <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      <!-- <p>{{loaderMsg}}</p> -->\n    </div>\n  </ng-container>\n  <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n    <!-- <ng-container *ngSwitchCase=\"'success'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'fail'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n      </div>\n    </ng-container> -->\n    <ng-container *ngSwitchCase=\"'warning'\">\n      <div class=\"flex justify-center items-center mb-4\">\n        <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogDetails.iconDetails\">\n    <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n      <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n    </div>\n  </ng-container>\n  <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n    <ng-container *ngIf=\"description.header\">\n      <div [ngClass]=\"description.headerClass\">\n        <span>{{description.header}}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"description.messages\">\n      <div class=\"description mt-1  flex w-full justify-center\">\n        <span>\n          <ng-container *ngFor=\"let msgDetails of description.messages\">\n            <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n          </ng-container>\n        </span>\n        <!-- <span>{{description.message}}</span> -->\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n  <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n    <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n  </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: FrameworkService }, { type: i3$1.MatSnackBar }] });
 
+/* tslint:enable */
 class CreateTermFromFrameworkComponent {
     constructor(dialogRef, data, dialog, frameWorkService, fb, _snackBar) {
         this.dialogRef = dialogRef;
@@ -9108,6 +9268,7 @@ class CreateTermFromFrameworkComponent {
             if (data.categories) {
                 this.formateData(data, this.environment.kcmFrameworkName);
                 this.selectedCardCompThemeData = '';
+                // to do: change getting selectedParentTerms to dynamic
                 if (this.data && this.data.selectedParentTerms) {
                     this.data.selectedParentTerms.forEach((ele) => {
                         if (ele.category === "competency") {
@@ -9132,6 +9293,7 @@ class CreateTermFromFrameworkComponent {
                     name: a.name,
                     description: a.description,
                     config: this.frameWorkService.getConfigOfCategoryConfigByFrameWorkId(a.code, frameworkId),
+                    // children: ([...a.terms, ...localData] || []).map(c => {
                     children: (a.terms || []).map((c) => {
                         const associations = c.associations || [];
                         if (associations.length > 0) {
@@ -9288,6 +9450,7 @@ class CreateTermFromFrameworkComponent {
                                     if (ele.category === 'theme') {
                                         this.allCompetencyTheme.push(ele);
                                         this.filteredallCompetencyTheme.push(ele);
+                                        // to do:  to be check based on reff id
                                         if (this.selectedCardCompThemeData.refId.toLowerCase() === ele.refId.toLowerCase()) {
                                             let formArray = this.competencyForm.get('compThemeFields');
                                             formArray.at(0).get('competencyTheme').patchValue(ele);
@@ -9318,6 +9481,7 @@ class CreateTermFromFrameworkComponent {
         }
     }
     OnThemeSelection(event, _indexValue, optionData) {
+        // if (event.isUserInput || this.data.openMode === 'view') {
         const selectedTheme = event.source.value;
         this.kcmList.forEach((ele) => {
             if (selectedTheme.category === ele.code) {
@@ -9327,6 +9491,7 @@ class CreateTermFromFrameworkComponent {
                             if (themeChild.children && themeChild.children.length) {
                                 optionData['children'] = themeChild.children;
                                 this.filteredallCompetencySubTheme = themeChild.children;
+                                // to do:  to be check based on reff id
                                 let matchedData = [];
                                 if (this.data.childrenData && this.data.childrenData.category === "subtheme") {
                                     matchedData = ___default.intersectionBy(themeChild.children, [this.data.childrenData], 'refId');
@@ -9346,6 +9511,7 @@ class CreateTermFromFrameworkComponent {
                 }
             }
         });
+        // }
     }
     onTermRemove(termData, indexValue) {
         let formArray = this.competencyForm.get('compThemeFields');
@@ -9362,9 +9528,13 @@ class CreateTermFromFrameworkComponent {
         }
     }
     OnSubThemeSelection(_event, _indexValue, _option) {
+        // let formArray = this.competencyForm.get('compThemeFields') as UntypedFormArray;
+        // const compThemeControl = formArray.at(indexValue).get('competencySubTheme') as UntypedFormControl | null
     }
+    // add form
     async multiCreate(form, _data) {
         this.disableMultiCreate = true;
+        // let counterTheme = 0
         let counterSubTheme = 0;
         let parentCategory = {};
         let createdTerms = [];
@@ -9379,6 +9549,7 @@ class CreateTermFromFrameworkComponent {
                 if (localCompArea.associations && localCompArea.associations.length) {
                     delete localCompArea.associations;
                 }
+                // themeFields.forEach(async (objVal, themeIndex) =>
                 for (let [index, objVal] of themeFields.entries()) {
                     parentCategory = {};
                     if (objVal['competencyTheme']) {
@@ -9392,6 +9563,7 @@ class CreateTermFromFrameworkComponent {
                             status: LIVE,
                             refId: value.refId || '',
                             refType: value.refType || '',
+                            // approvalStatus:appConstants.DRAFT,
                             parents: [
                                 { identifier: `${this.data.frameworkId.toLowerCase()}_${this.data.columnInfo.code}` }
                             ],
@@ -9410,9 +9582,11 @@ class CreateTermFromFrameworkComponent {
                             this.frameWorkService.selectionList.delete('competency');
                             parentCategory = requestBody.request.term;
                             createdTerms.push(requestBody.request.term);
+                            // counterTheme++
                             const parentColumn = this.frameWorkService.getPreviousCategory(this.data.columnInfo.code);
                             let parentCol = this.frameWorkService.selectionList.get(parentColumn.code);
                             await this.updateTermAssociationsMultiV2(createdTerms, parentCol);
+                            // // await this.updateTermAssociationsMulti(createdTerms)
                             let data = {
                                 "selected": false,
                                 "category": parentColumn.code,
@@ -9436,6 +9610,7 @@ class CreateTermFromFrameworkComponent {
                         if (value && value.length) {
                             counterSubTheme = 0;
                             createdSubTheme = [];
+                            // value.forEach(async (ele: any) => {
                             for (let ele of value) {
                                 const term = {
                                     code: this.frameWorkService.getUuid(),
@@ -9491,6 +9666,7 @@ class CreateTermFromFrameworkComponent {
     async updateTermAssociationsMultiV2(createdTerms, parentSelectedTerm, _runningIndex, _themFieldsLength) {
         if (createdTerms && createdTerms.length) {
             this.selectedTermArray = [];
+            // let createdTermsCounter = 0
             let createdTermsIdentifiers = [];
             this.selectedTermArray = createdTerms;
             this.selectedTerm = createdTerms[createdTerms.length - 1];
@@ -9516,6 +9692,20 @@ class CreateTermFromFrameworkComponent {
                         }
                     };
                     await this.callUpdateAssociationsV2(counter, parent, reguestBody);
+                    // createdTermsCounter++
+                    // if(createdTermsCounter === this.frameWorkService.selectionList.size) {
+                    // if(runningIndex === themFieldsLength - 1) {
+                    //     this.frameWorkService.selectionList.delete('competency')
+                    //     this.dialogClose({ term: [this.selectedTerm], created: true, multi:true, callUpdate: false })
+                    //     this.disableMultiCreate = false
+                    //     if(createdTerms[0].category === 'theme'){
+                    //     this._snackBar.open(`Competency ${createdTerms[0].category} created successfully.`)
+                    //     }
+                    //     if(createdTerms[0].category === 'subtheme'){
+                    //     this._snackBar.open(`Competency ${createdTerms[0].category} created successfully.`)
+                    //     }
+                    // }
+                    // }
                 }
             }
             else {
@@ -9533,17 +9723,21 @@ class CreateTermFromFrameworkComponent {
                     }
                 };
                 return await this.callUpdateAssociationsV2(counter, parent, reguestBody);
-                this.disableMultiCreate = false;
+                // if(createdTerms[0].category === 'subtheme'){
+                //   this._snackBar.open(`Competency ${createdTerms[0].category} created successfully.`)
+                // }
             }
         }
     }
     async updateTermAssociationsMulti(createdTerms) {
         if (createdTerms && createdTerms.length) {
+            // let createdTermsCounter = 0
             for (let createdTerm of createdTerms) {
                 this.selectedTerm = createdTerm;
                 let associations = [];
                 let temp;
                 let counter = 0;
+                // let localIsExist = false
                 for (const [value] of this.frameWorkService.selectionList) {
                     const parent = value;
                     counter++;
@@ -9558,6 +9752,7 @@ class CreateTermFromFrameworkComponent {
                     else {
                         associations.push({ identifier: this.selectedTerm.identifier });
                         this.isTermExist = false;
+                        // if(createdTermsCounter === (createdTerms.length-1)) {
                         const reguestBody = {
                             request: {
                                 term: {
@@ -9566,8 +9761,10 @@ class CreateTermFromFrameworkComponent {
                             }
                         };
                         await this.callUpdateAssociations(counter, parent, reguestBody);
+                        // }
                     }
                 }
+                // createdTermsCounter++
             }
         }
     }
@@ -9591,7 +9788,17 @@ class CreateTermFromFrameworkComponent {
                         this.updateLocalList(listData, parent, this.selectedTermArray);
                     }
                 });
+                // let selectedCardInfo = this.frameWorkService.selectionList.get(this.data.cardColInfo.code)
+                // this.frameWorkService.currentSelection.next({ type: selectedCardInfo.code, data:selectedCardInfo, cardRef:selectedCardInfo.cardRef, isUpdate: true})
                 if (counter === this.frameWorkService.selectionList.size) {
+                    // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+                    // so term is set from childdata which is received from params in updateData
+                    // const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : {}
+                    // const found = parent.children ? parent.children.find(c=> c.identifier === this.selectedTerm.identifier) : false
+                    // if(!found) {
+                    // parent['children'] = parent && parent.children ?[...parent.children, ...this.selectedTermArray]:this.selectedTermArray
+                    // parent.children ? parent.children.push(this.selectedTerm) : parent['children'] = [this.selectedTerm]
+                    // }
                     this.disableUpdate = false;
                     let returnValue = true;
                     resolve(true);
@@ -9613,6 +9820,10 @@ class CreateTermFromFrameworkComponent {
         return new Promise(async (resolve) => {
             this.frameWorkService.updateTerm(this.data.frameworkId, parent.category, parent.code, reguestBody).subscribe(async () => {
                 if (counter === this.frameWorkService.selectionList.size) {
+                    // this.selectedTerm['associationProperties']['approvalStatus'] = 'Draft';
+                    // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+                    // so term is set from childdata which is received from params in updateData
+                    // const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : {}
                     const found = parent.children ? parent.children.find((c) => c.identifier === this.selectedTerm.identifier) : false;
                     if (!found) {
                         parent.children ? parent.children.push(this.selectedTerm) : parent['children'] = [this.selectedTerm];
@@ -9635,6 +9846,7 @@ class CreateTermFromFrameworkComponent {
     updateTermData(form, data) {
         this.disableUpdate = true;
         const formData = {
+            // use this if you need disabled field values : form.getRawValue()
             ...form.value
         };
         const updateData = {
@@ -9647,10 +9859,12 @@ class CreateTermFromFrameworkComponent {
         let associations = [];
         let temp;
         let counter = 0;
+        // let localIsExist = false
         this.frameWorkService.selectionList.forEach((parent) => {
             counter++;
             temp = parent.children ? parent.children.filter((child) => child.identifier === this.selectedTerm.identifier) : null;
             associations = parent.children ? parent.children.map((c) => {
+                // return { identifier: c.identifier, approvalStatus: c.associationProperties?c.associationProperties.approvalStatus: 'Draft' }
                 return c.identifier ? { identifier: c.identifier } : null;
             }) : [];
             if (temp && temp.length) {
@@ -9658,6 +9872,7 @@ class CreateTermFromFrameworkComponent {
                 return;
             }
             else {
+                // associations.push({ identifier: this.selectedTerm.identifier, approvalStatus: appConstants.DRAFT })
                 if (this.selectedTerm && this.selectedTerm.identifier) {
                     associations.push({ identifier: this.selectedTerm.identifier });
                 }
@@ -9672,6 +9887,9 @@ class CreateTermFromFrameworkComponent {
                 };
                 this.frameWorkService.updateTerm(this.data.frameworkId, parent.category, parent.code, reguestBody).subscribe(() => {
                     if (counter === this.frameWorkService.selectionList.size) {
+                        // this.selectedTerm['associationProperties']['approvalStatus'] = 'Draft';
+                        // this value is for selected term in case of create scenario, in case of edit scenario this won't be avaiable
+                        // so term is set from childdata which is received from params in updateData
                         const value = (this.selectedTerm && this.selectedTerm.identifier) ? this.selectedTerm : (updateData) ? { ...updateData.updateTermData, ...updateData.formData } : {};
                         this.disableUpdate = false;
                         this.dialogClose({ term: { ...value }, created: true });
@@ -9703,9 +9921,11 @@ class CreateTermFromFrameworkComponent {
         let removedExisting = [];
         let createdSubTheme = [];
         let counterSubTheme = 0;
+        // let counterRetireSubTheme = 0
         newlyAdded = ___default.differenceBy(selectedFormData, previousSubThemeData, 'refId');
         removedExisting = ___default.differenceBy(previousSubThemeData, selectedFormData, 'refId');
         if (newlyAdded && newlyAdded.length) {
+            // newlyAdded.forEach(async (val, i) =>{
             for (let val of newlyAdded) {
                 const term = {
                     code: this.frameWorkService.getUuid(),
@@ -9715,6 +9935,7 @@ class CreateTermFromFrameworkComponent {
                     status: LIVE,
                     refId: val.refId,
                     refType: val.refType,
+                    // approvalStatus:appConstants.DRAFT,
                     parents: [
                         { identifier: `${this.data.frameworkId.toLowerCase()}_${this.data.columnInfo.code}` }
                     ],
@@ -9755,8 +9976,10 @@ class CreateTermFromFrameworkComponent {
                 }
             };
             await this.frameWorkService.retireMultipleTerm(this.data.frameworkId, this.data.columnInfo.code, subThemeRequest).toPromise().then(async () => {
+                // counterRetireSubTheme++
                 const parentColumnConfigData = this.frameWorkService.getPreviousCategory(this.data.columnInfo.code);
                 let parentCol = this.frameWorkService.selectionList.get(parentColumnConfigData.code);
+                // let sectionList = this.frameWorkService.selectionList.get(parentColumnConfigData.code)
                 const sectionListchildrenList = ___default.differenceWith(parentCol.children, removedExisting, (a, b) => a.identifier === b.identifier);
                 const sectionListAssociationList = ___default.differenceWith(parentCol.associations, removedExisting, (a, b) => a.identifier === b.identifier);
                 parentCol['children'] = sectionListchildrenList;
@@ -9791,6 +10014,7 @@ class CreateTermFromFrameworkComponent {
                 return false;
             });
         }
+        //
         return result >= 0 ? true : false;
     }
     updateLocalList(item, parent, selectedTermArray, updateType) {
@@ -9798,6 +10022,13 @@ class CreateTermFromFrameworkComponent {
             if (updateType === 'delete') {
                 item.children.forEach((itmData) => {
                     if (itmData.identifier === parent.identifier) {
+                        // let differenceData = []
+                        // if(itmData && itmData.children && itmData.children.length) {
+                        //   differenceData  = _.differenceBy(itmData.children,selectedTermArray, 'identifier');
+                        // } else {
+                        //   differenceData = selectedTermArray
+                        // }
+                        // differenceData = this.selectedTermArray
                         const associationList = ___default.differenceWith(itmData.associations, selectedTermArray, (a, b) => a.identifier === b.identifier);
                         const childrenList = ___default.differenceWith(itmData.children, selectedTermArray, (a, b) => a.identifier === b.identifier);
                         itmData['associations'] = associationList;
@@ -9818,6 +10049,7 @@ class CreateTermFromFrameworkComponent {
                         else {
                             differenceData = selectedTermArray;
                         }
+                        // differenceData = this.selectedTermArray
                         itmData['associations'] = itmData && itmData.associations ? [...itmData.associations, ...differenceData] : differenceData;
                         itmData['children'] = itmData && itmData.children ? [...itmData.children, ...differenceData] : differenceData;
                     }
@@ -9856,19 +10088,20 @@ class CreateTermFromFrameworkComponent {
             this._snackBar.open(`Competency theme delete failed.`);
         }));
     }
+    // getter methods
     get compThemeFields() {
         return this.competencyForm.get('compThemeFields');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: FrameworkService }, { token: i3.UntypedFormBuilder }, { token: i3$1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermFromFrameworkComponent, selector: "lib-create-term-from-framework", ngImport: i0, template: "\n<div class=\"\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n      <div class=\"dialogNew\">\n        <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n            [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n            <mat-icon>more_vert</mat-icon>\n            </button>\n        </div>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <ng-container *ngIf=\"term.category !== 'competency'\">\n                    <div class=\"flex-1 flex-col\">\n                        <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                            {{frameWorkService.getConfig(term.category).labelName}}\n                        </label>\n                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                            <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                [value]=\"term.name\" disabled>\n                        </mat-form-field>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"competencyForm\">\n            <form [formGroup]=\"competencyForm\">\n                <div class=\"title-text\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n                        {{'Select Area'}}\n                    </label>\n                    <div class=\"mt-5\">\n                        <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n                            <mat-radio-button  [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n                             *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n                        </mat-radio-group>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <div class=\"flex flex-end mb-4\" >\n                            <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                                    <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                                    Add more\n                                    <!-- {{data.columnInfo.name}}  -->\n                                </button>\n                            </ng-container>\n                        </div>\n                        <mat-accordion formArrayName=\"compThemeFields\">\n                            <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                            class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\">               \n                             <mat-expansion-panel-header>\n                                    <mat-panel-title>\n                                        {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n                                    </mat-panel-title>\n                                    <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                        <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                        (click)=\"removeCompFields(i)\">\n                                        <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                                        </button>\n                                    </ng-container>\n                                </mat-expansion-panel-header>\n                                <div class=\"input-column\">\n                                    <div class=\"input-wrapper margin-top-s\">\n                                        <div class=\"flex gap-4 \">\n                                            <div class=\"flex-1 flex-col\">\n                                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                                    aria-label=\"First name label\">\n                                                    {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n                                                </label>\n                                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                    <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                        <ng-container >\n                                                            <ng-container >\n                                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\"  [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n                                                                (onSelectionChange)=\"OnThemeSelection($event, i, option)\"  >{{option.name}}\n                                                                <ng-container *ngIf=\"option.refId\">\n                                                                <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n                                                                </ng-container>\n                                                               </mat-option>\n                                                            </ng-container>\n                                                        </ng-container>\n                                                    </mat-select>\n                                                </mat-form-field>\n                                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                            </div>\n                                        </div>\n            \n                                        <div class=\"flex-col mt-2\">\n                                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                                i18n-aria-label aria-label=\"First name label\">\n\n                                                {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n                                                \n                                            </label>\n                                            <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                                    <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                                </mat-select>\n                                            </mat-form-field> -->\n                                            <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n                                            <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n                                                <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n                                                  formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n                                                  <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n                                                  <mat-select-trigger >\n                                                    <mat-chip-listbox>\n                                                        <!-- -->\n                                                       \n                                                      <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n                                                      (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n                                                      [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\"  [removable]=\"data?.openMode ==='view'? false: true\">\n                                                        <span >{{ item.name }}</span>\n                                                        <mat-icon matChipRemove>cancel</mat-icon>\n                                                      </mat-chip>\n                                                    </mat-chip-listbox>\n                                                  </mat-select-trigger>\n                                                  <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n                                                  <!-- <mat-optgroup>\n                                                    <mat-form-field floatLabel=\"never\">\n                                                      <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n                                                        formControlName=\"competencySubTheme\" matInput>\n                                                    </mat-form-field>\n                                                  </mat-optgroup> -->\n                                                  <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n                                                    <div>No results found!</div>\n                                                  </mat-optgroup>\n                                                  <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n                                                  <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n                                                        <mat-option \n                                                        [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n                                                        <ng-container *ngIf=\"option?.refId\">\n                                                         <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n                                                        </ng-container>\n                                                     </mat-option>\n                                                  </ng-container>\n                                \n                                                </mat-select>\n                                                <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n                                                  Please select up to five preferred providers for the request.\n                                                </mat-error> -->\n                                              </mat-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </mat-accordion>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                            <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                                    [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n                                <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                    <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n                                    {{app_strings.create}}\n                                    </button>\n                                </ng-container>\n                                <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n                                    <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.update}}\n                                        </button>\n                                    <!-- </ng-container> -->\n                                    \n                                    <!-- <ng-template #updateBtn>\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.delete}}\n                                        </button>\n                                    </ng-template> -->\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    (click)=\"updateTermData(competencyForm, data)\"\n                                    [disabled]=\"competencyForm?.invalid || disableUpdate\"\n                                    *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                            </ng-container>\n                        </footer>\n                    </ng-container>\n                </form>\n        </ng-container>\n    \n    </div>\n    \n    \n    <!-- Title of the popup -->\n    <ng-template #modalTitle>\n        <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <!-- {{data |json}} -->\n        <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n        </ng-container>\n        <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n            <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <ng-container *ngIf=\"data?.mode === 'edit'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n        </ng-container>\n    </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button  (click)=\"deleteTheme()\"\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>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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: "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: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: "component", type: i18.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CreateTermFromFrameworkComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatDialog }, { token: FrameworkService }, { token: i3.UntypedFormBuilder }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CreateTermFromFrameworkComponent, isStandalone: false, selector: "lib-create-term-from-framework", ngImport: i0, template: "\n<div class=\"\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n      <div class=\"dialogNew\">\n        <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n            [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n            <mat-icon>more_vert</mat-icon>\n            </button>\n        </div>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <ng-container *ngIf=\"term.category !== 'competency'\">\n                    <div class=\"flex-1 flex-col\">\n                        <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                            {{frameWorkService.getConfig(term.category).labelName}}\n                        </label>\n                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                            <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                [value]=\"term.name\" disabled>\n                        </mat-form-field>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"competencyForm\">\n            <form [formGroup]=\"competencyForm\">\n                <div class=\"title-text\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n                        {{'Select Area'}}\n                    </label>\n                    <div class=\"mt-5\">\n                        <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n                            <mat-radio-button  [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n                             *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n                        </mat-radio-group>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <div class=\"flex flex-end mb-4\" >\n                            <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                                    <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                                    Add more\n                                    <!-- {{data.columnInfo.name}}  -->\n                                </button>\n                            </ng-container>\n                        </div>\n                        <mat-accordion formArrayName=\"compThemeFields\">\n                            <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                            class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\">               \n                             <mat-expansion-panel-header>\n                                    <mat-panel-title>\n                                        {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n                                    </mat-panel-title>\n                                    <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                        <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                        (click)=\"removeCompFields(i)\">\n                                        <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                                        </button>\n                                    </ng-container>\n                                </mat-expansion-panel-header>\n                                <div class=\"input-column\">\n                                    <div class=\"input-wrapper margin-top-s\">\n                                        <div class=\"flex gap-4 \">\n                                            <div class=\"flex-1 flex-col\">\n                                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                                    aria-label=\"First name label\">\n                                                    {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n                                                </label>\n                                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                    <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                        <ng-container >\n                                                            <ng-container >\n                                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\"  [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n                                                                (onSelectionChange)=\"OnThemeSelection($event, i, option)\"  >{{option.name}}\n                                                                <ng-container *ngIf=\"option.refId\">\n                                                                <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n                                                                </ng-container>\n                                                               </mat-option>\n                                                            </ng-container>\n                                                        </ng-container>\n                                                    </mat-select>\n                                                </mat-form-field>\n                                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                            </div>\n                                        </div>\n            \n                                        <div class=\"flex-col mt-2\">\n                                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                                i18n-aria-label aria-label=\"First name label\">\n\n                                                {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n                                                \n                                            </label>\n                                            <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                                    <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                                </mat-select>\n                                            </mat-form-field> -->\n                                            <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n                                            <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n                                                <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n                                                  formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n                                                  <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n                                                  <mat-select-trigger >\n                                                    <mat-chip-listbox>\n                                                        <!-- -->\n                                                       \n                                                      <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n                                                      (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n                                                      [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\"  [removable]=\"data?.openMode ==='view'? false: true\">\n                                                        <span >{{ item.name }}</span>\n                                                        <mat-icon matChipRemove>cancel</mat-icon>\n                                                      </mat-chip>\n                                                    </mat-chip-listbox>\n                                                  </mat-select-trigger>\n                                                  <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n                                                  <!-- <mat-optgroup>\n                                                    <mat-form-field floatLabel=\"never\">\n                                                      <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n                                                        formControlName=\"competencySubTheme\" matInput>\n                                                    </mat-form-field>\n                                                  </mat-optgroup> -->\n                                                  <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n                                                    <div>No results found!</div>\n                                                  </mat-optgroup>\n                                                  <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n                                                  <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n                                                        <mat-option \n                                                        [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n                                                        <ng-container *ngIf=\"option?.refId\">\n                                                         <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n                                                        </ng-container>\n                                                     </mat-option>\n                                                  </ng-container>\n                                \n                                                </mat-select>\n                                                <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n                                                  Please select up to five preferred providers for the request.\n                                                </mat-error> -->\n                                              </mat-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </mat-accordion>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                            <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                                    [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n                                <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                    <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n                                    {{app_strings.create}}\n                                    </button>\n                                </ng-container>\n                                <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n                                    <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.update}}\n                                        </button>\n                                    <!-- </ng-container> -->\n                                    \n                                    <!-- <ng-template #updateBtn>\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.delete}}\n                                        </button>\n                                    </ng-template> -->\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    (click)=\"updateTermData(competencyForm, data)\"\n                                    [disabled]=\"competencyForm?.invalid || disableUpdate\"\n                                    *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                            </ng-container>\n                        </footer>\n                    </ng-container>\n                </form>\n        </ng-container>\n    \n    </div>\n    \n    \n    <!-- Title of the popup -->\n    <ng-template #modalTitle>\n        <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <!-- {{data |json}} -->\n        <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n        </ng-container>\n        <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n            <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <ng-container *ngIf=\"data?.mode === 'edit'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n        </ng-container>\n    </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button  (click)=\"deleteTheme()\"\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>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width:1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width:992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width:1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i9.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i14.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i14.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i15.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CreateTermFromFrameworkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-create-term-from-framework', template: "\n<div class=\"\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n      <div class=\"dialogNew\">\n        <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n            [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n            <mat-icon>more_vert</mat-icon>\n            </button>\n        </div>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <ng-container *ngIf=\"term.category !== 'competency'\">\n                    <div class=\"flex-1 flex-col\">\n                        <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                            {{frameWorkService.getConfig(term.category).labelName}}\n                        </label>\n                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                            <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                [value]=\"term.name\" disabled>\n                        </mat-form-field>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"competencyForm\">\n            <form [formGroup]=\"competencyForm\">\n                <div class=\"title-text\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n                        {{'Select Area'}}\n                    </label>\n                    <div class=\"mt-5\">\n                        <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n                            <mat-radio-button  [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n                             *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n                        </mat-radio-group>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <div class=\"flex flex-end mb-4\" >\n                            <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                                    <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                                    Add more\n                                    <!-- {{data.columnInfo.name}}  -->\n                                </button>\n                            </ng-container>\n                        </div>\n                        <mat-accordion formArrayName=\"compThemeFields\">\n                            <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                            class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\">               \n                             <mat-expansion-panel-header>\n                                    <mat-panel-title>\n                                        {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n                                    </mat-panel-title>\n                                    <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                        <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                        (click)=\"removeCompFields(i)\">\n                                        <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                                        </button>\n                                    </ng-container>\n                                </mat-expansion-panel-header>\n                                <div class=\"input-column\">\n                                    <div class=\"input-wrapper margin-top-s\">\n                                        <div class=\"flex gap-4 \">\n                                            <div class=\"flex-1 flex-col\">\n                                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                                    aria-label=\"First name label\">\n                                                    {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n                                                </label>\n                                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                    <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                        <ng-container >\n                                                            <ng-container >\n                                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\"  [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n                                                                (onSelectionChange)=\"OnThemeSelection($event, i, option)\"  >{{option.name}}\n                                                                <ng-container *ngIf=\"option.refId\">\n                                                                <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n                                                                </ng-container>\n                                                               </mat-option>\n                                                            </ng-container>\n                                                        </ng-container>\n                                                    </mat-select>\n                                                </mat-form-field>\n                                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                            </div>\n                                        </div>\n            \n                                        <div class=\"flex-col mt-2\">\n                                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                                i18n-aria-label aria-label=\"First name label\">\n\n                                                {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n                                                \n                                            </label>\n                                            <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                                    <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                                </mat-select>\n                                            </mat-form-field> -->\n                                            <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n                                            <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n                                                <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n                                                  formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n                                                  <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n                                                  <mat-select-trigger >\n                                                    <mat-chip-listbox>\n                                                        <!-- -->\n                                                       \n                                                      <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n                                                      (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n                                                      [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\"  [removable]=\"data?.openMode ==='view'? false: true\">\n                                                        <span >{{ item.name }}</span>\n                                                        <mat-icon matChipRemove>cancel</mat-icon>\n                                                      </mat-chip>\n                                                    </mat-chip-listbox>\n                                                  </mat-select-trigger>\n                                                  <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n                                                  <!-- <mat-optgroup>\n                                                    <mat-form-field floatLabel=\"never\">\n                                                      <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n                                                        formControlName=\"competencySubTheme\" matInput>\n                                                    </mat-form-field>\n                                                  </mat-optgroup> -->\n                                                  <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n                                                    <div>No results found!</div>\n                                                  </mat-optgroup>\n                                                  <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n                                                  <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n                                                        <mat-option \n                                                        [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n                                                        <ng-container *ngIf=\"option?.refId\">\n                                                         <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n                                                        </ng-container>\n                                                     </mat-option>\n                                                  </ng-container>\n                                \n                                                </mat-select>\n                                                <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n                                                  Please select up to five preferred providers for the request.\n                                                </mat-error> -->\n                                              </mat-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </mat-accordion>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                            <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                                    [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n                                <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                    <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n                                    {{app_strings.create}}\n                                    </button>\n                                </ng-container>\n                                <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n                                    <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.update}}\n                                        </button>\n                                    <!-- </ng-container> -->\n                                    \n                                    <!-- <ng-template #updateBtn>\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.delete}}\n                                        </button>\n                                    </ng-template> -->\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    (click)=\"updateTermData(competencyForm, data)\"\n                                    [disabled]=\"competencyForm?.invalid || disableUpdate\"\n                                    *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                            </ng-container>\n                        </footer>\n                    </ng-container>\n                </form>\n        </ng-container>\n    \n    </div>\n    \n    \n    <!-- Title of the popup -->\n    <ng-template #modalTitle>\n        <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <!-- {{data |json}} -->\n        <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n        </ng-container>\n        <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n            <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <ng-container *ngIf=\"data?.mode === 'edit'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n        </ng-container>\n    </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button  (click)=\"deleteTheme()\"\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>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'lib-create-term-from-framework', standalone: false, template: "\n<div class=\"\">\n    <ng-container *ngIf=\"disableMultiCreate\">\n        <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n          <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n          <!-- <p>{{loaderMsg}}</p> -->\n        </div>\n      </ng-container>\n      <div class=\"dialogNew\">\n        <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n            <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n            [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n            <mat-icon>more_vert</mat-icon>\n            </button>\n        </div>\n        <div class=\"flex gap-4\">\n            <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n                <ng-container *ngIf=\"term.category !== 'competency'\">\n                    <div class=\"flex-1 flex-col\">\n                        <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n                            {{frameWorkService.getConfig(term.category).labelName}}\n                        </label>\n                        <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                            <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n                                [value]=\"term.name\" disabled>\n                        </mat-form-field>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n        <div class=\"row-divider\"></div>\n        <ng-container *ngIf=\"competencyForm\">\n            <form [formGroup]=\"competencyForm\">\n                <div class=\"title-text\">\n                    <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n                        {{'Select Area'}}\n                    </label>\n                    <div class=\"mt-5\">\n                        <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n                            <mat-radio-button  [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n                             *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n                        </mat-radio-group>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n                        <div class=\"flex flex-end mb-4\" >\n                            <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n                                    <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n                                    Add more\n                                    <!-- {{data.columnInfo.name}}  -->\n                                </button>\n                            </ng-container>\n                        </div>\n                        <mat-accordion formArrayName=\"compThemeFields\">\n                            <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n                            class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\">               \n                             <mat-expansion-panel-header>\n                                    <mat-panel-title>\n                                        {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n                                    </mat-panel-title>\n                                    <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                        <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n                                        (click)=\"removeCompFields(i)\">\n                                        <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n                                        </button>\n                                    </ng-container>\n                                </mat-expansion-panel-header>\n                                <div class=\"input-column\">\n                                    <div class=\"input-wrapper margin-top-s\">\n                                        <div class=\"flex gap-4 \">\n                                            <div class=\"flex-1 flex-col\">\n                                                <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n                                                    aria-label=\"First name label\">\n                                                    {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n                                                </label>\n                                                <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                    <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n                                                        <ng-container >\n                                                            <ng-container >\n                                                                <mat-option *ngFor=\"let option of filteredallCompetencyTheme\"  [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n                                                                (onSelectionChange)=\"OnThemeSelection($event, i, option)\"  >{{option.name}}\n                                                                <ng-container *ngIf=\"option.refId\">\n                                                                <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n                                                                </ng-container>\n                                                               </mat-option>\n                                                            </ng-container>\n                                                        </ng-container>\n                                                    </mat-select>\n                                                </mat-form-field>\n                                                <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n                                            </div>\n                                        </div>\n            \n                                        <div class=\"flex-col mt-2\">\n                                            <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n                                                i18n=\"First Name label|Label which explains the user to enter first name\"\n                                                i18n-aria-label aria-label=\"First name label\">\n\n                                                {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n                                                \n                                            </label>\n                                            <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n                                                <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n                                                    <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n                                                </mat-select>\n                                            </mat-form-field> -->\n                                            <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n                                            <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n                                                <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n                                                  formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n                                                  <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n                                                  <mat-select-trigger >\n                                                    <mat-chip-listbox>\n                                                        <!-- -->\n                                                       \n                                                      <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n                                                      (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n                                                      [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\"  [removable]=\"data?.openMode ==='view'? false: true\">\n                                                        <span >{{ item.name }}</span>\n                                                        <mat-icon matChipRemove>cancel</mat-icon>\n                                                      </mat-chip>\n                                                    </mat-chip-listbox>\n                                                  </mat-select-trigger>\n                                                  <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n                                                  <!-- <mat-optgroup>\n                                                    <mat-form-field floatLabel=\"never\">\n                                                      <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n                                                        formControlName=\"competencySubTheme\" matInput>\n                                                    </mat-form-field>\n                                                  </mat-optgroup> -->\n                                                  <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n                                                    <div>No results found!</div>\n                                                  </mat-optgroup>\n                                                  <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n                                                  <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n                                                        <mat-option \n                                                        [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n                                                        <ng-container *ngIf=\"option?.refId\">\n                                                         <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n                                                        </ng-container>\n                                                     </mat-option>\n                                                  </ng-container>\n                                \n                                                </mat-select>\n                                                <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n                                                  Please select up to five preferred providers for the request.\n                                                </mat-error> -->\n                                              </mat-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </mat-expansion-panel>\n                        </mat-accordion>\n                        <footer class=\"actions\">\n                            <button mat-raised-button color=\"default\" type=\"reset\"\n                                (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n                            <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n                                    [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n                                <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n                                    <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n                                    {{app_strings.create}}\n                                    </button>\n                                </ng-container>\n                                <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n                                    <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.update}}\n                                        </button>\n                                    <!-- </ng-container> -->\n                                    \n                                    <!-- <ng-template #updateBtn>\n                                        <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                        [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n                                        {{app_strings.delete}}\n                                        </button>\n                                    </ng-template> -->\n                                </ng-container>\n                            </ng-container>\n                            <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n                                <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n                                    (click)=\"updateTermData(competencyForm, data)\"\n                                    [disabled]=\"competencyForm?.invalid || disableUpdate\"\n                                    *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n                            </ng-container>\n                        </footer>\n                    </ng-container>\n                </form>\n        </ng-container>\n    \n    </div>\n    \n    \n    <!-- Title of the popup -->\n    <ng-template #modalTitle>\n        <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <!-- {{data |json}} -->\n        <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n        </ng-container>\n        <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n            <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n        </ng-container> -->\n        <ng-container *ngIf=\"data?.mode === 'edit'\">\n            <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n        </ng-container>\n    </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n    <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n        <button  (click)=\"deleteTheme()\"\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>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width:1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width:992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width:1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i3$1.MatLegacySnackBar }]; } });
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$3.MatDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i3$1.MatSnackBar }] });
 
 class OrgHierarchyAddModalComponent {
     constructor(dialogRef, data, frameworkService, snackbar) {
@@ -9880,6 +10113,7 @@ class OrgHierarchyAddModalComponent {
         this.parentSearchControl = new FormControl('');
         this.selectedOrgsControl = new FormControl([]);
         this.parentSelectedOrgControl = new FormControl('');
+        // Example options - replace with your actual data
         this.orgOptions = [];
         this.filteredOptions = [];
         this.parentFilteredOptions = [];
@@ -9913,10 +10147,13 @@ class OrgHierarchyAddModalComponent {
         }
         const filterValue = searchValue.toLowerCase();
         this.filteredOptions = this.orgOptions.filter(option => option.orgName.toLowerCase().includes(filterValue));
+        // Ensure selected items are preserved in the filtered list
         const selectedIds = this.selectedOrgsControl.value || [];
         if (selectedIds.length > 0) {
+            // Find any selected items that were filtered out
             const missingSelectedOptions = this.orgOptions.filter((option) => selectedIds.includes(option.identifier) &&
                 !this.filteredOptions.some(filtered => filtered.identifier === option.identifier));
+            // Add missing selected items back to filteredOptions
             if (missingSelectedOptions.length > 0) {
                 this.filteredOptions = [...this.filteredOptions, ...missingSelectedOptions];
             }
@@ -9929,11 +10166,12 @@ class OrgHierarchyAddModalComponent {
             const aIsSelected = selectedIds.includes(a.identifier);
             const bIsSelected = selectedIds.includes(b.identifier);
             if (aIsSelected && !bIsSelected) {
-                return -1;
+                return -1; // a comes first (selected items first)
             }
             if (!aIsSelected && bIsSelected) {
-                return 1;
+                return 1; // b comes first (selected items first)
             }
+            // If both are selected or both are not selected, sort alphabetically
             return a.orgName.localeCompare(b.orgName);
         });
     }
@@ -9944,6 +10182,7 @@ class OrgHierarchyAddModalComponent {
     filterParentOptions(searchValue) {
         const originalOptions = this.frameworkData?.categories?.find((v) => v.code === this.data?.previous[this.data.previous.length - 2]?.category)?.terms || [];
         if (!searchValue) {
+            // Reset to all original options when search is empty
             this.parentFilteredOptions = [...originalOptions];
             return;
         }
@@ -10039,7 +10278,10 @@ class OrgHierarchyAddModalComponent {
             event.stopPropagation();
             return false;
         }
+        // For space, we only want to prevent default behavior when in the search input
+        // but allow the event to propagate for selection functionality
         if (event.key === ' ' && event.target instanceof HTMLInputElement) {
+            // Don't prevent propagation, just prevent default to allow typing spaces in search
             event.stopPropagation();
         }
         return true;
@@ -10063,16 +10305,16 @@ class OrgHierarchyAddModalComponent {
     getParentTerms(item) {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FrameworkService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OrgHierarchyAddModalComponent, isStandalone: false, 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'\" disableOptionCentering [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)\" class=\"search-input\" #searchInput>\n                  </div>\n                  <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\"\n                    [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\" [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\n            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'\" disableOptionCentering [disableOptionCentering]=\"true\"\n                (keydown)=\"handleKeydown($event)\" 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)\" class=\"search-input\" #searchInput>\n                  <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\"\n                    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-row class=\"org-clip\" aria-label=\"orgSelection\">\n                <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\"\n                  [removable]=\"true\" (removed)=\"removeOrg(item)\">\n                  {{getNameOfOrg(item)}}\n                  <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n                </mat-chip>\n              </mat-chip-row>\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 mat-stroked-button class=\"btn-common btn-primary\" (click)=\"onSave()\" 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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'sb-cb-tree-org-hierarchy-add-modal', standalone: false, 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'\" disableOptionCentering [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)\" class=\"search-input\" #searchInput>\n                  </div>\n                  <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\"\n                    [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\" [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\n            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'\" disableOptionCentering [disableOptionCentering]=\"true\"\n                (keydown)=\"handleKeydown($event)\" 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)\" class=\"search-input\" #searchInput>\n                  <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\"\n                    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-row class=\"org-clip\" aria-label=\"orgSelection\">\n                <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\"\n                  [removable]=\"true\" (removed)=\"removeOrg(item)\">\n                  {{getNameOfOrg(item)}}\n                  <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n                </mat-chip>\n              </mat-chip-row>\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 mat-stroked-button class=\"btn-common btn-primary\" (click)=\"onSave()\" 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: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: FrameworkService }, { type: i3$1.MatSnackBar }] });
 
 class CategoryEditModuleComponent {
     constructor(fb, dialogRef, data) {
@@ -10089,9 +10331,15 @@ class CategoryEditModuleComponent {
             categoryDescription: [this.data?.columnInfo?.description || '', Validators.maxLength(500)]
         });
     }
+    /**
+     * Close the dialog without saving changes
+     */
     closeDialog() {
         this.dialogRef.close();
     }
+    /**
+     * Save the updated category name and close the dialog
+     */
     saveCategoryName() {
         if (this.categoryForm.valid) {
             const updatedCategory = {
@@ -10107,21 +10355,22 @@ class CategoryEditModuleComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, deps: [{ token: i3.FormBuilder }, { token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryEditModuleComponent, selector: "sb-cb-tree-category-edit-module", ngImport: i0, template: "<div class=\"modal-wrapper\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <h2 class=\"modal-title\">Edit Category</h2>\n    <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Container -->\n  <div class=\"modal-container\">\n    <form [formGroup]=\"categoryForm\">\n        <div class=\"form-group\">\n            <div class=\"static-label required\">Name</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <input matInput formControlName=\"categoryName\" >\n                <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n                Name is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"static-label\">Description</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <textarea matInput formControlName=\"categoryDescription\"></textarea>\n                <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n                Description is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </form>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n    <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CategoryEditModuleComponent, deps: [{ token: i3.FormBuilder }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CategoryEditModuleComponent, isStandalone: false, selector: "sb-cb-tree-category-edit-module", ngImport: i0, template: "<div class=\"modal-wrapper\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <h2 class=\"modal-title\">Edit Category</h2>\n    <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Container -->\n  <div class=\"modal-container\">\n    <form [formGroup]=\"categoryForm\">\n        <div class=\"form-group\">\n            <div class=\"static-label required\">Name</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <input matInput formControlName=\"categoryName\" >\n                <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n                Name is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"static-label\">Description</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <textarea matInput formControlName=\"categoryDescription\"></textarea>\n                <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n                Description is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </form>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n    <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sb-cb-tree-category-edit-module', template: "<div class=\"modal-wrapper\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <h2 class=\"modal-title\">Edit Category</h2>\n    <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Container -->\n  <div class=\"modal-container\">\n    <form [formGroup]=\"categoryForm\">\n        <div class=\"form-group\">\n            <div class=\"static-label required\">Name</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <input matInput formControlName=\"categoryName\" >\n                <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n                Name is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"static-label\">Description</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <textarea matInput formControlName=\"categoryDescription\"></textarea>\n                <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n                Description is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </form>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n    <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3.FormBuilder }, { type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
+            args: [{ selector: 'sb-cb-tree-category-edit-module', standalone: false, template: "<div class=\"modal-wrapper\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <h2 class=\"modal-title\">Edit Category</h2>\n    <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Container -->\n  <div class=\"modal-container\">\n    <form [formGroup]=\"categoryForm\">\n        <div class=\"form-group\">\n            <div class=\"static-label required\">Name</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <input matInput formControlName=\"categoryName\" >\n                <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n                Name is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"static-label\">Description</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <textarea matInput formControlName=\"categoryDescription\"></textarea>\n                <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n                Description is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </form>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n    <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"] }]
+        }], ctorParameters: () => [{ type: i3.FormBuilder }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_LEGACY_DIALOG_DATA]
-                }] }]; } });
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
 
+/* eslint-disable */
 class ConnectorService {
     constructor() {
         this.connectorMap = {};
-        this.containerSelector = '#treeViewContainer';
+        this.containerSelector = '#treeViewContainer'; // You might need to adjust this selector
     }
     _drawLine(source, target, options = defaultConfig, sourceContainerId = undefined, targetContainerId = undefined) {
         const _options = { ...defaultConfig, ...options };
@@ -10142,6 +10391,7 @@ class ConnectorService {
                                 tempLine && tempLine.position();
                             }
                             catch (e) {
+                                // Error handling
                             }
                         }, true);
                     }
@@ -10154,6 +10404,7 @@ class ConnectorService {
                                 tempLine && tempLine.position();
                             }
                             catch (e) {
+                                // Error handling
                             }
                         }, true);
                     }
@@ -10166,6 +10417,7 @@ class ConnectorService {
         }
     }
     renderLine(source, target, options) {
+        // Find or create the container element
         const treeViewComponent = document.querySelector(this.containerSelector);
         if (!treeViewComponent) {
             return {
@@ -10178,30 +10430,35 @@ class ConnectorService {
                 remove: () => { }
             };
         }
+        // Create or get container for the SVG
         let container = treeViewComponent.querySelector('#leader-line-container');
         if (!container) {
+            // Create a wrapper container to control the overflow at the top
             let overflowWrapper = document.createElement('div');
             overflowWrapper.id = 'leader-line-overflow-wrapper';
             overflowWrapper.style.position = 'absolute';
-            overflowWrapper.style.top = '80px';
+            overflowWrapper.style.top = '80px'; // Same top position
             overflowWrapper.style.bottom = '0';
             overflowWrapper.style.left = '0';
             overflowWrapper.style.right = '0';
-            overflowWrapper.style.overflow = 'hidden';
-            overflowWrapper.style.pointerEvents = 'none';
+            overflowWrapper.style.overflow = 'hidden'; // Hide anything above this container
+            overflowWrapper.style.pointerEvents = 'none'; // Allow clicks to pass through
+            // Original container remains the same but positioned at top:0 within the wrapper
             container = document.createElement('div');
             container.id = 'leader-line-container';
             container.style.position = 'absolute';
-            container.style.top = '0';
+            container.style.top = '0'; // Changed to 0 as it's now relative to wrapper
             container.style.bottom = '0';
             container.style.left = '0';
             container.style.right = '0';
             container.style.width = '100%';
             container.style.height = '100%';
+            // Add resize observer to dynamically adjust container width
             const resizeObserver = new ResizeObserver(entries => {
                 for (const entry of entries) {
                     if (entry.target === treeViewComponent) {
                         container.style.width = `${entry.contentRect.width}px`;
+                        // Reposition all lines when container resizes
                         if (this.connectorMap) {
                             Object.values(this.connectorMap).forEach((connector) => {
                                 if (connector && connector.lines) {
@@ -10216,16 +10473,22 @@ class ConnectorService {
                     }
                 }
             });
+            // Start observing the treeViewComponent
             resizeObserver.observe(treeViewComponent);
+            // Also listen for scroll events to reposition lines
             treeViewComponent.addEventListener('scroll', () => {
+                // Update container dimensions based on visible area
                 overflowWrapper.style.width = `${treeViewComponent.scrollWidth}px`;
                 overflowWrapper.style.height = `${treeViewComponent.scrollHeight}px`;
+                // Reposition all active lines
                 this.repositionAllLines();
             });
             overflowWrapper.appendChild(container);
             treeViewComponent.appendChild(overflowWrapper);
         }
+        // Store container reference for access in other methods
         this.elmWrapper = container;
+        // Get the source and target elements
         let sourceElement = source;
         let targetElement;
         if (target.targetType === 'id') {
@@ -10234,6 +10497,7 @@ class ConnectorService {
         else {
             targetElement = target.target;
         }
+        // Ensure both elements exist
         if (!sourceElement || !targetElement) {
             return {
                 source: null,
@@ -10245,7 +10509,9 @@ class ConnectorService {
                 remove: () => { }
             };
         }
+        // Create a unique ID for the SVG
         const svgId = 'd3-line-' + Math.random().toString(36).substr(2, 9);
+        // Create SVG element
         const svg = d3.select(container)
             .append('svg')
             .attr('id', svgId)
@@ -10257,27 +10523,38 @@ class ConnectorService {
             .style('height', '100%')
             .style('pointer-events', 'none')
             .style('overflow', 'visible');
+        // Calculate positions
         const sourceRect = sourceElement.getBoundingClientRect();
         const targetRect = targetElement.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
+        // Determine edge connection points - always right to left
         let sourceX, sourceY, targetX, targetY;
+        // Source - always connect from the right edge
         sourceX = sourceRect.right - containerRect.left;
         sourceY = sourceRect.top + (sourceRect.height / 2) - containerRect.top;
+        // Target - always connect to the left edge
         targetX = targetRect.left - containerRect.left;
         targetY = targetRect.top + (targetRect.height / 2) - containerRect.top;
+        // Create line with initial opacity 1 (visible immediately)
+        // Instead of a straight line, create a grid line with right angles
         const path = svg.append('path')
             .attr('d', createGridPath(sourceX, sourceY, targetX, targetY))
-            .style('stroke', '#000')
+            .style('stroke', '#000') // Darker color for better visibility
             .style('stroke-width', options.size || 2)
             .style('fill', 'none')
-            .style('opacity', 1)
-            .style('stroke-linejoin', 'round')
-            .style('stroke-dasharray', options.dashed ? '5,5' : 'none');
+            .style('opacity', 1) // Start visible
+            .style('stroke-linejoin', 'round') // Round corners for a smoother look
+            .style('stroke-dasharray', options.dashed ? '5,5' : 'none'); // Add dashed style if specified
+        // Helper function to create a grid path
         function createGridPath(x1, y1, x2, y2) {
+            // Calculate the midpoint on the x-axis
             const midX = x1 + (x2 - x1) / 2;
+            // Create a path with 3 segments (horizontal, vertical, horizontal)
             return `M ${x1} ${y1} L ${midX} ${y1} L ${midX} ${y2} L ${x2} ${y2}`;
         }
+        // Define markers (disk at start and arrow at end)
         const defs = svg.append('defs');
+        // Add start marker (disk/circle)
         if (options.startPlug === 'disc' || options.startPlug !== false) {
             defs.append('marker')
                 .attr('id', `start-circle-${svgId}`)
@@ -10294,6 +10571,7 @@ class ConnectorService {
                 .style('fill', options.color || '#333');
             path.attr('marker-start', `url(#start-circle-${svgId})`);
         }
+        // Add end marker (arrow)
         if (options.endPlug === 'arrow' || options.endPlug !== false) {
             defs.append('marker')
                 .attr('id', `arrowhead-${svgId}`)
@@ -10308,27 +10586,36 @@ class ConnectorService {
                 .style('fill', options.color || '#333');
             path.attr('marker-end', `url(#arrowhead-${svgId})`);
         }
+        // Create the D3Line object with API similar to LeaderLine
         const d3Line = {
             source: sourceElement,
             target: targetElement,
             path: path,
             svg: svg,
+            // Position method to update line coordinates
             position: function () {
+                // Get updated positions
                 const updatedSourceRect = sourceElement.getBoundingClientRect();
                 const updatedTargetRect = targetElement.getBoundingClientRect();
                 const updatedContainerRect = container.getBoundingClientRect();
+                // Source - always connect from the right edge
                 const updatedSourceX = updatedSourceRect.right - updatedContainerRect.left;
                 const updatedSourceY = updatedSourceRect.top + (updatedSourceRect.height / 2) - updatedContainerRect.top;
+                // Target - always connect to the left edge
                 const updatedTargetX = updatedTargetRect.left - updatedContainerRect.left;
                 const updatedTargetY = updatedTargetRect.top + (updatedTargetRect.height / 2) - updatedContainerRect.top;
+                // Update path with grid path
                 const midX = updatedSourceX + (updatedTargetX - updatedSourceX) / 2;
                 path.attr('d', `M ${updatedSourceX} ${updatedSourceY} L ${midX} ${updatedSourceY} L ${midX} ${updatedTargetY} L ${updatedTargetX} ${updatedTargetY}`)
                     .style('stroke-dasharray', options.dashed ? '5,5' : 'none')
+                    // Ensure markers are preserved during repositioning
                     .attr('marker-start', options.startPlug !== false ? `url(#start-circle-${svgId})` : null)
                     .attr('marker-end', options.endPlug !== false ? `url(#arrowhead-${svgId})` : null);
             },
+            // Show method with animation option
             show: function (animation = '') {
                 if (animation === 'draw') {
+                    // Ensure the path has a node before calculating total length
                     const pathNode = path.node();
                     if (!pathNode)
                         return;
@@ -10345,10 +10632,12 @@ class ConnectorService {
                     path.style('opacity', 1);
                 }
             },
+            // Remove method
             remove: function () {
                 svg.remove();
             }
         };
+        // Immediately call show to make the line visible
         d3Line.show(options.animation);
         return d3Line;
     }
@@ -10360,6 +10649,7 @@ class ConnectorService {
             return;
         this.elmWrapper.style.transform = 'none';
         var rectWrapper = this.elmWrapper.getBoundingClientRect();
+        // Move to the origin of coordinates as the document
         this.elmWrapper.style.transform = 'translate(' +
             ((rectWrapper.left + window.pageXOffset) * -1) + 'px, ' +
             ((rectWrapper.top + window.pageYOffset) * -1) + 'px)';
@@ -10368,6 +10658,7 @@ class ConnectorService {
     removeAllLines() {
         if (this.connectorMap) {
             for (const key in this.connectorMap) {
+                // Remove all n-1 lines and keep only current selection, also clear n+1 lines
                 if (this.connectorMap[key] && this.connectorMap[key].lines && this.connectorMap[key].lines.length > 0) {
                     const lines = this.connectorMap[key].lines;
                     lines.forEach(async (element, index) => {
@@ -10378,6 +10669,7 @@ class ConnectorService {
                 }
             }
         }
+        // to reset connector map after clearing all the lines
         this.updateConnectorsMap({});
     }
     repositionAllLines() {
@@ -10393,16 +10685,18 @@ class ConnectorService {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConnectorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConnectorService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class TermCardComponent {
     set data(value) {
         this._data = value;
+        //  if(this._data)
+        //    this.createTimeline(this._data[0].id)
         this._data.children.highlight = false;
     }
     get data() {
@@ -10438,6 +10732,7 @@ class TermCardComponent {
             this.frameworkService.cardClkData = data;
             this.frameworkService.CurrentCardClk.next(data.category);
         }
+        // this.data.selected = true
         if (this.frameworkService.isLastColumn(this.data.category)) {
             return;
         }
@@ -10520,6 +10815,18 @@ class TermCardComponent {
             if (!res) {
                 return;
             }
+            // if (res && res.created) {
+            //   this.showPublish = true
+            // }
+            // this.loaded[res.term.category] = false
+            // // wait
+            // const parentColumn = this.frameworkService.getPreviousCategory(res.term.category)
+            // res.parent = null
+            // if (parentColumn) {
+            //   res.parent = this.frameworkService.selectionList.get(parentColumn.code)
+            //   res.parent.children? res.parent.children.push(res.term) :res.parent['children'] = [res.term]
+            // }
+            // this.updateFinalList({ selectedTerm: res.term, isSelected: false, parentData: res.parent, colIndex:colIndex })
         });
     }
     edit(data, childrenData, index, cardRef) {
@@ -10528,6 +10835,29 @@ class TermCardComponent {
         const nexColInfo = this.getNextCat(data);
         const nextCat = nexColInfo || data.columnInfo;
         if (nextCat && this.environment && this.environment.frameworkType === 'MDO_DESIGNATION') {
+            // const nextNextCat = this.frameworkService.getNextCategory(nextCat.code)
+            // const selectedTerms = this.frameworkService.getPreviousSelectedTerms(nextCat.code)
+            // const colInfo = Array.from(this.frameworkService.list.values()).filter(l => l.code === nextCat.code )
+            // let nextColInfo = []
+            // if(nextNextCat && nextNextCat.code) {
+            //   nextColInfo = Array.from(this.frameworkService.list.values()).filter(l => l.code === nextNextCat.code )
+            // }
+            //   dialog = this.dialog.open(CreateTermFromFrameworkComponent, {
+            //     data: {
+            //       mode:'multi-create',
+            //       openMode: 'edit',
+            //       cardColInfo: this.data.columnInfo,
+            //       columnInfo: colInfo && colInfo.length ? colInfo[0] : [],
+            //       nextColInfo: nextColInfo && nextColInfo.length ? nextColInfo[0] : [],
+            //       frameworkId: this.frameworkService.getFrameworkId(),
+            //       selectedparents: this.heightLighted,
+            //       colIndex: nextCat.index,
+            //       childrenData: data.children,
+            //       selectedParentTerms: selectedTerms
+            //     },
+            //     width: '800px',
+            //     panelClass: 'custom-dialog-container'
+            //   })
             this.create(data, 'edit');
         }
         else {
@@ -10550,6 +10880,14 @@ class TermCardComponent {
             if (!res) {
                 return;
             }
+            // const responseData = {
+            //   res,
+            //   index: index.index,
+            //   data,
+            //   type: 'update',
+            //   cardRef: cardRef
+            // }
+            // this.frameworkService.updateAfterAddOrEditSubject(responseData)
             setTimeout(() => {
                 window.dispatchEvent(new Event('resize'));
             }, 100);
@@ -10698,24 +11036,27 @@ class TermCardComponent {
     openDialog() {
         this.dialog.open(this.dialogTemplate, {
             width: '500px',
+            // Optional configuration
             disableClose: true,
-            data: {}
+            data: { /* Any data you want to pass to the dialog */}
         });
     }
     closeModal() {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TermCardComponent, deps: [{ token: FrameworkService }, { token: LocalConnectionService }, { token: ApprovalService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TermCardComponent, isStandalone: false, 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:-moz-fit-content;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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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"] }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { dialogTemplate: [{
+            args: [{ selector: 'lib-term-card', standalone: false, 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:-moz-fit-content;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: () => [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatDialog }], propDecorators: { dialogTemplate: [{
                 type: ViewChild,
                 args: ['dialogTemplate']
             }], enableThreeDots: [{
                 type: Input
+            }], checkIfChildOrg: [{
+                type: Input
             }], data: [{
                 type: Input
             }], isSelected: [{
@@ -10766,6 +11107,7 @@ class TreeColumnViewComponent {
                             }
                         });
                     });
+                    // this.termshafall = [...this.termshafall]
                     this.column.children.forEach((tr, _i) => {
                         if (!this.isExists(tr)) {
                             this.termshafall.push(tr);
@@ -10780,6 +11122,9 @@ class TreeColumnViewComponent {
             });
         }
         this.connectorMapping = this.connectorService.connectorMap;
+        // this.frameworkService.isDataUpdated.subscribe(() => {
+        //   this.ngOnInit()
+        // })
     }
     isExists(e) {
         let temp;
@@ -10843,11 +11188,15 @@ class TreeColumnViewComponent {
                     }
                     if (e.type === 'update') {
                         if (this.column.code === next.code && e.type === 'update') {
+                            // this.column = this.frameworkService.list.get(e.action)
                             const selectedParent = this.frameworkService.getPreviousCategory(e.action);
                             const selectedParentData = this.frameworkService.list.get(selectedParent.code);
                             const selectedParentCardRef = this.frameworkService.selectionList.get(selectedParent.code) &&
                                 this.frameworkService.selectionList.get(selectedParent.code).cardRef;
                             if (selectedParent && selectedParentData && selectedParentData.children && selectedParentData.children.length > 0) {
+                                // this.insertUpdateHandler(e, next, 'update')
+                                // this.column = this.frameworkService.list.get(e.action)
+                                // this.column = this.frameworkService.list.get()
                                 this.frameworkService.currentSelection.next({ type: selectedParent.code, data: selectedParentData.children[0], cardRef: selectedParentCardRef, isUpdate: true });
                             }
                         }
@@ -10860,17 +11209,21 @@ class TreeColumnViewComponent {
         const back = this.frameworkService.getPreviousCategory(this.column.code);
         const localTerms = [];
         this.frameworkService.getLocalTermsByCategory(this.column.code).forEach(f => {
-            const selectedParent = back ? this.frameworkService.selectionList.get(back.code) : null;
+            const selectedParent = back ? this.frameworkService.selectionList.get(back.code) : null; //can use current
             if (selectedParent && ((f.parent.code === selectedParent.code) || (f.parent.identifier && (f.parent.identifier === selectedParent.identifier)))) {
                 localTerms.push(f.term);
             }
         });
         if (!isUpdate) {
+            // get last parent and filter Above
             if (e && e.data) {
                 this.columnData = this.transform([...localTerms, ...(e.data.children || [])])
                     .filter((x) => {
                     return x.category == this.column.code;
                 }).map((mer) => {
+                    //**read local children for next */
+                    // const nextChildren = this.frameworkService.getLocalTermsByParent(this.column.code)
+                    /**reset Next level children */
                     this.column.children = this.column.children.map((col) => { col.selected = false; return col; });
                     mer.selected = false;
                     mer.children = ([...this.column.children.filter((x) => { return x.code === mer.code; }).map((a) => a.children)].shift() || []);
@@ -10884,13 +11237,35 @@ class TreeColumnViewComponent {
             else {
                 this.cardsCount.emit({ category: this.column.code, count: 0 });
             }
+            // this.updateTerms()
         }
     }
     updateSelection1(_data) {
     }
     updateSelection(_selection) {
+        // if(this.column.code==='medium'){
+        // }
+        // if (selection.element.category === this.column.code) {
+        //   this.updateTaxonomyTerm.emit({ isSelected: selection.isSelected, selectedTerm: selection.element })
+        // }
+        // this.column.children = this.column.children.map(col => {
+        //   if (col.code === selection.element.code) {
+        //     col.selected = true
+        //   } else {
+        //     col.selected = false
+        //   }
+        //   return col
+        // })
     }
     setColumnItems() {
+        // const selected = this.column.children.filter(f => { return f.selected })
+        // if (selected.length > 0) {
+        //   const data = this.columnData.map(cd => {
+        //     cd.selected = this.column.children.filter(f => { return cd.identifier === f.identifier }).map(s => s.selected)[0]
+        //     return cd
+        //   })
+        //   return data
+        // } else {
         let localSearchValue = this.searchValue.value && this.searchValue.value.toLowerCase() || '';
         let filteredColumnData = [];
         this.columnItems = [];
@@ -10909,6 +11284,7 @@ class TreeColumnViewComponent {
         }
         this.filteredColumnItems = filteredColumnData;
         this.columnItems = filteredColumnData ? filteredColumnData.slice(this.startIndex, this.currentLastIndex) : [];
+        // }
     }
     transform(value, sortBy = 'timeStamp') {
         if (!sortBy) {
@@ -10962,6 +11338,11 @@ class TreeColumnViewComponent {
     setConnectors(elementClicked, columnItem, mode) {
         this.removeConnectors(elementClicked, 'box' + (this.column.index - 1), this.column.index - 1);
         if (mode === 'ALL') {
+            // let tempconnectorMapping = {}
+            // this.connectorService.updateConnectorsMap(tempconnectorMapping)
+            // {
+            //   ['column' + (this.column.index- 1)]: ''
+            // }
             const ids = columnItem.map((_c, i) => {
                 return this.column.code + 'Card' + (i + 1);
             });
@@ -10983,6 +11364,7 @@ class TreeColumnViewComponent {
     removeConnectors(currentElement, prevCol, currentIndex) {
         if (this.connectorMapping) {
             for (const key in this.connectorMapping) {
+                // Remove all n-1 lines and keep only current selection, also clear n+1 lines
                 if (this.connectorMapping[key] && this.connectorMapping[key].lines && this.connectorMapping[key].lines.length > 0) {
                     const lines = this.connectorMapping[key].lines;
                     lines.forEach(async (element, index) => {
@@ -10993,6 +11375,7 @@ class TreeColumnViewComponent {
                     });
                     this.connectorMapping[key].lines = lines;
                 }
+                // remove all n+2 lines, if clicks previous columns and tree was already drilled down
                 let count = currentIndex + 2;
                 let nextCol = `box${count}`;
                 if (this.connectorMapping[nextCol] && this.connectorMapping[nextCol].lines && this.connectorMapping[nextCol].lines.length > 0) {
@@ -11039,6 +11422,7 @@ class TreeColumnViewComponent {
             if (firstListItem[1] && firstListItem[1].children && firstListItem[1].children.length) {
                 const firstTerm = firstListItem[1].children[0];
                 const cardRef = document.getElementById(firstTerm.name);
+                // this.categoryList = []
                 firstTerm.selected = true;
                 this.frameworkService.cardClkData = firstTerm;
                 this.frameworkService.CurrentCardClk.next(firstTerm.category);
@@ -11046,18 +11430,20 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", type: TreeColumnViewComponent, isStandalone: false, 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{-webkit-appearance:none;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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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"] }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }, { type: ConnectorService }, { type: ApprovalService }]; }, propDecorators: { column: [{
+            args: [{ selector: 'lib-tree-column-view', standalone: false, 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{-webkit-appearance:none;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: () => [{ type: FrameworkService }, { type: ConnectorService }, { type: ApprovalService }], propDecorators: { column: [{
                 type: Input
             }], containerId: [{
                 type: Input
             }], isChildOrg: [{
                 type: Input
+            }], childOrg: [{
+                type: Input
             }], updateTaxonomyTerm: [{
                 type: Output
             }], updateTermList: [{
@@ -11126,6 +11512,7 @@ class TreeViewComponent {
             });
             this.isLoading = false;
             setTimeout(() => {
+                //  this.drawHeaderLine(res.result.framework.categories.length);
                 this.makeFirstTermSelected();
             }, 500);
         }, (err) => {
@@ -11145,18 +11532,31 @@ class TreeViewComponent {
             res.term = res.term[0];
         }
         this.loaded[res.term.category] = false;
+        // wait
         const parentColumn = this.frameworkService.getPreviousCategory(res.term.category);
         res.parent = null;
         if (parentColumn) {
             res.parent = this.frameworkService.selectionList.get(parentColumn.code);
             if (resData.type === 'update') {
                 res.parent.children[res.parent.children.findIndex((el) => el.identifier === res.term.identifier)] = res.term;
+                // this.frameworkService.list.get(res.parent.category).children = [...res.parent.children]
+                // this.frameworkService.currentSelection.next({ type: res.term.category, data: res.term.children, cardRef:resData.cardRef })
+                // this.updateSelection(res.term.category, res.term.code);
+                // this.updateSelection(res.parent.category, res.parent.code);
+                // setTimeout(() => {
+                //   this.frameworkService.currentSelection.next({ type: res.term.category, data: res.term.children, cardRef:resData.cardRef })
+                // }, 100);
+                // this.updateFinalList({ selectedTerm: res.term, isSelected: true, parentData: res.parent, colIndex:resData.index })
                 this.loaded[res.term.category] = true;
                 res.term.selected = false;
                 this.frameworkService.selectionList.delete(res.term.category);
                 this.frameworkService.insertUpdateDeleteNotifier.next({ action: res.term.category, type: 'update', data: res.term });
                 this.updateFinalList({ selectedTerm: res.term, isSelected: true, parentData: res.parent, colIndex: resData.index }, 'update');
                 res.term.selected = true;
+                // const next = this.frameworkService.getNextCategory(res.term.category)
+                //   if (next && next.code) {
+                //     this.frameworkService.selectionList.delete(next.code)
+                //   }
             }
             else {
                 if (!res.multi) {
@@ -11172,6 +11572,7 @@ class TreeViewComponent {
             if (firstListItem[1] && firstListItem[1].children && firstListItem[1].children.length) {
                 const firstTerm = firstListItem[1].children[0];
                 const cardRef = document.getElementById(firstTerm.name);
+                // this.categoryList = []
                 firstTerm.selected = true;
                 this.frameworkService.cardClkData = firstTerm;
                 this.frameworkService.CurrentCardClk.next(firstTerm.category);
@@ -11200,13 +11601,16 @@ class TreeViewComponent {
             });
         }
     }
+    //need to refactor at heigh level
     updateFinalList(data, type) {
         if (data.isSelected) {
+            // data.selectedTerm.selected = data.isSelected
             this.frameworkService.selectionList.set(data.selectedTerm.category, data.selectedTerm);
             const next = this.frameworkService.getNextCategory(data.selectedTerm.category);
             if (next && next.code) {
                 this.frameworkService.selectionList.delete(next.code);
             }
+            // notify next
             this.frameworkService.insertUpdateDeleteNotifier.next({ action: data.selectedTerm.category, type: type ? type : 'select', data: data.selectedTerm });
         }
         if (data.colIndex === 0 && !data.isSelected) {
@@ -11217,12 +11621,17 @@ class TreeViewComponent {
         }
         setTimeout(() => {
             this.loaded[data.selectedTerm.category] = true;
+            // if(type && type === 'update'){
+            //   this.frameworkService.selectionList.delete(data.selectedTerm.category);
+            //   this.frameworkService.currentSelection.next({ type: data.parentData.category, data: data.parentData.children })
+            // }
         }, 100);
     }
     isEnabled(columnCode) {
         return !!this.frameworkService.selectionList.get(columnCode);
     }
     isEnableds() {
+        //  return this.frameworkService.cardClkData
         if (this.frameworkService.CurrentCardClk) {
             this.frameworkService.CurrentCardClk.subscribe((item) => {
                 const dataCode = this.frameworkService.getNextCategory(item);
@@ -11235,6 +11644,13 @@ class TreeViewComponent {
             });
         }
     }
+    // getbtnEnableFn(_item: any) {
+    //   const allSelectedTerm: any = this.frameworkService.getAllSelectedTerms()
+    //   if (allSelectedTerm && allSelectedTerm.length && allSelectedTerm.filter((t: any) => t.category === _item.code).length > 0) {
+    //     return true
+    //   }
+    //   return false
+    // }
     openCreateTermDialog(column, colIndex) {
         if (!this.isEnabled(column.code)) {
             const nextCat = column.code;
@@ -11251,11 +11667,13 @@ class TreeViewComponent {
                     dialog = this.dialog.open(CreateTermFromFrameworkComponent, {
                         data: {
                             mode: 'multi-create',
+                            // cardColInfo: this.data.columnInfo,
                             columnInfo: colInfo && colInfo.length ? colInfo[0] : [],
                             nextColInfo: nextColInfo && nextColInfo.length ? nextColInfo[0] : [],
                             frameworkId: this.frameworkService.getFrameworkId(),
                             selectedparents: this.heightLighted,
                             colIndex: nextCat.index,
+                            // childrenData: data.children,
                             selectedParentTerms: selectedTerms
                         },
                         width: '800px',
@@ -11265,12 +11683,21 @@ class TreeViewComponent {
                 }
                 else {
                     dialog = this.dialog.open(CreateTermComponent, {
+                        // data: {
+                        //   mode:'create',
+                        //   columnInfo: column,
+                        //   frameworkId: this.frameworkService.getFrameworkId(),
+                        //   selectedparents: this.heightLighted,
+                        //   colIndex: colIndex,
+                        //   selectedParentTerms: selectedTerms
+                        // },
                         data: {
                             mode: 'multi-create',
                             columnInfo: colInfo && colInfo.length ? colInfo[0] : [],
                             frameworkId: this.frameworkService.getFrameworkId(),
                             selectedparents: this.heightLighted,
                             colIndex: nextCat.index,
+                            // childrenData: data.children,
                             selectedParentTerms: selectedTerms
                         },
                         width: '800px',
@@ -11296,6 +11723,7 @@ class TreeViewComponent {
                         this.frameworkService.updateAfterAddOrEditSubject(responseData);
                     }
                     this.loaded[res.term.category] = false;
+                    // wait
                     const parentColumn = this.frameworkService.getPreviousCategory(res.term[0].category);
                     res.parent = null;
                     if (parentColumn) {
@@ -11366,6 +11794,7 @@ class TreeViewComponent {
         const dialog = this.dialog.open(ConnectorComponent, {
             data: {},
             width: '90%',
+            // panelClass: 'custom-dialog-container'
         });
         dialog.afterClosed().subscribe((res) => {
             if ((res.source === 'online' && res.data.endpoint) || (res.source === 'offline')) {
@@ -11400,20 +11829,26 @@ class TreeViewComponent {
         this.categoryList.push(event);
     }
     getCount(code) {
+        // Get all previous categories to determine if they have selections
         const allCategories = Array.from(this.frameworkService.list.values());
         const currentCategoryIndex = allCategories.findIndex(cat => cat.code === code);
+        // Check if all previous categories have selected terms
         for (let i = 0; i < currentCategoryIndex; i++) {
             const prevCategoryCode = allCategories[i].code;
             const hasPrevSelection = this.frameworkService.selectionList.has(prevCategoryCode);
+            // If any previous category doesn't have a selection, return 0
             if (!hasPrevSelection) {
                 return 0;
             }
         }
+        // Now we can calculate the actual count since all previous levels are selected
         let count = 0;
+        // Check if there's a selected term for parent category that has children for this category
         const prevCategory = this.frameworkService.getPreviousCategory(code);
         if (prevCategory) {
             const prevSelectedTerm = this.frameworkService.selectionList.get(prevCategory.code);
             if (prevSelectedTerm) {
+                // If we have a selected parent term, count its children for this category
                 if (prevSelectedTerm.children && prevSelectedTerm.children.length > 0) {
                     count = prevSelectedTerm.children.filter((child) => !child.isDeleted && child.status !== 'Retired' &&
                         (child.category === code || (child.associations &&
@@ -11421,8 +11856,10 @@ class TreeViewComponent {
                     return count;
                 }
             }
+            // If no selection exists for the parent, don't show counts
             return 0;
         }
+        // If this is the first level, we can show all terms
         const categoryData = this.frameworkService.list.get(code);
         if (categoryData && categoryData.children) {
             count = categoryData.children.filter((child) => !child.isDeleted && child.status !== 'Retired').length;
@@ -11461,6 +11898,10 @@ class TreeViewComponent {
     }
     ngOnDestroy() {
         this.frameworkService.removeOldLine();
+        // this.environment = null
+        // this.frameworkService.resetAndFresh()
+        // this.connectorSvc.removeAllLines()
+        // this.connectorSvc.updateConnectorsMap({})
     }
     getNextCat(data) {
         if (data && data.code) {
@@ -11470,13 +11911,16 @@ class TreeViewComponent {
         return null;
     }
     isCurrentOrNextTerm(_column, index) {
+        // If there's no current selection, only enable the first column
         if (!this.frameworkService.currentSelection.value) {
             return index === 0;
         }
+        // Get the current selected category from the currentSelection
         const currentCategory = this.frameworkService.currentSelection.value.type;
         if (!currentCategory) {
             return index === 0;
         }
+        // Find the index of the current active column
         let currentIndex = -1;
         for (let i = 0; i < this.list.length; i++) {
             if (this.list[i].code === currentCategory) {
@@ -11484,9 +11928,11 @@ class TreeViewComponent {
                 break;
             }
         }
+        // If we couldn't find the current index, only enable the first column
         if (currentIndex === -1) {
             return index === 0;
         }
+        // Enable the current column and the next one
         return index === currentIndex || index === currentIndex + 1;
     }
     shouldShowSvgBorderWrapper(column, index) {
@@ -11569,6 +12015,7 @@ class TreeViewComponent {
             console.error('Error in updating association', err);
         });
         if (updateAssociationRes && updateAssociationRes.result && updateAssociationRes.result.node_id) {
+            // this.publishFramework(frameworkData);
         }
     }
     publishFramework(frameworkData) {
@@ -11664,6 +12111,42 @@ class TreeViewComponent {
                 this._snackBar.open(`Failed to remove connection.`, 'cancel');
             });
             if (retireRes && retireRes.params && retireRes.params.status?.toLowerCase() === 'successful') {
+                // Find orgId from data structure by matching code with ele.ids
+                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;
+                };
+                // Search for orgId using the first id from ele.ids
+                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;
+                            }
+                        }
+                    }
+                }
+                // Call orgContentUpdate API after each successful retire
+                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,15 +12323,15 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeViewComponent, deps: [{ token: FrameworkService }, { token: LocalConnectionService }, { token: i1$3.MatDialog }, { token: ApprovalService }, { token: i3$1.MatSnackBar }, { token: ConnectorService }, { token: i0.ChangeDetectorRef }, { token: TreeHierarchyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: TreeViewComponent, isStandalone: false, 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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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"] }]
-        }], 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: [{
+            args: [{ selector: 'lib-tree-view', standalone: false, 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: () => [{ type: FrameworkService }, { type: LocalConnectionService }, { type: i1$3.MatDialog }, { type: ApprovalService }, { type: i3$1.MatSnackBar }, { type: ConnectorService }, { type: i0.ChangeDetectorRef }, { type: TreeHierarchyService }, { type: i0.ChangeDetectorRef }], propDecorators: { approvalList: [{
                 type: Input
             }], isApprovalView: [{
                 type: Input
@@ -11862,6 +12345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], childOrgData: [{
                 type: Input
+            }], userRolesData: [{
+                type: Input
             }], sentForApprove: [{
                 type: Output
             }], loaderEnable: [{
@@ -11913,16 +12398,39 @@ class ApproveViewComponent {
     closeActionBar(_e) {
         this.showAction = false;
     }
+    /* ***** Don't delete this code might need in Future ***** */
+    // drawLine(){
+    //   this.lineRef = []
+    //   this.categories.forEach((cat, i) => {
+    //     this.listItems.forEach((item, j) => {
+    //       if(cat === item.category){
+    //         for(let c of item.children){
+    //           if(c.category === this.categories[i+1] && this.isExistInTermList(c)){
+    //               const line = new LeaderLine(document.getElementById(item.name), document.getElementById(c.name))
+    //               line.color='#666'
+    //               line.endPlug = 'disc'
+    //               line.startPlug = 'disc'
+    //               this.lineRef.push(line)
+    //           }
+    //         }
+    //       }
+    //      })
+    //   })
+    // }
+    // isExistInTermList(term){
+    //   const count = this.listItems.filter(item => item.identifier == term.identifier)
+    //   return count.length;
+    // }
     ngOnDestroy() {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApproveViewComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ApprovalService }, { token: FrameworkService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ApproveViewComponent, isStandalone: false, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ApproveViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-approve-view', 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: ApprovalService }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
+            args: [{ selector: 'lib-approve-view', standalone: false, 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: ApprovalService }, { type: FrameworkService }, { type: i3$1.MatSnackBar }] });
 
 class CategoriesPreviewComponent {
     constructor() {
@@ -11935,6 +12443,9 @@ class CategoriesPreviewComponent {
         }, 200);
     }
     ngOnInit() { }
+    // ngAfterViewInit() {
+    //   this.drawLine()
+    // }
     drawLine() {
         this.lineRef = [];
         for (let cat of this.data) {
@@ -11953,13 +12464,13 @@ class CategoriesPreviewComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoriesPreviewComponent, selector: "lib-categories-preview", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"category\">\n    <h1>{{app_strings.categoryPreview}}</h1>\n    <div class=\"category__wrap\" *ngIf=\"data.length>0\">\n        <div class=\"category__column\" *ngFor=\"let cat of data\">\n            <header class=\"category__header\">{{cat.name}}</header>\n            <mat-card class=\"category__cards\"  [ngClass]=\"{'highlight':term.selected}\" id=\"{{term.domId}}\" *ngFor=\"let term of cat.terms\">\n                <span class=\"category__circle left\"></span>\n                <mat-card-content>{{term.name}}</mat-card-content>\n                <span class=\"category__circle right\"></span>\n            </mat-card>\n        </div>\n    </div>\n</div>\n", styles: [".category{display:flex;flex-flow:column;padding:15px}.category h1{font-size:24px;color:#666;font-weight:500}.category__wrap{display:flex;flex-flow:row;padding-top:20px}.category__column{display:flex;flex-flow:column;flex:1;padding:10px 50px;text-align:center}.category__header{margin:30px 0}.category__cards{margin-bottom:15px;position:relative;padding:20px 15px;background:#00000014;box-shadow:0 0 #fff;border:2px solid #ccc}.category__cards.highlight{background:#666;border:2px solid #666666;color:#fff}.category__circle{position:absolute;top:40%;display:inline-block}.category__circle.left{left:-3.6%}.category__circle.right{right:-3%}#start{width:200px;height:100px;margin:200px;background:#00000014}@media only screen and (max-width: 1024px){.category h1{font-size:20px}.category__column{padding:10px 25px}}\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: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CategoriesPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CategoriesPreviewComponent, isStandalone: false, selector: "lib-categories-preview", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"category\">\n    <h1>{{app_strings.categoryPreview}}</h1>\n    <div class=\"category__wrap\" *ngIf=\"data.length>0\">\n        <div class=\"category__column\" *ngFor=\"let cat of data\">\n            <header class=\"category__header\">{{cat.name}}</header>\n            <mat-card class=\"category__cards\"  [ngClass]=\"{'highlight':term.selected}\" id=\"{{term.domId}}\" *ngFor=\"let term of cat.terms\">\n                <span class=\"category__circle left\"></span>\n                <mat-card-content>{{term.name}}</mat-card-content>\n                <span class=\"category__circle right\"></span>\n            </mat-card>\n        </div>\n    </div>\n</div>\n", styles: [".category{display:flex;flex-flow:column;padding:15px}.category h1{font-size:24px;color:#666;font-weight:500}.category__wrap{display:flex;flex-flow:row;padding-top:20px}.category__column{display:flex;flex-flow:column;flex:1;padding:10px 50px;text-align:center}.category__header{margin:30px 0}.category__cards{margin-bottom:15px;position:relative;padding:20px 15px;background:#00000014;box-shadow:0 0 #fff;border:2px solid #ccc}.category__cards.highlight{background:#666;border:2px solid #666666;color:#fff}.category__circle{position:absolute;top:40%;display:inline-block}.category__circle.left{left:-3.6%}.category__circle.right{right:-3%}#start{width:200px;height:100px;margin:200px;background:#00000014}@media only screen and (max-width:1024px){.category h1{font-size:20px}.category__column{padding:10px 25px}}\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: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CategoriesPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-categories-preview', template: "<div class=\"category\">\n    <h1>{{app_strings.categoryPreview}}</h1>\n    <div class=\"category__wrap\" *ngIf=\"data.length>0\">\n        <div class=\"category__column\" *ngFor=\"let cat of data\">\n            <header class=\"category__header\">{{cat.name}}</header>\n            <mat-card class=\"category__cards\"  [ngClass]=\"{'highlight':term.selected}\" id=\"{{term.domId}}\" *ngFor=\"let term of cat.terms\">\n                <span class=\"category__circle left\"></span>\n                <mat-card-content>{{term.name}}</mat-card-content>\n                <span class=\"category__circle right\"></span>\n            </mat-card>\n        </div>\n    </div>\n</div>\n", styles: [".category{display:flex;flex-flow:column;padding:15px}.category h1{font-size:24px;color:#666;font-weight:500}.category__wrap{display:flex;flex-flow:row;padding-top:20px}.category__column{display:flex;flex-flow:column;flex:1;padding:10px 50px;text-align:center}.category__header{margin:30px 0}.category__cards{margin-bottom:15px;position:relative;padding:20px 15px;background:#00000014;box-shadow:0 0 #fff;border:2px solid #ccc}.category__cards.highlight{background:#666;border:2px solid #666666;color:#fff}.category__circle{position:absolute;top:40%;display:inline-block}.category__circle.left{left:-3.6%}.category__circle.right{right:-3%}#start{width:200px;height:100px;margin:200px;background:#00000014}@media only screen and (max-width: 1024px){.category h1{font-size:20px}.category__column{padding:10px 25px}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+            args: [{ selector: 'lib-categories-preview', standalone: false, template: "<div class=\"category\">\n    <h1>{{app_strings.categoryPreview}}</h1>\n    <div class=\"category__wrap\" *ngIf=\"data.length>0\">\n        <div class=\"category__column\" *ngFor=\"let cat of data\">\n            <header class=\"category__header\">{{cat.name}}</header>\n            <mat-card class=\"category__cards\"  [ngClass]=\"{'highlight':term.selected}\" id=\"{{term.domId}}\" *ngFor=\"let term of cat.terms\">\n                <span class=\"category__circle left\"></span>\n                <mat-card-content>{{term.name}}</mat-card-content>\n                <span class=\"category__circle right\"></span>\n            </mat-card>\n        </div>\n    </div>\n</div>\n", styles: [".category{display:flex;flex-flow:column;padding:15px}.category h1{font-size:24px;color:#666;font-weight:500}.category__wrap{display:flex;flex-flow:row;padding-top:20px}.category__column{display:flex;flex-flow:column;flex:1;padding:10px 50px;text-align:center}.category__header{margin:30px 0}.category__cards{margin-bottom:15px;position:relative;padding:20px 15px;background:#00000014;box-shadow:0 0 #fff;border:2px solid #ccc}.category__cards.highlight{background:#666;border:2px solid #666666;color:#fff}.category__circle{position:absolute;top:40%;display:inline-block}.category__circle.left{left:-3.6%}.category__circle.right{right:-3%}#start{width:200px;height:100px;margin:200px;background:#00000014}@media only screen and (max-width:1024px){.category h1{font-size:20px}.category__column{padding:10px 25px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }] } });
 
@@ -12019,13 +12530,13 @@ class CreateCategoriesComponent {
             transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, deps: [{ token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateCategoriesComponent, selector: "lib-create-categories", inputs: { taxonomyInfo: "taxonomyInfo" }, outputs: { updateCategory: "updateCategory", removeCategories: "removeCategories", changePosition: "changePosition" }, ngImport: i0, template: "\n<div class=\"form-wrap\">\n    <h1>{{app_strings.createCategories}}</h1>\n    <form [formGroup]=\"createCategoriesForm\" (ngSubmit)=\"saveForm()\" novalidate>\n        <div class=\"form-field\">\n            <div class=\"form-field__wrap\" formArrayName=\"categories\" cdkDropListGroup>\n                <div cdkDropList [cdkDropListData]=\"categories().controls\" (cdkDropListDropped)=\"drop($event)\">\n                <div class=\"form__category\" *ngFor=\"let cat of categories().controls; let i = index\" >\n                        <mat-form-field appearance=\"outline\" [formGroupName]=\"i\" cdkDrag>\n                            <mat-label>{{app_strings.category}} {{i}}</mat-label>\n                            <input matInput placeholder=\"{{app_strings.categoryName}}\" formControlName=\"name\" (blur)=\"emitCategory($event)\"> \n                            <div class=\"drag-Handle\" cdkDragHandle>\n                                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                                  <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\n                                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n                                </svg>\n                            </div>\n                        </mat-form-field>\n                            <mat-icon (click)=\"removeCategory(i)\">{{app_strings.removeCircleOutline}}</mat-icon>\n                           \n                    </div>\n                </div>\n            </div>\n        </div>\n        <footer>\n            <button type=\"button\"  mat-raised-button (click)=\"addCategory()\" color=\"primary\">\n                {{app_strings.add | titlecase}}\n             </button>\n        </footer>\n    </form>\n</div>\n", styles: [".form-wrap{display:flex;flex-direction:column;justify-content:center;padding:15px}.form-wrap h1{font-size:24px;color:#666;font-weight:500}.form-field{display:flex;flex-direction:row;justify-content:start}.form-field__wrap{display:flex;flex-direction:column}.form-field__wrap .mat-form-field{width:350px}.form__btns{display:flex;flex-direction:column;justify-content:end;padding-bottom:15px;margin-left:15px}.form__category{display:flex;flex-direction:row;justify-content:center;align-items:center}.form__category .mat-form-field .mat-form-field-appearance-outline{margin-bottom:0}.form__category .mat-icon{margin-left:20px;height:20px;padding:5px 5px 25px;color:#b60909;cursor:pointer}.drag-Handle{position:absolute;top:8px;right:0;color:#9b9b9b;cursor:grabbing}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}footer{display:flex;flex-direction:row;justify-content:start}footer .mat-raised-button{padding:0 40px}@media only screen and (max-width: 1024px){.form-wrap h1{font-size:20px}.form-wrap-field__wrap .mat-form-field{width:250px}.form-wrap ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{top:10px;bottom:4px}.form-wrap ::ng-deep .mat-form-field-wrapper{padding-bottom:.3em}.form-wrap ::ng-deep .mat-input-element{font-size:10px}.form-wrap ::ng-deep .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CreateCategoriesComponent, deps: [{ token: i3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CreateCategoriesComponent, isStandalone: false, selector: "lib-create-categories", inputs: { taxonomyInfo: "taxonomyInfo" }, outputs: { updateCategory: "updateCategory", removeCategories: "removeCategories", changePosition: "changePosition" }, ngImport: i0, template: "\n<div class=\"form-wrap\">\n    <h1>{{app_strings.createCategories}}</h1>\n    <form [formGroup]=\"createCategoriesForm\" (ngSubmit)=\"saveForm()\" novalidate>\n        <div class=\"form-field\">\n            <div class=\"form-field__wrap\" formArrayName=\"categories\" cdkDropListGroup>\n                <div cdkDropList [cdkDropListData]=\"categories().controls\" (cdkDropListDropped)=\"drop($event)\">\n                <div class=\"form__category\" *ngFor=\"let cat of categories().controls; let i = index\" >\n                        <mat-form-field appearance=\"outline\" [formGroupName]=\"i\" cdkDrag>\n                            <mat-label>{{app_strings.category}} {{i}}</mat-label>\n                            <input matInput placeholder=\"{{app_strings.categoryName}}\" formControlName=\"name\" (blur)=\"emitCategory($event)\"> \n                            <div class=\"drag-Handle\" cdkDragHandle>\n                                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                                  <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\n                                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n                                </svg>\n                            </div>\n                        </mat-form-field>\n                            <mat-icon (click)=\"removeCategory(i)\">{{app_strings.removeCircleOutline}}</mat-icon>\n                           \n                    </div>\n                </div>\n            </div>\n        </div>\n        <footer>\n            <button type=\"button\"  mat-raised-button (click)=\"addCategory()\" color=\"primary\">\n                {{app_strings.add | titlecase}}\n             </button>\n        </footer>\n    </form>\n</div>\n", styles: [".form-wrap{display:flex;flex-direction:column;justify-content:center;padding:15px}.form-wrap h1{font-size:24px;color:#666;font-weight:500}.form-field{display:flex;flex-direction:row;justify-content:start}.form-field__wrap{display:flex;flex-direction:column}.form-field__wrap .mat-form-field{width:350px}.form__btns{display:flex;flex-direction:column;justify-content:end;padding-bottom:15px;margin-left:15px}.form__category{display:flex;flex-direction:row;justify-content:center;align-items:center}.form__category .mat-form-field .mat-form-field-appearance-outline{margin-bottom:0}.form__category .mat-icon{margin-left:20px;height:20px;padding:5px 5px 25px;color:#b60909;cursor:pointer}.drag-Handle{position:absolute;top:8px;right:0;color:#9b9b9b;cursor:grabbing}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}footer{display:flex;flex-direction:row;justify-content:start}footer .mat-raised-button{padding:0 40px}@media only screen and (max-width:1024px){.form-wrap h1{font-size:20px}.form-wrap-field__wrap .mat-form-field{width:250px}.form-wrap ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{top:10px;bottom:4px}.form-wrap ::ng-deep .mat-form-field-wrapper{padding-bottom:.3em}.form-wrap ::ng-deep .mat-input-element{font-size:10px}.form-wrap ::ng-deep .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-create-categories', template: "\n<div class=\"form-wrap\">\n    <h1>{{app_strings.createCategories}}</h1>\n    <form [formGroup]=\"createCategoriesForm\" (ngSubmit)=\"saveForm()\" novalidate>\n        <div class=\"form-field\">\n            <div class=\"form-field__wrap\" formArrayName=\"categories\" cdkDropListGroup>\n                <div cdkDropList [cdkDropListData]=\"categories().controls\" (cdkDropListDropped)=\"drop($event)\">\n                <div class=\"form__category\" *ngFor=\"let cat of categories().controls; let i = index\" >\n                        <mat-form-field appearance=\"outline\" [formGroupName]=\"i\" cdkDrag>\n                            <mat-label>{{app_strings.category}} {{i}}</mat-label>\n                            <input matInput placeholder=\"{{app_strings.categoryName}}\" formControlName=\"name\" (blur)=\"emitCategory($event)\"> \n                            <div class=\"drag-Handle\" cdkDragHandle>\n                                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                                  <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\n                                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n                                </svg>\n                            </div>\n                        </mat-form-field>\n                            <mat-icon (click)=\"removeCategory(i)\">{{app_strings.removeCircleOutline}}</mat-icon>\n                           \n                    </div>\n                </div>\n            </div>\n        </div>\n        <footer>\n            <button type=\"button\"  mat-raised-button (click)=\"addCategory()\" color=\"primary\">\n                {{app_strings.add | titlecase}}\n             </button>\n        </footer>\n    </form>\n</div>\n", styles: [".form-wrap{display:flex;flex-direction:column;justify-content:center;padding:15px}.form-wrap h1{font-size:24px;color:#666;font-weight:500}.form-field{display:flex;flex-direction:row;justify-content:start}.form-field__wrap{display:flex;flex-direction:column}.form-field__wrap .mat-form-field{width:350px}.form__btns{display:flex;flex-direction:column;justify-content:end;padding-bottom:15px;margin-left:15px}.form__category{display:flex;flex-direction:row;justify-content:center;align-items:center}.form__category .mat-form-field .mat-form-field-appearance-outline{margin-bottom:0}.form__category .mat-icon{margin-left:20px;height:20px;padding:5px 5px 25px;color:#b60909;cursor:pointer}.drag-Handle{position:absolute;top:8px;right:0;color:#9b9b9b;cursor:grabbing}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}footer{display:flex;flex-direction:row;justify-content:start}footer .mat-raised-button{padding:0 40px}@media only screen and (max-width: 1024px){.form-wrap h1{font-size:20px}.form-wrap-field__wrap .mat-form-field{width:250px}.form-wrap ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{top:10px;bottom:4px}.form-wrap ::ng-deep .mat-form-field-wrapper{padding-bottom:.3em}.form-wrap ::ng-deep .mat-input-element{font-size:10px}.form-wrap ::ng-deep .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3.UntypedFormBuilder }]; }, propDecorators: { taxonomyInfo: [{
+            args: [{ selector: 'lib-create-categories', standalone: false, template: "\n<div class=\"form-wrap\">\n    <h1>{{app_strings.createCategories}}</h1>\n    <form [formGroup]=\"createCategoriesForm\" (ngSubmit)=\"saveForm()\" novalidate>\n        <div class=\"form-field\">\n            <div class=\"form-field__wrap\" formArrayName=\"categories\" cdkDropListGroup>\n                <div cdkDropList [cdkDropListData]=\"categories().controls\" (cdkDropListDropped)=\"drop($event)\">\n                <div class=\"form__category\" *ngFor=\"let cat of categories().controls; let i = index\" >\n                        <mat-form-field appearance=\"outline\" [formGroupName]=\"i\" cdkDrag>\n                            <mat-label>{{app_strings.category}} {{i}}</mat-label>\n                            <input matInput placeholder=\"{{app_strings.categoryName}}\" formControlName=\"name\" (blur)=\"emitCategory($event)\"> \n                            <div class=\"drag-Handle\" cdkDragHandle>\n                                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                                  <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\n                                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n                                </svg>\n                            </div>\n                        </mat-form-field>\n                            <mat-icon (click)=\"removeCategory(i)\">{{app_strings.removeCircleOutline}}</mat-icon>\n                           \n                    </div>\n                </div>\n            </div>\n        </div>\n        <footer>\n            <button type=\"button\"  mat-raised-button (click)=\"addCategory()\" color=\"primary\">\n                {{app_strings.add | titlecase}}\n             </button>\n        </footer>\n    </form>\n</div>\n", styles: [".form-wrap{display:flex;flex-direction:column;justify-content:center;padding:15px}.form-wrap h1{font-size:24px;color:#666;font-weight:500}.form-field{display:flex;flex-direction:row;justify-content:start}.form-field__wrap{display:flex;flex-direction:column}.form-field__wrap .mat-form-field{width:350px}.form__btns{display:flex;flex-direction:column;justify-content:end;padding-bottom:15px;margin-left:15px}.form__category{display:flex;flex-direction:row;justify-content:center;align-items:center}.form__category .mat-form-field .mat-form-field-appearance-outline{margin-bottom:0}.form__category .mat-icon{margin-left:20px;height:20px;padding:5px 5px 25px;color:#b60909;cursor:pointer}.drag-Handle{position:absolute;top:8px;right:0;color:#9b9b9b;cursor:grabbing}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}footer{display:flex;flex-direction:row;justify-content:start}footer .mat-raised-button{padding:0 40px}@media only screen and (max-width:1024px){.form-wrap h1{font-size:20px}.form-wrap-field__wrap .mat-form-field{width:250px}.form-wrap ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{top:10px;bottom:4px}.form-wrap ::ng-deep .mat-form-field-wrapper{padding-bottom:.3em}.form-wrap ::ng-deep .mat-input-element{font-size:10px}.form-wrap ::ng-deep .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}\n"] }]
+        }], ctorParameters: () => [{ type: i3.UntypedFormBuilder }], propDecorators: { taxonomyInfo: [{
                 type: Input
             }], updateCategory: [{
                 type: Output
@@ -12046,7 +12557,53 @@ class ConfigFrameworkComponent {
         this.frameworkService.getFrameworkInfo().subscribe(res => {
             this.frameworkCategories = res.result.framework.categories;
         });
-    }
+        // this.categoriesRepresentations = categoryRepresentationsV1
+    }
+    //   updateCategory(data){
+    //     for(let i=0;i<data.length;i++) {
+    //         this.tempCategoryRepresentaions.push(
+    //           {
+    //             name: data[i].name,
+    //             terms:this.updateTermArry(data[i].name, data[i+1]?data[i+1].name:'', i)
+    //           }
+    //         )
+    //     }
+    //     this.categoriesRepresentations = this.tempCategoryRepresentaions;
+    //   }
+    //   updateTermArry(current,next, index){
+    //     let term = []
+    //     if(index%2 === 0){
+    //       term = [
+    //         {
+    //           name:`${current} 1`,
+    //           domId:`${current}1`
+    //         },
+    //         {
+    //           name: `${current} 2`,
+    //           selected:true,
+    //           connected:true,
+    //           domId:`${current.toLowerCase()}2`,
+    //           connectedDomId:next?`${next.toLowerCase()}1`:''
+    //         }
+    //       ]
+    //     } else {
+    //       term = [
+    //         {
+    //           name:`${current} 1`,
+    //           selected:true,
+    //           connected:true,
+    //           domId:`${current.toLowerCase()}1`,
+    //           connectedDomId:next?`${next.toLowerCase()}2`:''
+    //         },
+    //         {
+    //           name: `${current} 2`,
+    //           domId:`${current}2`
+    //         }
+    //       ]
+    //     }
+    //     return term
+    //   }
+    // }
     updateCategory(name) {
         this.removeOldLine();
         this.tempCategoryRepresentaions.push({
@@ -12113,25 +12670,25 @@ class ConfigFrameworkComponent {
             this.updateCategory(cat.name);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigFrameworkComponent, deps: [{ token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigFrameworkComponent, selector: "lib-config-framework", ngImport: i0, template: "<div class=\"config__wrap\">\n    <lib-create-categories class=\"config__form-wrap\" [taxonomyInfo]=\"''\" (updateCategory)=\"updateCategory($event)\" \n    (removeCategories)=\"removeCategory($event)\" (changePosition)=\"changePosition($event)\"></lib-create-categories>\n    <ng-container *ngIf=\"categoriesRepresentations\">\n        <lib-categories-preview  class=\"config__preview\" [data]=\"categoriesRepresentations\"></lib-categories-preview>\n    </ng-container>\n </div>\n", styles: [".config__wrap{display:flex;flex-direction:row;align-items:start;height:100vh}.config__form-wrap{flex-grow:1}.config__preview{flex-grow:9}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CreateCategoriesComponent, selector: "lib-create-categories", inputs: ["taxonomyInfo"], outputs: ["updateCategory", "removeCategories", "changePosition"] }, { kind: "component", type: CategoriesPreviewComponent, selector: "lib-categories-preview", inputs: ["data"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigFrameworkComponent, deps: [{ token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ConfigFrameworkComponent, isStandalone: false, selector: "lib-config-framework", ngImport: i0, template: "<div class=\"config__wrap\">\n    <lib-create-categories class=\"config__form-wrap\" [taxonomyInfo]=\"''\" (updateCategory)=\"updateCategory($event)\" \n    (removeCategories)=\"removeCategory($event)\" (changePosition)=\"changePosition($event)\"></lib-create-categories>\n    <ng-container *ngIf=\"categoriesRepresentations\">\n        <lib-categories-preview  class=\"config__preview\" [data]=\"categoriesRepresentations\"></lib-categories-preview>\n    </ng-container>\n </div>\n", styles: [".config__wrap{display:flex;flex-direction:row;align-items:start;height:100vh}.config__form-wrap{flex-grow:1}.config__preview{flex-grow:9}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CreateCategoriesComponent, selector: "lib-create-categories", inputs: ["taxonomyInfo"], outputs: ["updateCategory", "removeCategories", "changePosition"] }, { kind: "component", type: CategoriesPreviewComponent, selector: "lib-categories-preview", inputs: ["data"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigFrameworkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigFrameworkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-framework', template: "<div class=\"config__wrap\">\n    <lib-create-categories class=\"config__form-wrap\" [taxonomyInfo]=\"''\" (updateCategory)=\"updateCategory($event)\" \n    (removeCategories)=\"removeCategory($event)\" (changePosition)=\"changePosition($event)\"></lib-create-categories>\n    <ng-container *ngIf=\"categoriesRepresentations\">\n        <lib-categories-preview  class=\"config__preview\" [data]=\"categoriesRepresentations\"></lib-categories-preview>\n    </ng-container>\n </div>\n", styles: [".config__wrap{display:flex;flex-direction:row;align-items:start;height:100vh}.config__form-wrap{flex-grow:1}.config__preview{flex-grow:9}\n"] }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }]; } });
+            args: [{ selector: 'lib-config-framework', standalone: false, template: "<div class=\"config__wrap\">\n    <lib-create-categories class=\"config__form-wrap\" [taxonomyInfo]=\"''\" (updateCategory)=\"updateCategory($event)\" \n    (removeCategories)=\"removeCategory($event)\" (changePosition)=\"changePosition($event)\"></lib-create-categories>\n    <ng-container *ngIf=\"categoriesRepresentations\">\n        <lib-categories-preview  class=\"config__preview\" [data]=\"categoriesRepresentations\"></lib-categories-preview>\n    </ng-container>\n </div>\n", styles: [".config__wrap{display:flex;flex-direction:row;align-items:start;height:100vh}.config__form-wrap{flex-grow:1}.config__preview{flex-grow:9}\n"] }]
+        }], ctorParameters: () => [{ type: FrameworkService }] });
 
 class DashboardComponent {
     constructor() { }
     ngOnInit() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "lib-dashboard", ngImport: i0, template: "<p>dashboard works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DashboardComponent, isStandalone: false, selector: "lib-dashboard", ngImport: i0, template: "<p>dashboard works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dashboard', template: "<p>dashboard works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'lib-dashboard', standalone: false, template: "<p>dashboard works!</p>\n" }]
+        }], ctorParameters: () => [] });
 
 const routes = [
     {
@@ -12153,11 +12710,11 @@ const routes = [
     }
 ];
 class TreeEditorRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeEditorRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TreeEditorRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeEditorRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeEditorRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TreeEditorRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeEditorRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeEditorRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeEditorRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12175,6 +12732,7 @@ class TreeHierarchyModule {
         return {
             ngModule: TreeHierarchyModule,
             providers: [
+                // LocalConnectionService,
                 {
                     provide: ENVIRONMENT,
                     useValue: config
@@ -12182,8 +12740,8 @@ class TreeHierarchyModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyModule, declarations: [TreeHierarchyComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyModule, declarations: [TreeHierarchyComponent,
             DashboardComponent,
             ConfigFrameworkComponent,
             CreateCategoriesComponent,
@@ -12211,10 +12769,12 @@ class TreeHierarchyModule {
             ConfigFrameworkComponent,
             TreeViewComponent,
             TermCardComponent,
-            CategoriesPreviewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyModule, providers: [
+            CategoriesPreviewComponent,
+            MatChipsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyModule, providers: [
             DatePipe,
             { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
+            // { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true },
             { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2000 } },
             { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } },
             FrameworkService,
@@ -12225,9 +12785,9 @@ class TreeHierarchyModule {
         ], imports: [CommonModule,
             MaterialModule,
             TreeEditorRoutingModule,
-            MatChipsModule] }); }
+            MatChipsModule, MatChipsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeHierarchyModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -12262,6 +12822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     providers: [
                         DatePipe,
                         { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
+                        // { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true },
                         { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2000 } },
                         { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } },
                         FrameworkService,
@@ -12276,10 +12837,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ConfigFrameworkComponent,
                         TreeViewComponent,
                         TermCardComponent,
-                        CategoriesPreviewComponent
+                        CategoriesPreviewComponent,
+                        MatChipsModule
                     ]
                 }]
         }] });
 
+/*
+ * Public API Surface of tree-hierarchy
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
 export { CategoriesPreviewComponent, ConfigFrameworkComponent, CreateCategoriesComponent, TermCardComponent, TreeHierarchyComponent, TreeHierarchyModule, TreeHierarchyService, TreeViewComponent };
 //# sourceMappingURL=sunbird-cb-tree-hierarchy.mjs.map