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

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

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, NgModule, EventEmitter, Output, Pipe, ViewEncapsulation, Inject, InjectionToken } from '@angular/core';
+import { Injectable, Component, Input, 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';
-import { tap, catchError, map, startWith, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { switchMap, map, tap, catchError, startWith, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as _ from 'lodash';
 import ___default from 'lodash';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i5$1 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i3$1 from '@angular/cdk/drag-drop';
+import * as i3$2 from '@angular/cdk/drag-drop';
 import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { PortalModule } from '@angular/cdk/portal';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -23,14 +23,14 @@ import * as i7 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i5 from '@angular/material/button';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 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 i8 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
+import * as i7$2 from '@angular/material/legacy-chips';
+import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i10 from '@angular/material/dialog';
@@ -39,9 +39,9 @@ import { MatDividerModule } from '@angular/material/divider';
 import * as i11 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i6 from '@angular/material/icon';
+import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i13 from '@angular/material/input';
+import * as i6$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import * as i14 from '@angular/material/menu';
@@ -73,17 +73,23 @@ 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 i5$2 from '@angular/material/legacy-snack-bar';
+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 d3 from 'd3';
 
-const API_ENDPOINT = {
+const API_ENDPOINT$1 = {
     ORG_V1_SEARCH: '/apis/proxies/v8/org/v1/search',
     CREATE_TERMS: `/apis/proxies/v8/action/framework/v3/term/create`,
+    UPDATE_TERMS: `/apis/proxies/v8/framework/v1/term/update/`,
     UPDATE_ASSOCIATION: `/apis/proxies/v8/framework/v1/term/update/`,
-    PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`
+    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`
 };
 class TreeHierarchyService {
     constructor(http) {
@@ -92,20 +98,32 @@ class TreeHierarchyService {
         this.loaderState$ = this.loaderSubject.asObservable();
     }
     orgSerachApi(requestBody) {
-        return this.http.post(`${API_ENDPOINT.ORG_V1_SEARCH}`, requestBody);
+        return this.http.post(`${API_ENDPOINT$1.ORG_V1_SEARCH}`, requestBody);
     }
     createTerm(requestBody, frameworkObj) {
-        return this.http.post(`${API_ENDPOINT.CREATE_TERMS}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
+        return this.http.post(`${API_ENDPOINT$1.CREATE_TERMS}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
+    }
+    updateTerm(requestBody, frameworkObj, codeId) {
+        return this.http.patch(`${API_ENDPOINT$1.UPDATE_TERMS}/${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
     }
     updateFrameworkAssociation(requestBody, frameworkObj, codeId) {
-        return this.http.patch(`${API_ENDPOINT.UPDATE_ASSOCIATION}${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
+        return this.http.patch(`${API_ENDPOINT$1.UPDATE_ASSOCIATION}${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
     }
     publishFreamework(frameworkObj) {
-        return this.http.post(`${API_ENDPOINT.PUBLISH_FRAMEWORK}${frameworkObj.id}`, {});
+        return this.http.post(`${API_ENDPOINT$1.PUBLISH_FRAMEWORK}${frameworkObj.id}`, {});
     }
     setLoaderState(isLoading) {
         this.loaderSubject.next(isLoading);
     }
+    retireTerm(requestBody, frameworkObj) {
+        return this.http.post(`${API_ENDPOINT$1.RETIRE_TREM}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, 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' }); }
 }
@@ -7161,6 +7179,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+const API_ENDPOINT = {
+    ORG_V1_SEARCH: '/apis/proxies/v8/org/v1/search',
+    CREATE_TERMS: `/apis/proxies/v8/action/framework/v3/term/create`,
+    UPDATE_TERMS: `/apis/proxies/v8/framework/v1/term/update/`,
+    UPDATE_ASSOCIATION: `/apis/proxies/v8/framework/v1/term/update/`,
+    PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`,
+    RETIRE_TREM: `/apis/proxies/v8/framework/v1/term/retire`,
+    UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`,
+    USERS_SEARCH: `apis/proxies/v8/user/v1/search`
+};
 class FrameworkService {
     constructor(http, localConfig) {
         this.http = http;
@@ -7176,19 +7204,28 @@ class FrameworkService {
         this.proxiesPath = 'apis/proxies/v8';
         this.CurrentCardClk = new BehaviorSubject(null);
     }
-    getFrameworkInfo(_orgData) {
+    getFrameworkInfo(_orgData, _childOrgData) {
         localStorage.removeItem('terms');
         if (this.localConfig.connectionType === 'online') {
             let url = `/${this.proxiesPath}/framework/v1/read/`;
             if (_orgData) {
-                url = url + _orgData.identifier + '_org_hierarchy';
+                url = url + _orgData.orgHierarchyFrameworkId;
             }
             else {
                 url = url + this.environment.frameworkName;
             }
-            return this.http.get(`${url}`, { withCredentials: true }).pipe(tap((response) => {
+            return this.http.get(`${url}`, { withCredentials: true }).pipe(switchMap((frameworkResponse) => {
+                const originalFrameworkResponse = frameworkResponse;
+                return this.getSelectedStateOrg(_orgData).pipe(switchMap((orgListData) => {
+                    this.additionalData = orgListData?.result?.response?.content || [];
+                    return this.getUserPerOrg().pipe(map(() => {
+                        return originalFrameworkResponse;
+                    }));
+                }));
+            }), tap(async (response) => {
                 this.resetAll();
-                this.formateData(response);
+                this.formateData(response, _childOrgData);
+                this.completeResponse = response.result.framework;
             }), catchError((err) => {
                 this.resetAll();
                 this.list.clear();
@@ -7317,13 +7354,18 @@ class FrameworkService {
         }) || [];
         return filteredData;
     }
-    formateData(response) {
+    formateData(response, _childOrgData) {
         this.frameworkId = response.result.framework.code;
-        (response.result.framework.categories).forEach((a, _idx) => {
+        let categories = response.result.framework.categories;
+        if (_childOrgData?.rootOrgId) {
+            categories = this.getOrgFromChildOnwards(categories || [], _childOrgData || '');
+        }
+        response.result.framework.categories = categories;
+        (categories).forEach((a, _idx) => {
             this.list.set(a.code, {
                 code: a.code,
                 identifier: a.identifier,
-                index: a.index,
+                index: (_idx + 1),
                 name: a.name,
                 selected: a.selected,
                 status: a.status,
@@ -7334,6 +7376,8 @@ class FrameworkService {
                 config: this.getConfig(a.code),
                 children: (a.terms || []).map((c) => {
                     const associations = c.associations || [];
+                    const tempCount = this.getUserCount(c);
+                    Object.assign(c, { userCount: tempCount });
                     if (associations.length > 0) {
                         Object.assign(c, { children: associations });
                     }
@@ -7355,6 +7399,25 @@ class FrameworkService {
         });
         this.categoriesHash.next(allCategories);
     }
+    getOrgFromChildOnwards(_categories, _childOrgData) {
+        const colIndexToBeRemoved = [];
+        let termFoundIndex = -1;
+        if (_categories?.length > 0) {
+            _categories.forEach((ele) => {
+                if (ele?.terms?.length > 0) {
+                    const termFound = ele.terms.find((term) => term.name === _childOrgData.channel);
+                    if (!termFound && termFoundIndex === -1) {
+                        colIndexToBeRemoved.push(ele.index);
+                    }
+                    else if (termFoundIndex === -1) {
+                        termFoundIndex = ele.index;
+                        ele.terms = ele.terms.filter((term) => term.name === _childOrgData.channel);
+                    }
+                }
+            });
+        }
+        return _categories.filter((category) => !colIndexToBeRemoved.includes(category.index));
+    }
     removeOldLine() {
         const eles = Array.from(document.getElementsByClassName('leader-line') || []);
         if (eles.length > 0) {
@@ -7529,6 +7592,99 @@ class FrameworkService {
             });
         }
     }
+    getSelectedStateOrg(_orgData) {
+        const requestBody = {
+            request: {
+                filters: {
+                    status: 1,
+                    ministryOrStateType: (_orgData) ?
+                        _orgData.sbOrgType : '',
+                    ministryOrStateId: (_orgData) ?
+                        _orgData.identifier : ''
+                },
+                sort_by: {
+                    createdDate: "desc"
+                },
+                limit: 9999,
+                offset: 0,
+                fields: [
+                    'identifier',
+                    'orgName',
+                    'description',
+                    'parentOrgName',
+                    'ministryOrStateId',
+                    'ministryOrStateType',
+                    'ministryOrStateName',
+                    'sbOrgSubType'
+                ]
+            }
+        };
+        return this.http.post(`${API_ENDPOINT.ORG_V1_SEARCH}`, requestBody).pipe(catchError(error => {
+            console.error('Error fetching Org data:', error);
+            return of({});
+        }));
+    }
+    getUserPerOrg(_orgData) {
+        const orgIds = this.additionalData.map((org) => org.identifier);
+        const requestBody = {
+            request: {
+                filters: {
+                    rootOrgId: orgIds
+                },
+                fields: [
+                    'identifier',
+                    'rootOrgId'
+                ],
+                limit: 1,
+                facets: [
+                    "rootOrgId"
+                ],
+                sort_by: {
+                    "createdDate": "desc"
+                }
+            }
+        };
+        const orgIdCounts = [];
+        if (this.additionalData && this.additionalData.length > 0) {
+            this.additionalData.forEach((org) => {
+                if (org.identifier) {
+                    orgIdCounts.push({
+                        id: org.identifier,
+                        count: 0
+                    });
+                }
+            });
+        }
+        return this.http.post(`${API_ENDPOINT.USERS_SEARCH}`, requestBody).pipe(map((res) => {
+            if (res && res.result && res.result.response && res.result.response.count) {
+                const facetsValue = res.result.response.facets || [];
+                if (facetsValue && facetsValue.length > 0) {
+                    const orgFacet = facetsValue.find((facet) => facet.name === 'rootOrgId');
+                    if (orgFacet && orgFacet.values) {
+                        orgFacet.values.forEach((value) => {
+                            const orgIndex = orgIdCounts.findIndex(org => org.id === value.name);
+                            if (orgIndex !== -1) {
+                                orgIdCounts[orgIndex].count = value.count || 0;
+                            }
+                        });
+                    }
+                }
+            }
+            this.userCountData = orgIdCounts;
+        }), catchError(error => {
+            console.error('Error fetching user count data:', error);
+            return of({});
+        }));
+    }
+    getUserCount(term) {
+        if (term && term.additionalProperties && term.additionalProperties.orgId) {
+            if (this.userCountData && this.userCountData.length > 0) {
+                const userCount = this.userCountData.filter((user) => user.id === term.additionalProperties.orgId)[0]?.count;
+                return userCount || 0;
+            }
+        }
+        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' }); }
 }
@@ -7573,7 +7729,7 @@ class MaterialModule {
             MatButtonToggleModule,
             MatCardModule,
             MatCheckboxModule,
-            MatChipsModule,
+            MatLegacyChipsModule,
             MatStepperModule,
             MatDatepickerModule,
             MatDialogModule,
@@ -7620,7 +7776,7 @@ class MaterialModule {
             MatButtonToggleModule,
             MatCardModule,
             MatCheckboxModule,
-            MatChipsModule,
+            MatLegacyChipsModule,
             MatStepperModule,
             MatDatepickerModule,
             MatDialogModule,
@@ -7672,7 +7828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatButtonToggleModule,
                         MatCardModule,
                         MatCheckboxModule,
-                        MatChipsModule,
+                        MatLegacyChipsModule,
                         MatStepperModule,
                         MatDatepickerModule,
                         MatDialogModule,
@@ -7772,7 +7928,7 @@ 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: i5.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, decorators: [{
             type: Component,
@@ -7946,7 +8102,7 @@ class PendingApprovalComponent {
         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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.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: i6.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$1.DatePipe, name: "date" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, decorators: [{
             type: Component,
@@ -8796,8 +8952,8 @@ 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: i5$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5$1.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: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.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$1.AsyncPipe, name: "async" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, decorators: [{
             type: Component,
@@ -8805,7 +8961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: OdcsService }, { type: i5$2.MatLegacySnackBar }, { type: i0.ChangeDetectorRef }]; } });
+                }] }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: OdcsService }, { type: i3$1.MatLegacySnackBar }, { type: i0.ChangeDetectorRef }]; } });
 
 class ConnectorComponent {
     constructor(dialogRef, data, localScv, fb) {
@@ -8843,7 +8999,7 @@ class ConnectorComponent {
         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: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, decorators: [{
             type: Component,
@@ -8905,8 +9061,8 @@ 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: i5$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i5.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.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: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, decorators: [{
             type: Component,
@@ -8914,7 +9070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: FrameworkService }, { type: i5$2.MatLegacySnackBar }]; } });
+                }] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
 
 class CreateTermFromFrameworkComponent {
     constructor(dialogRef, data, dialog, frameWorkService, fb, _snackBar) {
@@ -9703,8 +9859,8 @@ class CreateTermFromFrameworkComponent {
     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: i5$2.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.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: i5.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.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.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: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i8.MatChipRemove, 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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.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"] }] }); }
+    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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, decorators: [{
             type: Component,
@@ -9712,26 +9868,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i5$2.MatLegacySnackBar }]; } });
+                }] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i3$1.MatLegacySnackBar }]; } });
 
 class OrgHierarchyAddModalComponent {
-    constructor(dialogRef, data, treeHierarchySvc) {
+    constructor(dialogRef, data, frameworkService, snackbar) {
         this.dialogRef = dialogRef;
         this.data = data;
-        this.treeHierarchySvc = treeHierarchySvc;
+        this.frameworkService = frameworkService;
+        this.snackbar = snackbar;
         this.searchControl = new FormControl('');
+        this.parentSearchControl = new FormControl('');
         this.selectedOrgsControl = new FormControl([]);
+        this.parentSelectedOrgControl = new FormControl('');
         this.orgOptions = [];
         this.filteredOptions = [];
+        this.parentFilteredOptions = [];
         this.destroy$ = new Subject();
     }
     ngOnInit() {
         this.getSelectedStateOrg();
+        if (this.data && this.data.type === 'update') {
+            this.frameworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
+            this.getParentTerms(this.data.previous[this.data.previous.length - 2]);
+        }
         this.searchControl.valueChanges
             .pipe(takeUntil(this.destroy$))
             .subscribe((value) => {
             this.filterOptions(value);
         });
+        this.parentSearchControl.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((value) => {
+            this.filterParentOptions(value);
+        });
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -9772,6 +9941,15 @@ class OrgHierarchyAddModalComponent {
         event.stopPropagation();
         this.searchControl.setValue('');
     }
+    filterParentOptions(searchValue) {
+        const originalOptions = this.frameworkData?.categories?.find((v) => v.code === this.data?.previous[this.data.previous.length - 2]?.category)?.terms || [];
+        if (!searchValue) {
+            this.parentFilteredOptions = [...originalOptions];
+            return;
+        }
+        const filterValue = searchValue.toLowerCase();
+        this.parentFilteredOptions = originalOptions.filter((option) => option.name.toLowerCase().includes(filterValue));
+    }
     toggleSelectAll(event) {
         event.stopPropagation();
         if (this.isAllSelected()) {
@@ -9791,6 +9969,10 @@ class OrgHierarchyAddModalComponent {
         const selectedIds = this.selectedOrgsControl.value || [];
         return this.orgOptions.filter((option) => selectedIds.includes(option.identifier));
     }
+    getParentSelectedOptions() {
+        const selectedId = this.parentSelectedOrgControl.value;
+        return this.parentFilteredOptions.find((option) => option.code === selectedId);
+    }
     removeSelected(id) {
         const currentSelection = this.selectedOrgsControl.value || [];
         this.selectedOrgsControl.setValue(currentSelection.filter((value) => value !== id));
@@ -9799,54 +9981,142 @@ class OrgHierarchyAddModalComponent {
         this.dialogRef.close();
     }
     onSave() {
+        if (this.data && this.data.type === 'update' && this.selectedOrgsControl?.value?.find((v) => v === this.parentSelectedOrgControl.value)) {
+            this.snackbar.open('You cannot select the parent organization as a child organization');
+            return;
+        }
+        if (this.data && this.data.type === 'update' && this.selectedOrgsControl?.value?.length === 0 && !this.parentSelectedOrgControl.value) {
+            this.snackbar.open('Please select at least one organization or parent organization');
+            return;
+        }
+        if (this.data && this.data.type === 'add' && this.selectedOrgsControl?.value?.length === 0) {
+            this.snackbar.open('Please select at least one organization');
+            return;
+        }
         const selectedOrgs = this.getSelectedOptions();
-        this.dialogRef.close(selectedOrgs);
+        const parentSelectedOrg = this.getParentSelectedOptions();
+        this.dialogRef.close({
+            selectedOrg: selectedOrgs,
+            paparentSelectedOrg: parentSelectedOrg,
+            currentTerm: this.data?.previous[this.data.previous.length - 1],
+            type: this.data.type,
+        });
     }
     async getSelectedStateOrg() {
-        const requestBody = {
-            request: {
-                filters: {
-                    status: 1,
-                    ministryOrStateType: (this.data && this.data.selectedOrgData) ?
-                        this.data.selectedOrgData.sbOrgType : '',
-                    ministryOrStateId: (this.data && this.data.selectedOrgData) ?
-                        this.data.selectedOrgData.identifier : ''
-                },
-                sort_by: {
-                    createdDate: "desc"
-                },
-                limit: 100,
-                offset: 0,
-                fields: [
-                    'identifier',
-                    'orgName',
-                    'description',
-                    'parentOrgName',
-                    'ministryOrStateId',
-                    'ministryOrStateType',
-                    'ministryOrStateName'
-                ]
+        const orgListData = this.frameworkService.additionalData || [];
+        if (orgListData && orgListData.length > 0) {
+            const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
+            let orgIdsAdded = [];
+            if (framworkData && framworkData.categories && framworkData.categories.length > 0) {
+                framworkData.categories.forEach((category) => {
+                    if (category.terms && category.terms.length > 0) {
+                        category.terms.forEach((term) => {
+                            if (term.additionalProperties && term.additionalProperties.orgId) {
+                                if (!orgIdsAdded.includes(term.additionalProperties.orgId)) {
+                                    orgIdsAdded.push(term.additionalProperties.orgId);
+                                }
+                            }
+                        });
+                    }
+                });
             }
-        };
-        const orgListData = await this.treeHierarchySvc.orgSerachApi(requestBody).toPromise().catch(err => {
-            console.error('Error fetching organization data:', err);
-        });
-        if (orgListData && orgListData.result &&
-            orgListData.result.response && orgListData.result.response.content) {
-            this.orgOptions = orgListData.result.response.content || [];
+            const filteredOrgList = orgListData.filter((org) => !orgIdsAdded.includes(org.identifier));
+            this.orgOptions = filteredOrgList || [];
             this.filteredOptions = [...this.orgOptions];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: TreeHierarchyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <div class=\"header-title\">\n      <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n    </div>\n    <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Content -->\n  <div class=\"modal-content\">\n    <div class=\"content-container\">\n        <div class=\"flex flex-col org-container\">\n          <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n          <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n          <div class=\"dashed-line\"></div>\n        </div>\n        <ng-container *ngIf=\"data?.previous?.length > 0\">\n            <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n            [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n                <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n                <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n                <div class=\"dashed-line\"></div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"data?.currentData\">\n            <div class=\"flex flex-col org-container\" \n            [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n                <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n                \n                <!-- Searchable multi-select -->\n                <div class=\"select-search-container\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                        <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n                        [panelClass]=\"'mat-select-panel-below'\" disableOptionCentering [disableOptionCentering]=\"true\"\n                        multiple> <!-- Added the multiple attribute here -->\n                            <!-- Search container -->\n                            <div class=\"search-container\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"$event.key === ' ' ? $event.stopPropagation() : null\" (click)=\"$event.stopPropagation()\"\n                                class=\"search-input\" #searchInput>\n                            </div>\n                            <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n                                {{organization.orgName}}\n                            </mat-option>\n                            <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n                                No data found\n                            </mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n                \n            </div>\n        </ng-container>\n    </div>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n      Cancel\n    </button>\n    <button \n      mat-stroked-button \n      class=\"btn-common btn-primary\" \n      [disabled]=\"!selectedOrgsControl.value?.length\" \n      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.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.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.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"] }] }); }
+    handleKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+        return true;
+    }
+    handleSearchKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+        if (event.key === ' ' && event.target instanceof HTMLInputElement) {
+            event.stopPropagation();
+        }
+        return true;
+    }
+    checkAndClose(selectElement) {
+        if (!this.selectedOrgsControl.value || this.selectedOrgsControl.value.length === 0) {
+            this.snackbar.open('Please select at least one organization');
+        }
+        else {
+            selectElement.close();
+        }
+    }
+    getNameOfOrg(id) {
+        return this.filteredOptions.find((option) => option.identifier === id)?.orgName || '';
+    }
+    removeOrg(itemToRemove) {
+        const currentValues = this.selectedOrgsControl.value || [];
+        const updatedValues = currentValues.filter(item => item !== itemToRemove);
+        this.selectedOrgsControl.setValue(updatedValues);
+    }
+    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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sb-cb-tree-org-hierarchy-add-modal', template: "<div class=\"org-hierarchy-modal\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <div class=\"header-title\">\n      <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n    </div>\n    <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Content -->\n  <div class=\"modal-content\">\n    <div class=\"content-container\">\n        <div class=\"flex flex-col org-container\">\n          <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n          <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n          <div class=\"dashed-line\"></div>\n        </div>\n        <ng-container *ngIf=\"data?.previous?.length > 0\">\n            <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n            [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n                <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n                <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n                <div class=\"dashed-line\"></div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"data?.currentData\">\n            <div class=\"flex flex-col org-container\" \n            [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n                <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n                \n                <!-- Searchable multi-select -->\n                <div class=\"select-search-container\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                        <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n                        [panelClass]=\"'mat-select-panel-below'\" disableOptionCentering [disableOptionCentering]=\"true\"\n                        multiple> <!-- Added the multiple attribute here -->\n                            <!-- Search container -->\n                            <div class=\"search-container\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"$event.key === ' ' ? $event.stopPropagation() : null\" (click)=\"$event.stopPropagation()\"\n                                class=\"search-input\" #searchInput>\n                            </div>\n                            <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n                                {{organization.orgName}}\n                            </mat-option>\n                            <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n                                No data found\n                            </mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n                \n            </div>\n        </ng-container>\n    </div>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n      Cancel\n    </button>\n    <button \n      mat-stroked-button \n      class=\"btn-common btn-primary\" \n      [disabled]=\"!selectedOrgsControl.value?.length\" \n      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}\n"] }]
+            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: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
-                }] }, { type: TreeHierarchyService }]; } });
+                }] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
+
+class CategoryEditModuleComponent {
+    constructor(fb, dialogRef, data) {
+        this.fb = fb;
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+        this.initForm();
+    }
+    initForm() {
+        this.categoryForm = this.fb.group({
+            categoryName: [this.data?.columnInfo?.name || '', Validators.required],
+            categoryDescription: [this.data?.columnInfo?.description || '', Validators.maxLength(500)]
+        });
+    }
+    closeDialog() {
+        this.dialogRef.close();
+    }
+    saveCategoryName() {
+        if (this.categoryForm.valid) {
+            const updatedCategory = {
+                formData: {
+                    categoryName: this.categoryForm.get('categoryName')?.value || '',
+                    categotyDescription: this.categoryForm.get('categoryDescription')?.value || ''
+                },
+                columnData: this.data.columnInfo
+            };
+            this.dialogRef.close({
+                updated: true,
+                column: updatedCategory
+            });
+        }
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
+                    type: Inject,
+                    args: [MAT_LEGACY_DIALOG_DATA]
+                }] }]; } });
 
 class ConnectorService {
     constructor() {
@@ -9910,17 +10180,50 @@ class ConnectorService {
         }
         let container = treeViewComponent.querySelector('#leader-line-container');
         if (!container) {
+            let overflowWrapper = document.createElement('div');
+            overflowWrapper.id = 'leader-line-overflow-wrapper';
+            overflowWrapper.style.position = 'absolute';
+            overflowWrapper.style.top = '80px';
+            overflowWrapper.style.bottom = '0';
+            overflowWrapper.style.left = '0';
+            overflowWrapper.style.right = '0';
+            overflowWrapper.style.overflow = 'hidden';
+            overflowWrapper.style.pointerEvents = 'none';
             container = document.createElement('div');
             container.id = 'leader-line-container';
             container.style.position = 'absolute';
             container.style.top = '0';
+            container.style.bottom = '0';
             container.style.left = '0';
+            container.style.right = '0';
             container.style.width = '100%';
             container.style.height = '100%';
-            container.style.pointerEvents = 'none';
-            container.style.zIndex = '1000';
-            container.style.overflow = 'hidden';
-            treeViewComponent.appendChild(container);
+            const resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    if (entry.target === treeViewComponent) {
+                        container.style.width = `${entry.contentRect.width}px`;
+                        if (this.connectorMap) {
+                            Object.values(this.connectorMap).forEach((connector) => {
+                                if (connector && connector.lines) {
+                                    connector.lines.forEach((item) => {
+                                        if (item.line && typeof item.line.position === 'function') {
+                                            item.line.position();
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                    }
+                }
+            });
+            resizeObserver.observe(treeViewComponent);
+            treeViewComponent.addEventListener('scroll', () => {
+                overflowWrapper.style.width = `${treeViewComponent.scrollWidth}px`;
+                overflowWrapper.style.height = `${treeViewComponent.scrollHeight}px`;
+                this.repositionAllLines();
+            });
+            overflowWrapper.appendChild(container);
+            treeViewComponent.appendChild(overflowWrapper);
         }
         this.elmWrapper = container;
         let sourceElement = source;
@@ -10077,6 +10380,19 @@ class ConnectorService {
         }
         this.updateConnectorsMap({});
     }
+    repositionAllLines() {
+        if (this.connectorMap) {
+            Object.values(this.connectorMap).forEach((connector) => {
+                if (connector && connector.lines) {
+                    connector.lines.forEach((item) => {
+                        if (item.line && typeof item.line.position === 'function') {
+                            item.line.position();
+                        }
+                    });
+                }
+            });
+        }
+    }
     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 }); }
 }
@@ -10097,6 +10413,7 @@ class TermCardComponent {
         this.localConnectionService = localConnectionService;
         this.approvalService = approvalService;
         this.dialog = dialog;
+        this.enableThreeDots = true;
         this.isApprovalRequired = false;
         this.approvalList = [];
         this.heightLighted = [];
@@ -10104,6 +10421,7 @@ class TermCardComponent {
         this.loaded = {};
         this.isSelected = new EventEmitter();
         this.selectedCard = new EventEmitter();
+        this.cardAction = new EventEmitter();
     }
     ngOnInit() {
         this.isApprovalRequired = this.localConnectionService.getConfigInfo().isApprovalRequired;
@@ -10123,8 +10441,8 @@ class TermCardComponent {
         if (this.frameworkService.isLastColumn(this.data.category)) {
             return;
         }
-        this.isSelected.emit({ element: this.data.children, isSelected: !data.selected });
         this.frameworkService.currentSelection.next({ type: this.data.category, data: data.children, cardRef });
+        this.isSelected.emit({ element: this.data.children, isSelected: !data.selected });
     }
     handleProductClick(term, event) {
         this.selectedCard.emit({ term: term, checked: event.checked });
@@ -10367,18 +10685,45 @@ class TermCardComponent {
             }, 100);
         });
     }
+    menuAction(type, _item) {
+        this.cardAction.emit({ action: type, data: _item });
+    }
+    getuserCount(item) {
+        if (item.children.code) {
+            const tempData = item.columnInfo.children.find((i) => i.code === item.children.code);
+            return tempData?.userCount || 0;
+        }
+        return 0;
+    }
+    openDialog() {
+        this.dialog.open(this.dialogTemplate, {
+            width: '500px',
+            disableClose: true,
+            data: {}
+        });
+    }
+    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: { data: "data" }, outputs: { isSelected: "isSelected", selectedCard: "selectedCard" }, 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\">\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=\"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?.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=\"card-description\">{{data.children.description}} </div>\n            </div>\n        </div>\n\n        <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n        <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n\n        <!-- (click)=\"$event.stopPropagation();\" -->\n         <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\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\">\n            <mat-icon>more_vert</mat-icon>\n            </button>\n         </ng-container>\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}}\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\"  (click)=\"updateHierarchy(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>Update Hierarchy</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"removeConnection(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>Remove Connection</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"manageOrganization(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>Manage Organisation</span>\n        </button> -->\n    </ng-template>\n</mat-menu>", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 0 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{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#0006;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.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.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}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermCardComponent, selector: "lib-term-card", inputs: { enableThreeDots: "enableThreeDots", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-term-card', template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n    <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n    <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n    <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n        [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n    data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n        id=\"{{data.children.name}}\"\n        [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n        <!-- (click)=\"data.selected=!data.selected\" -->   \n        <div class=\"term-card-parent\">\n            <!-- <Below element is to show id on top left of the card> -->\n            <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n             \n            <div class=\"term-card-content\">\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=\"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?.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=\"card-description\">{{data.children.description}} </div>\n            </div>\n        </div>\n\n        <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n        <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n\n        <!-- (click)=\"$event.stopPropagation();\" -->\n         <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\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\">\n            <mat-icon>more_vert</mat-icon>\n            </button>\n         </ng-container>\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}}\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\"  (click)=\"updateHierarchy(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>Update Hierarchy</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"removeConnection(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>Remove Connection</span>\n        </button>\n        <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"manageOrganization(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>Manage Organisation</span>\n        </button> -->\n    </ng-template>\n</mat-menu>", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 0 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{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#0006;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.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.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}\n"] }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { data: [{
+            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: [{
+                type: ViewChild,
+                args: ['dialogTemplate']
+            }], enableThreeDots: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], isSelected: [{
                 type: Output
             }], selectedCard: [{
                 type: Output
+            }], cardAction: [{
+                type: Output
             }] } });
 
 class TreeColumnViewComponent {
@@ -10386,10 +10731,12 @@ class TreeColumnViewComponent {
         this.frameworkService = frameworkService;
         this.connectorService = connectorService;
         this.approvalService = approvalService;
+        this.isChildOrg = false;
         this.connectorMapping = {};
         this.updateTaxonomyTerm = new EventEmitter(true);
         this.updateTermList = new EventEmitter();
         this.cardsCount = new EventEmitter();
+        this.cardAction = new EventEmitter();
         this.columnData = [];
         this.termshafall = [];
         this.searchValue = new UntypedFormControl('', [Validators.required]);
@@ -10583,6 +10930,7 @@ class TreeColumnViewComponent {
         }
     }
     searchFilterData(_ele) {
+        this.setColumnItems();
         const back = this.frameworkService.getPreviousCategory(this.column.code);
         if (back && back.code) {
             let backColumData = this.frameworkService.selectionList.get(back.code);
@@ -10593,7 +10941,16 @@ class TreeColumnViewComponent {
                 }, 200);
             }
         }
-        this.setColumnItems();
+        else {
+            if (this.columnItems?.length === 0) {
+                this.frameworkService.removeOldLine();
+            }
+            else {
+                setTimeout(() => {
+                    this.makeFirstTermSelected();
+                }, 500);
+            }
+        }
     }
     clearSearch() {
         this.searchValue.setValue('');
@@ -10614,7 +10971,7 @@ class TreeColumnViewComponent {
             this.connectorMapping['box' + (this.column.index - 1)].lines = connectionLines;
         }
         else {
-            if (this.column.index > 1) {
+            if (this.column.index > 1 && this.connectorMapping['box' + (this.column.index - 1)]) {
                 this.connectorMapping['box' + (this.column.index - 1)].lines = [{ target: elementClicked, line: '', targetType: 'element' }];
                 this.connectorService.updateConnectorsMap(this.connectorMapping);
                 const connectionLines = this.connectorService._drawLine(this.connectorMapping['box' + (this.column.index - 1)].source, this.connectorMapping['box' + (this.column.index - 1)].lines, null, '#box' + (this.column.index - 1), '#box' + this.column.index);
@@ -10673,22 +11030,42 @@ class TreeColumnViewComponent {
             this.newTermSubscription.unsubscribe();
         }
     }
+    cardActionEmit(event) {
+        this.cardAction.emit(event);
+    }
+    makeFirstTermSelected() {
+        const firstListItem = this.frameworkService.list.entries().next().value;
+        if (firstListItem && firstListItem.length >= 2) {
+            if (firstListItem[1] && firstListItem[1].children && firstListItem[1].children.length) {
+                const firstTerm = firstListItem[1].children[0];
+                const cardRef = document.getElementById(firstTerm.name);
+                firstTerm.selected = true;
+                this.frameworkService.cardClkData = firstTerm;
+                this.frameworkService.CurrentCardClk.next(firstTerm.category);
+                this.frameworkService.currentSelection.next({ type: firstTerm.category, data: firstTerm, cardRef });
+            }
+        }
+    }
     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" }, outputs: { updateTaxonomyTerm: "updateTaxonomyTerm", updateTermList: "updateTermList", cardsCount: "cardsCount" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-2\">\n            <div class=rsearch>\n                <!-- <ng-container *ngIf=\"column?.config?.showSearch\"> -->\n                    <div class=\"sinput mat-field-rounded\">\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 class=\"\">clear</mat-icon>\n                    </button>\n                    </div>\n                    \n                <!-- </ng-container> -->\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                (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\">\n            </lib-term-card>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #noDataTemplate>\n    <!-- <div>No {{column.name}} associated</div> -->\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"showLoadMoreBtn\">\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 .search-icon{position:absolute;top:12px;font-size:20px;left:10px}.search .rsearch{display:flex;position:relative;flex:1 1 auto}.search .sinput{width:100%;border-radius:20px;border:1px solid #d5d0d0;padding:8px 8px 8px 34px;margin-top:0;font: 14px Lato;font-weight:400;box-sizing:border-box;height:42px}.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}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: ["data"], outputs: ["isSelected", "selectedCard"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-2\">\n            <div class=rsearch>\n                <!-- <ng-container *ngIf=\"column?.config?.showSearch\"> -->\n                    <div class=\"sinput mat-field-rounded\">\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 class=\"\">clear</mat-icon>\n                    </button>\n                    </div>\n                    \n                <!-- </ng-container> -->\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                (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\">\n            </lib-term-card>\n        </div>\n    </ng-container>\n</ng-container>\n<ng-template #noDataTemplate>\n    <!-- <div>No {{column.name}} associated</div> -->\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"showLoadMoreBtn\">\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 .search-icon{position:absolute;top:12px;font-size:20px;left:10px}.search .rsearch{display:flex;position:relative;flex:1 1 auto}.search .sinput{width:100%;border-radius:20px;border:1px solid #d5d0d0;padding:8px 8px 8px 34px;margin-top:0;font: 14px Lato;font-weight:400;box-sizing:border-box;height:42px}.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}\n"] }]
+            args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-5\">\n            <div class=\"rsearch\">\n                <div class=\"sinput mat-field-rounded flex flex-middle\">\n                    <mat-icon class=\"search-icon\">search</mat-icon>\n                    <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n                    <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n                        <mat-icon>clear</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n    <ng-container *ngFor=\"let child of columnItems; let j = index\">\n        <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n            <lib-term-card\n                [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n                [enableThreeDots]=\"isChildOrg ? 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: [{
                 type: Input
             }], containerId: [{
                 type: Input
+            }], isChildOrg: [{
+                type: Input
             }], updateTaxonomyTerm: [{
                 type: Output
             }], updateTermList: [{
                 type: Output
             }], cardsCount: [{
                 type: Output
+            }], cardAction: [{
+                type: Output
             }] } });
 
 class TreeViewComponent {
@@ -10707,6 +11084,7 @@ class TreeViewComponent {
         this.workFlowStatus = '';
         this.sentForApprove = new EventEmitter();
         this.loaderEnable = new EventEmitter();
+        this.manageOrg = new EventEmitter();
         this.mapping = {};
         this.heightLighted = [];
         this.localList = [];
@@ -10724,8 +11102,6 @@ class TreeViewComponent {
         this.isFraworkLoading = true;
     }
     ngOnInit() {
-    }
-    ngOnChanges() {
         this.draftTerms = this.approvalList;
         this.init();
         this.showActionBar = this.isApprovalView ? true : false;
@@ -10736,12 +11112,14 @@ class TreeViewComponent {
         });
         this.isEnableds();
     }
+    ngOnChanges() {
+    }
     ngAfterContentChecked() {
         this.cdr.detectChanges();
     }
     init() {
         this.initConfig();
-        this.frameworkService.getFrameworkInfo((this.orgSelectedData) ? this.orgSelectedData : '').subscribe(() => {
+        this.frameworkService.getFrameworkInfo((this.orgSelectedData) ? this.orgSelectedData : '', (this.childOrgData) ? this.childOrgData : '').subscribe(() => {
             this.connectorSvc.removeAllLines();
             this.frameworkService.categoriesHash.value.forEach((cat) => {
                 this.loaded[cat.code] = true;
@@ -10929,13 +11307,14 @@ class TreeViewComponent {
             }
         }
     }
-    openOrganizationDialog(column, _index) {
+    openOrganizationDialog(column, _index, typeSelected) {
         const treeListData = this.frameworkService.getPreviousSelectedTerms(column.code);
         const dialog = this.dialog.open(OrgHierarchyAddModalComponent, {
             data: {
                 previous: treeListData,
                 currentData: column,
                 selectedOrgData: this.orgSelectedData,
+                type: typeSelected
             },
             autoFocus: true,
             restoreFocus: true,
@@ -10945,10 +11324,25 @@ class TreeViewComponent {
             panelClass: 'right-side-modal',
             maxWidth: '100vw'
         });
-        dialog.afterClosed().subscribe((_res) => {
-            if (_res && _res.length > 0) {
+        dialog.afterClosed().subscribe(async (_res) => {
+            if (_res && _res.type === 'add') {
                 this.treeHierarchySvc.setLoaderState(true);
-                this.createTerms(_res, column);
+                this.createTerms(_res.selectedOrg, column);
+            }
+            else if (_res && _res.type === 'update') {
+                if (_res.paparentSelectedOrg) {
+                    await this.updateParentAssociation(_res.paparentSelectedOrg, _res.currentTerm);
+                }
+                if (_res.selectedOrg && _res.selectedOrg.length > 0) {
+                    this.treeHierarchySvc.setLoaderState(true);
+                    this.createTerms(_res.selectedOrg, column);
+                }
+                else {
+                    this.publishFramework({
+                        id: this.orgSelectedData.orgHierarchyFrameworkId || '',
+                        category: ''
+                    });
+                }
             }
         });
     }
@@ -11006,10 +11400,32 @@ class TreeViewComponent {
         this.categoryList.push(event);
     }
     getCount(code) {
+        const allCategories = Array.from(this.frameworkService.list.values());
+        const currentCategoryIndex = allCategories.findIndex(cat => cat.code === code);
+        for (let i = 0; i < currentCategoryIndex; i++) {
+            const prevCategoryCode = allCategories[i].code;
+            const hasPrevSelection = this.frameworkService.selectionList.has(prevCategoryCode);
+            if (!hasPrevSelection) {
+                return 0;
+            }
+        }
         let count = 0;
-        if (this.categoryList) {
-            const category = this.categoryList.find((category) => category.category === code);
-            count = category && category.count ? category.count : 0;
+        const prevCategory = this.frameworkService.getPreviousCategory(code);
+        if (prevCategory) {
+            const prevSelectedTerm = this.frameworkService.selectionList.get(prevCategory.code);
+            if (prevSelectedTerm) {
+                if (prevSelectedTerm.children && prevSelectedTerm.children.length > 0) {
+                    count = prevSelectedTerm.children.filter((child) => !child.isDeleted && child.status !== 'Retired' &&
+                        (child.category === code || (child.associations &&
+                            child.associations.some((assoc) => assoc.category === code)))).length;
+                    return count;
+                }
+            }
+            return 0;
+        }
+        const categoryData = this.frameworkService.list.get(code);
+        if (categoryData && categoryData.children) {
+            count = categoryData.children.filter((child) => !child.isDeleted && child.status !== 'Retired').length;
         }
         return count;
     }
@@ -11079,12 +11495,13 @@ class TreeViewComponent {
         }
         return false;
     }
-    createTerms(selectedList, column) {
+    async createTerms(selectedList, column) {
         const frameworkData = {
             id: this.orgSelectedData.orgHierarchyFrameworkId || '',
             category: column.code || '',
         };
-        selectedList.forEach(async (ele) => {
+        let createdNodeId = [];
+        for await (const ele of selectedList) {
             const requestBody = {
                 request: {
                     term: {
@@ -11092,8 +11509,7 @@ class TreeViewComponent {
                         description: ele.description || '',
                         code: v4(),
                         additionalProperties: {
-                            identifier: ele.ministryOrStateId || '',
-                            parentOrgName: ele.ministryOrStateName || '',
+                            orgId: ele.identifier || ''
                         }
                     }
                 }
@@ -11102,37 +11518,67 @@ class TreeViewComponent {
                 console.error('Error in creating term', err);
             });
             if (createTremsRes && createTremsRes.result && createTremsRes.result.node_id) {
-                this.updateAssociation(createTremsRes.result.node_id[0], frameworkData);
+                createdNodeId.push(createTremsRes.result.node_id[0]);
             }
-        });
+            else {
+                this._snackBar.open('Error in creating term', 'cancel');
+                this.treeHierarchySvc.setLoaderState(false);
+                return;
+            }
+        }
+        if (createdNodeId.length === selectedList.length) {
+            if (column.index > 1) {
+                await this.updateAssociation(createdNodeId, frameworkData, column);
+            }
+            this.publishFramework(frameworkData);
+        }
     }
-    async updateAssociation(nodeId, frameworkData) {
+    async updateAssociation(nodeId, frameworkData, column) {
+        const prev = this.frameworkService.getPreviousCategory(column.code);
+        let prevTrem = this.frameworkService.getPreviousSelectedTerms(column.code);
+        const tempFrameData = ___default.cloneDeep(this.frameworkService.completeResponse);
         const requestBody = {
             request: {
                 term: {
-                    associations: [
-                        {
-                            identifier: nodeId
-                        },
-                    ]
+                    associations: []
                 }
             }
         };
-        const nodeIdParts = nodeId.split('_');
+        if (prev && prevTrem) {
+            prevTrem = prevTrem.find((ele) => ele.category === prev.code);
+            prevTrem = tempFrameData.categories.find((ele) => ele.code === prev.code).terms.find((ele) => ele.code === prevTrem.code);
+            if (prevTrem && prevTrem.associations && prevTrem.associations.length > 0) {
+                prevTrem.associations.forEach((ele) => {
+                    requestBody.request.term.associations.push({
+                        identifier: ele.identifier
+                    });
+                });
+            }
+        }
+        if (nodeId && nodeId.length > 0) {
+            nodeId.forEach((ele) => {
+                requestBody.request.term.associations.push({
+                    identifier: ele
+                });
+            });
+        }
+        frameworkData.category = prevTrem.category || '';
+        const nodeIdParts = prevTrem.identifier.split('_');
         const codeId = nodeIdParts[nodeIdParts.length - 1];
         const updateAssociationRes = await this.treeHierarchySvc.updateFrameworkAssociation(requestBody, frameworkData, codeId).toPromise().catch(err => {
             console.error('Error in updating association', err);
         });
         if (updateAssociationRes && updateAssociationRes.result && updateAssociationRes.result.node_id) {
-            this.publishFramework(frameworkData);
         }
     }
     publishFramework(frameworkData) {
         this.treeHierarchySvc.publishFreamework(frameworkData).subscribe((res) => {
             if (res && res.result && res.result.publishStatus) {
-                this._snackBar.open(`${res.result.publishStatus}`, 'cancel');
-                this.treeHierarchySvc.setLoaderState(false);
-                this.init();
+                setTimeout(() => {
+                    this._snackBar.open(`Organization hierarchy updated successfully`);
+                    this.treeHierarchySvc.setLoaderState(false);
+                    this.init();
+                }, 5000);
             }
             else {
                 this._snackBar.open('Error in publishing framework', 'cancel');
@@ -11143,13 +11589,266 @@ class TreeViewComponent {
             this.treeHierarchySvc.setLoaderState(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: i5$2.MatLegacySnackBar }, { token: ConnectorService }, { token: i0.ChangeDetectorRef }, { token: TreeHierarchyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n    <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n        <mat-icon>{{app_strings.build}}</mat-icon>\n    </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n    <ng-container *ngFor=\"let column of list; let i = index;\">\n        <div class=\"flex-1 felx-col  col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n            <div class=\"category-heading-sticky\">\n                <div class=\"category-heading-container\">\n                    <div class='category-header'>\n                        <div class=\"category-header-items w-full\" id=\"box{{i}}Header\">\n                            <ng-container *ngIf=\"column?.config?.iconEnabled\">\n                                <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n                            </ng-container>\n                            <span class=\"flex-1 mat-body-1\">\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                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <!-- {{column.code}} -->\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>{{isLoading}} Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
+    removeConnection(data) {
+        const association = this.getSelectedTermsAssociation(data.children.code);
+        let count = 0;
+        if (association && association.length > 0) {
+            association.forEach((assoc) => {
+                if (assoc.ids && assoc.ids.length > 0) {
+                    count += assoc.ids.length;
+                }
+            });
+        }
+        if (count > 0) {
+            const dialogData = {
+                dialogType: 'warning',
+                descriptions: [
+                    {
+                        header: `${count || 0} Organisation${count > 1 ? 's' : ''} will be removed from organisation hierarchy.`,
+                        headerClass: 'flex items-center justify-center text-blue',
+                        messages: [
+                            {
+                                msgClass: 'text-blue margin-bottom-s',
+                                msg: `Do you want to proceed?`,
+                            },
+                        ],
+                    },
+                ],
+                footerClass: 'items-center justify-center',
+                buttons: [
+                    {
+                        btnText: 'No',
+                        btnClass: 'btn-common btn-secondary',
+                        response: false,
+                    },
+                    {
+                        btnText: 'Yes',
+                        btnClass: 'btn-common btn-primary',
+                        response: true,
+                    },
+                ],
+            };
+            const dialogRef = this.dialog.open(ConforamtionPopupComponent, {
+                data: dialogData,
+                autoFocus: false,
+                width: '600px',
+                maxWidth: '80vw',
+                maxHeight: '90vh',
+                disableClose: true,
+            });
+            dialogRef.afterClosed().subscribe((res) => {
+                if (res) {
+                    this.retireTermFunction(association);
+                }
+            });
+        }
+        else {
+            this._snackBar.open(`Error in removing the organisation`, 'cancel');
+        }
+    }
+    async retireTermFunction(association) {
+        let count = 0;
+        this.treeHierarchySvc.setLoaderState(true);
+        for await (const ele of association) {
+            const requestBody = {
+                request: {
+                    contentIds: ele.ids
+                }
+            };
+            const frameworkObj = {
+                id: this.frameworkService.completeResponse.code,
+                category: ele.category || '',
+            };
+            const retireRes = await this.treeHierarchySvc.retireTerm(requestBody, frameworkObj).toPromise().catch((_err) => {
+                this.treeHierarchySvc.setLoaderState(false);
+                this._snackBar.open(`Failed to remove connection.`, 'cancel');
+            });
+            if (retireRes && retireRes.params && retireRes.params.status?.toLowerCase() === 'successful') {
+                count += 1;
+            }
+            else {
+                this.treeHierarchySvc.setLoaderState(false);
+                this._snackBar.open(`Failed to remove connection.`, 'cancel');
+            }
+        }
+        if (count === association.length) {
+            await this.publishFramework({
+                id: this.frameworkService.completeResponse.code,
+            });
+        }
+        else {
+            this.treeHierarchySvc.setLoaderState(false);
+            this._snackBar.open(`Failed to remove connection.`, 'cancel');
+        }
+    }
+    cardActionEmit(event) {
+        switch (event.action) {
+            case 'remove-term':
+                this.removeConnection(event.data);
+                break;
+            case 'update-hierarchy':
+                this.openOrganizationDialog(this.list[this.list.findIndex((item) => item.code === event.data.category) + 1], '', 'update');
+                break;
+            case 'manage-org':
+                this.manageOrg.emit(event.data.children);
+                break;
+        }
+    }
+    editCategoryName(column, index) {
+        const dialog = this.dialog.open(CategoryEditModuleComponent, {
+            data: {
+                columnInfo: column,
+                frameworkId: this.frameworkService.getFrameworkId(),
+                colIndex: index
+            },
+            width: '800px',
+            panelClass: 'category-edit-container',
+            position: { top: '50px' }
+        });
+        dialog.afterClosed().subscribe((res) => {
+            if (res) {
+                const requestBody = {
+                    frameworkId: this.frameworkService.getFrameworkId(),
+                    categoryCode: res.column.columnData.code,
+                    categoryName: res.column.formData.categoryName,
+                    categoryDescription: res.column.formData.categotyDescription || ''
+                };
+                this.updateCategory(requestBody);
+            }
+        });
+    }
+    getSelectedTermsAssociation(categoryCode) {
+        let tempData = [];
+        const completeData = ___default.cloneDeep(this.frameworkService.completeResponse);
+        if (completeData && completeData.categories && completeData.categories.length > 0) {
+            completeData.categories.forEach((category, catIndex) => {
+                if (category.terms && category.terms.length > 0) {
+                    category.terms.forEach((term) => {
+                        if (term.code === categoryCode) {
+                            tempData.push({
+                                name: term.name,
+                                category: term.category,
+                                ids: [term.code],
+                                nextCategory: term.children ? term.children[0].category : '',
+                                assocIds: []
+                            });
+                            if (term.associations && term.associations.length > 0) {
+                                term.associations.forEach((assoc) => {
+                                    const getIndex = tempData.findIndex((item) => item.ids && item.ids.includes(term.code));
+                                    tempData[getIndex]['assocIds'].push(assoc.code);
+                                });
+                            }
+                        }
+                    });
+                }
+                if (catIndex > 0 && category.terms && category.terms.length > 0) {
+                    category.terms.forEach((term) => {
+                        tempData.forEach((item) => {
+                            if (item.nextCategory === term.category && item.assocIds.includes(term.code)) {
+                                const pushData = {
+                                    name: term.name,
+                                    category: term.category,
+                                    ids: [term.code],
+                                    nextCategory: term.children ? term.children[0].category : '',
+                                    assocIds: []
+                                };
+                                if (term.associations && term.associations.length > 0) {
+                                    term.associations.forEach((assoc) => {
+                                        pushData['assocIds'].push(assoc.code);
+                                    });
+                                }
+                                tempData.push(pushData);
+                            }
+                        });
+                    });
+                }
+            });
+        }
+        return tempData;
+    }
+    async updateCategory(event) {
+        const requestBody = {
+            request: {
+                category: {
+                    name: event.categoryName || '',
+                    description: event.categoryDescription || '',
+                }
+            }
+        };
+        const frameworkObj = {
+            id: event.frameworkId,
+            category: event.categoryCode
+        };
+        this.treeHierarchySvc.setLoaderState(true);
+        const updateCatRes = await this.treeHierarchySvc.updateCategory(requestBody, frameworkObj).toPromise().catch((_err) => {
+            this.treeHierarchySvc.setLoaderState(false);
+            if (_err && _err.error && _err.error.params && _err.error.params.errMsg) {
+                this._snackBar.open(`${_err.error.params.errMsg}`);
+            }
+        });
+        if (updateCatRes && updateCatRes.params && updateCatRes.params.status.toLowerCase() === 'successful') {
+            await this.publishFramework(frameworkObj);
+        }
+    }
+    async updateParentAssociation(selectedParent, currentTerm) {
+        const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
+        const parentCategoryData = framworkData.categories.find((cat) => cat.code === selectedParent.category);
+        if (parentCategoryData && parentCategoryData.terms && parentCategoryData.terms.length > 0) {
+            const currentParentTerm = parentCategoryData.terms.find((term) => {
+                if (term.associations && term.associations.length > 0) {
+                    return term.associations.some((assoc) => assoc.code === currentTerm.code);
+                }
+            });
+            if (currentParentTerm) {
+                const updateOldParentAssociation = {
+                    request: {
+                        term: {
+                            associations: []
+                        }
+                    }
+                };
+                currentParentTerm.associations.forEach((assoc) => {
+                    if (assoc.code !== currentTerm.code) {
+                        updateOldParentAssociation.request.term.associations.push({ identifier: assoc.identifier });
+                    }
+                });
+                await this.updateHierarchyAssocication(updateOldParentAssociation, framworkData.identifier, currentParentTerm);
+            }
+            selectedParent = parentCategoryData.terms.find((term) => term.code === selectedParent.code);
+            const updateNewParentAssociation = {
+                request: {
+                    term: {
+                        associations: []
+                    }
+                }
+            };
+            if (selectedParent && selectedParent.associations && selectedParent.associations.length > 0) {
+                selectedParent.associations.forEach((assoc) => {
+                    updateNewParentAssociation.request.term.associations.push({ identifier: assoc.identifier });
+                });
+            }
+            updateNewParentAssociation.request.term.associations.push({ identifier: currentTerm.identifier });
+            await this.updateHierarchyAssocication(updateNewParentAssociation, framworkData.identifier, selectedParent);
+        }
+    }
+    async updateHierarchyAssocication(requestBody, frameworkId, termData) {
+        this.treeHierarchySvc.setLoaderState(true);
+        await this.treeHierarchySvc.updateFrameworkAssociation(requestBody, { id: frameworkId, category: termData.category }, termData.code).toPromise().catch((err) => {
+            console.error('Error in updating association', err);
+            this.treeHierarchySvc.setLoaderState(false);
+            this._snackBar.open(`Error in updating association`, 'cancel');
+        });
+    }
+    checkChildOrg() {
+        return (this.childOrgData?.rootOrgId) ? 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tree-view', template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n    <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n        <mat-icon>{{app_strings.build}}</mat-icon>\n    </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n    <ng-container *ngFor=\"let column of list; let i = index;\">\n        <div class=\"flex-1 felx-col  col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n            <div class=\"category-heading-sticky\">\n                <div class=\"category-heading-container\">\n                    <div class='category-header'>\n                        <div class=\"category-header-items w-full\" id=\"box{{i}}Header\">\n                            <ng-container *ngIf=\"column?.config?.iconEnabled\">\n                                <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n                            </ng-container>\n                            <span class=\"flex-1 mat-body-1\">\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                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <!-- {{column.code}} -->\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>{{isLoading}} Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
-        }], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: i1$3.MatLegacyDialog }, { type: ApprovalService }, { type: i5$2.MatLegacySnackBar }, { type: ConnectorService }, { type: i0.ChangeDetectorRef }, { type: TreeHierarchyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { approvalList: [{
+            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: [{
                 type: Input
             }], isApprovalView: [{
                 type: Input
@@ -11161,10 +11860,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], orgSelectedData: [{
                 type: Input
+            }], childOrgData: [{
+                type: Input
             }], sentForApprove: [{
                 type: Output
             }], loaderEnable: [{
                 type: Output
+            }], manageOrg: [{
+                type: Output
             }] } });
 
 class ApproveViewComponent {
@@ -11213,13 +11916,13 @@ class ApproveViewComponent {
     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: i5$2.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeViewComponent, selector: "lib-tree-view", inputs: ["approvalList", "isApprovalView", "workFlowStatus", "environment", "taxonomyConfig", "orgSelectedData"], outputs: ["sentForApprove", "loaderEnable"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: i5$2.MatLegacySnackBar }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: ApprovalService }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
 
 class CategoriesPreviewComponent {
     constructor() {
@@ -11251,7 +11954,7 @@ 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.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.ɵ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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesPreviewComponent, decorators: [{
             type: Component,
@@ -11317,7 +12020,7 @@ class CreateCategoriesComponent {
         }
     }
     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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.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$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.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$1.TitleCasePipe, name: "titlecase" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
             type: Component,
@@ -11411,7 +12114,7 @@ class ConfigFrameworkComponent {
         });
     }
     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$1.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigFrameworkComponent, decorators: [{
             type: Component,
@@ -11499,9 +12202,11 @@ class TreeHierarchyModule {
             OrderByPipe,
             ConforamtionPopupComponent,
             CreateTermFromFrameworkComponent,
-            OrgHierarchyAddModalComponent], imports: [CommonModule,
+            OrgHierarchyAddModalComponent,
+            CategoryEditModuleComponent], imports: [CommonModule,
             MaterialModule,
-            TreeEditorRoutingModule], exports: [TreeHierarchyComponent,
+            TreeEditorRoutingModule,
+            MatChipsModule], exports: [TreeHierarchyComponent,
             CreateCategoriesComponent,
             ConfigFrameworkComponent,
             TreeViewComponent,
@@ -11519,7 +12224,8 @@ class TreeHierarchyModule {
             TreeHierarchyService
         ], imports: [CommonModule,
             MaterialModule,
-            TreeEditorRoutingModule] }); }
+            TreeEditorRoutingModule,
+            MatChipsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyModule, decorators: [{
             type: NgModule,
@@ -11545,11 +12251,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ConforamtionPopupComponent,
                         CreateTermFromFrameworkComponent,
                         OrgHierarchyAddModalComponent,
+                        CategoryEditModuleComponent,
                     ],
                     imports: [
                         CommonModule,
                         MaterialModule,
                         TreeEditorRoutingModule,
+                        MatChipsModule
                     ],
                     providers: [
                         DatePipe,