@sunbird-cb/tree-hierarchy 0.0.10-cbrelease-4.8.26 → 0.0.12-cbrelease-4.8.26

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

@@ -1,9 +1,9 @@
 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';
@@ -19,18 +19,18 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkStepperModule } from '@angular/cdk/stepper';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule } from '@angular/cdk/tree';
-import * as i7 from '@angular/material/autocomplete';
+import * as i7$1 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 i4 from '@angular/material/button';
+import * as i7 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 i8 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';
@@ -69,24 +69,27 @@ import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i7$1 from '@angular/material/form-field';
+import * as i7$2 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 i4 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/`,
     RETIRE_TREM: `/apis/proxies/v8/framework/v1/term/retire`,
-    UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`
+    UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`,
+    USERS_SEARCH: `apis/proxies/v8/user/v1/search`
 };
 class TreeHierarchyService {
     constructor(http) {
@@ -95,28 +98,31 @@ 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.UPDATE_TERMS}/${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
+        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.RETIRE_TREM}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
+        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.UPDATE_CATEGORY}${frameworkObj.category}?framework=${frameworkObj.id}`, requestBody);
+        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' }); }
@@ -7173,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;
@@ -7198,7 +7214,15 @@ class FrameworkService {
             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.completeResponse = response.result.framework;
@@ -7347,6 +7371,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 });
                     }
@@ -7542,6 +7568,99 @@ class FrameworkService {
             });
         }
     }
+    getSelectedStateOrg(_orgData) {
+        const requestBody = {
+            request: {
+                filters: {
+                    status: 1,
+                    ministryOrStateType: (_orgData) ?
+                        _orgData.sbOrgType : '',
+                    ministryOrStateId: (_orgData) ?
+                        _orgData.identifier : ''
+                },
+                sort_by: {
+                    createdDate: "desc"
+                },
+                limit: 100,
+                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' }); }
 }
@@ -7586,7 +7705,7 @@ class MaterialModule {
             MatButtonToggleModule,
             MatCardModule,
             MatCheckboxModule,
-            MatChipsModule,
+            MatLegacyChipsModule,
             MatStepperModule,
             MatDatepickerModule,
             MatDialogModule,
@@ -7633,7 +7752,7 @@ class MaterialModule {
             MatButtonToggleModule,
             MatCardModule,
             MatCheckboxModule,
-            MatChipsModule,
+            MatLegacyChipsModule,
             MatStepperModule,
             MatDatepickerModule,
             MatDialogModule,
@@ -7685,7 +7804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatButtonToggleModule,
                         MatCardModule,
                         MatCheckboxModule,
-                        MatChipsModule,
+                        MatLegacyChipsModule,
                         MatStepperModule,
                         MatDatepickerModule,
                         MatDialogModule,
@@ -7785,7 +7904,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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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: i7.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,
@@ -8809,8 +8928,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.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$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: i4.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$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.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.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,
@@ -8818,7 +8937,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: i4.MatLegacySnackBar }, { type: i0.ChangeDetectorRef }]; } });
 
 class ConnectorComponent {
     constructor(dialogRef, data, localScv, fb) {
@@ -8856,7 +8975,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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: i7.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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, decorators: [{
             type: Component,
@@ -8918,8 +9037,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.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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: FrameworkService }, { token: i4.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: i7.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,
@@ -8927,7 +9046,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: i4.MatLegacySnackBar }]; } });
 
 class CreateTermFromFrameworkComponent {
     constructor(dialogRef, data, dialog, frameWorkService, fb, _snackBar) {
@@ -9716,8 +9835,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.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$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: i4.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$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i7.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: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i8.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: i8.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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.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,
@@ -9725,14 +9844,15 @@ 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: i4.MatLegacySnackBar }]; } });
 
 class OrgHierarchyAddModalComponent {
-    constructor(dialogRef, data, treeHierarchySvc, frameworkService) {
+    constructor(dialogRef, data, treeHierarchySvc, frameworkService, snackbar) {
         this.dialogRef = dialogRef;
         this.data = data;
         this.treeHierarchySvc = treeHierarchySvc;
         this.frameworkService = frameworkService;
+        this.snackbar = snackbar;
         this.searchControl = new FormControl('');
         this.selectedOrgsControl = new FormControl([]);
         this.orgOptions = [];
@@ -9886,16 +10006,32 @@ class OrgHierarchyAddModalComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: TreeHierarchyService }, { token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <div class=\"header-title\">\n      <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n    </div>\n    <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Content -->\n  <div class=\"modal-content\">\n    <div class=\"content-container\">\n        <div class=\"flex flex-col org-container\">\n          <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n          <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n          <div class=\"dashed-line\"></div>\n        </div>\n        <ng-container *ngIf=\"data?.previous?.length > 0\">\n            <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n            [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n                <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n                <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n                <div class=\"dashed-line\"></div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"data?.currentData\">\n            <div class=\"flex flex-col org-container\" \n            [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n                <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n                \n                <!-- Searchable multi-select -->\n                <div class=\"select-search-container\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n                        <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n                          [panelClass]=\"'mat-select-panel-below'\" \n                          disableOptionCentering \n                          [disableOptionCentering]=\"true\"\n                          (keydown)=\"handleKeydown($event)\"\n                          multiple>\n                            <!-- Search container -->\n                            <div class=\"search-container\" (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"handleSearchKeydown($event)\"\n                                class=\"search-input\" #searchInput>\n                            </div>\n                            <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n                                {{organization.orgName}}\n                            </mat-option>\n                            <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n                                No data found\n                            </mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n                \n            </div>\n        </ng-container>\n    </div>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n      Cancel\n    </button>\n    <button \n      mat-stroked-button \n      class=\"btn-common btn-primary\" \n      [disabled]=\"!selectedOrgsControl.value?.length\" \n      (click)=\"onSave()\" \n      type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [":host{display:block;height:100%}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: TreeHierarchyService }, { token: FrameworkService }, { token: i4.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                <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                <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                \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%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.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: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.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: i8.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: i8.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.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'\" \n                          disableOptionCentering \n                          [disableOptionCentering]=\"true\"\n                          (keydown)=\"handleKeydown($event)\"\n                          multiple>\n                            <!-- Search container -->\n                            <div class=\"search-container\" (click)=\"$event.stopPropagation()\">\n                                <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n                                (keydown)=\"handleSearchKeydown($event)\"\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                <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                <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                \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%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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: TreeHierarchyService }, { type: FrameworkService }, { type: i4.MatLegacySnackBar }]; } });
 
 class CategoryEditModuleComponent {
     constructor(fb, dialogRef, data) {
@@ -9904,7 +10040,6 @@ class CategoryEditModuleComponent {
         this.data = data;
     }
     ngOnInit() {
-        console.log('Category Edit Module Data:', this.data);
         this.initForm();
     }
     initForm() {
@@ -9932,7 +10067,7 @@ class CategoryEditModuleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, deps: [{ token: i3.FormBuilder }, { token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryEditModuleComponent, selector: "sb-cb-tree-category-edit-module", ngImport: i0, template: "<div class=\"modal-wrapper\">\n  <!-- Modal Header -->\n  <div class=\"modal-header\">\n    <h2 class=\"modal-title\">Edit Category</h2>\n    <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Modal Container -->\n  <div class=\"modal-container\">\n    <form [formGroup]=\"categoryForm\">\n        <div class=\"form-group\">\n            <div class=\"static-label required\">Name</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <input matInput formControlName=\"categoryName\" >\n                <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n                Name is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n        <div class=\"form-group\">\n            <div class=\"static-label\">Description</div>\n            <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n                <textarea matInput formControlName=\"categoryDescription\"></textarea>\n                <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n                Description is required\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </form>\n  </div>\n\n  <!-- Modal Footer -->\n  <div class=\"modal-footer\">\n    <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n    <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n      Save\n    </button>\n  </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵ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: i7.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: i7.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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
             type: Component,
@@ -10511,13 +10646,33 @@ class TermCardComponent {
     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", cardAction: "cardAction" }, 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 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>\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}} 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\"  (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"ws-mat-primary-text\" 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=\"ws-mat-primary-text\" 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=\"ws-mat-primary-text\" 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>", 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{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.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}\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: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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: { 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\">\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\" (click)=\"openDialog()\">\n                        <mat-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 flex-between\">\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\" >\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>\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\"  (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 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{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.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}\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: i7.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: i7.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 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>\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}} 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\"  (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n            class=\"ws-mat-primary-text\" 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=\"ws-mat-primary-text\" 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=\"ws-mat-primary-text\" 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>", 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{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.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}\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\">\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\" (click)=\"openDialog()\">\n                        <mat-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 flex-between\">\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\" >\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>\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\"  (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 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{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.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}\n"] }]
+        }], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { dialogTemplate: [{
+                type: ViewChild,
+                args: ['dialogTemplate']
+            }], data: [{
                 type: Input
             }], isSelected: [{
                 type: Output
@@ -10730,6 +10885,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);
@@ -10740,7 +10896,16 @@ class TreeColumnViewComponent {
                 }, 200);
             }
         }
-        this.setColumnItems();
+        else {
+            if (this.columnItems?.length === 0) {
+                this.frameworkService.removeOldLine();
+            }
+            else {
+                setTimeout(() => {
+                    this.makeFirstTermSelected();
+                }, 500);
+            }
+        }
     }
     clearSearch() {
         this.searchValue.setValue('');
@@ -10823,12 +10988,25 @@ class TreeColumnViewComponent {
     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", cardAction: "cardAction" }, 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                <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                (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    <!-- <div>No {{column.name}} associated</div> -->\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: ["data"], outputs: ["isSelected", "selectedCard", "cardAction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: { column: "column", containerId: "containerId" }, 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-2\">\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                (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    <!-- <div>No Data found</div> -->\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: ["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                <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                (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    <!-- <div>No {{column.name}} associated</div> -->\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n    <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n    [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\n"] }]
+            args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n    <div class=\"w-full sticky\">\n        <div class=\"search mb-2\">\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                (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    <!-- <div>No Data found</div> -->\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: [{
@@ -11452,7 +11630,6 @@ class TreeViewComponent {
         }
     }
     editCategoryName(column, index) {
-        console.log('editCategoryName', column, index);
         const dialog = this.dialog.open(CategoryEditModuleComponent, {
             data: {
                 columnInfo: column,
@@ -11548,13 +11725,13 @@ class TreeViewComponent {
             await this.publishFramework(frameworkObj);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, deps: [{ token: FrameworkService }, { token: LocalConnectionService }, { token: i1$3.MatLegacyDialog }, { token: ApprovalService }, { token: i5$2.MatLegacySnackBar }, { token: ConnectorService }, { token: i0.ChangeDetectorRef }, { token: TreeHierarchyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable", manageOrg: "manageOrg" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n    <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n        <mat-icon>{{app_strings.build}}</mat-icon>\n    </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n    <ng-container *ngFor=\"let column of list; let i = index;\">\n        <div class=\"flex-1 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\">\n                                    <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n                                        <mat-icon>edit</mat-icon>\n                                    </button>\n                            </ng-container>\n                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <!-- {{column.code}} -->\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n                    (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
+    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: i4.MatLegacySnackBar }, { token: ConnectorService }, { token: i0.ChangeDetectorRef }, { token: TreeHierarchyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable", manageOrg: "manageOrg" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n    <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n        <mat-icon>{{app_strings.build}}</mat-icon>\n    </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n    <ng-container *ngFor=\"let column of list; let i = index;\">\n        <div class=\"flex-1 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\">\n                                    <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n                                        <mat-icon>edit</mat-icon>\n                                    </button>\n                            </ng-container>\n                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n                    (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{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: i7.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: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tree-view', template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n    <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n        <mat-icon>{{app_strings.build}}</mat-icon>\n    </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n    <ng-container *ngFor=\"let column of list; let i = index;\">\n        <div class=\"flex-1 flex-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n            <div class=\"category-heading-sticky\">\n                <div class=\"category-heading-container\">\n                    <div class='category-header'>\n                        <div class=\"category-header-items w-full flex padding-remove\" id=\"box{{i}}Header\">\n                            <span class=\"flex gap-1 mat-body-1\">\n                                <ng-container *ngIf=\"column?.config?.iconEnabled\">\n                                    <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n                                </ng-container>\n                                <!-- {{column.name}} -->\n                                {{column?.config?.categoryDisplayName || column.name }}\n                                <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n                                    <ng-container *ngIf=\"column.index !== 1\">\n                                        <span class=\"count\">({{getCount(column.code)}})</span>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngIf=\"column?.config?.levelNameEdit\">\n                                    <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n                                        <mat-icon>edit</mat-icon>\n                                    </button>\n                            </ng-container>\n                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <!-- {{column.code}} -->\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n                    (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{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: 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\">\n                                    <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n                                        <mat-icon>edit</mat-icon>\n                                    </button>\n                            </ng-container>\n                            </span>\n                            <ng-template #firstColumn>\n                                <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n                            </ng-template>\n                            <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n                                    (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n                                <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                                [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                    <span>Add</span>\n                                    <mat-icon class=\"margin-remove\">\n                                        {{app_strings.add}}\n                                    </mat-icon>\n                                </button>\n                            </ng-container>\n                            <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n                        </div>\n                    </div>\n                    <!-- <div>\n                        Put search button here in future\n                    </div> -->\n                </div>\n            </div>\n            <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n                <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n                    <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n                    [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n                    (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n                    (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n                </lib-tree-column-view>\n                </ng-container>\n                <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n                    <div class=\"svg-border-wrapper\">\n                        <svg width=\"100%\" height=\"100%\">\n                            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n                                  stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n                        </svg>\n                        <div class=\"content flex flex-col w-full\">\n                            <div class=\"icon-container\">\n                                <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n                            </div>\n                            <label>Select an organization to add or see further connections</label>\n                            <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n                            [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n                                <span>Add</span>\n                                <mat-icon class=\"margin-remove\">\n                                    {{app_strings.add}}\n                                </mat-icon>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container>\n    <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n        (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n    <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{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: i4.MatLegacySnackBar }, { type: ConnectorService }, { type: i0.ChangeDetectorRef }, { type: TreeHierarchyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { approvalList: [{
                 type: Input
             }], isApprovalView: [{
                 type: Input
@@ -11620,13 +11797,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.ɵ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: i4.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"], 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: i4.MatLegacySnackBar }]; } });
 
 class CategoriesPreviewComponent {
     constructor() {
@@ -11724,7 +11901,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.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: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵ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$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: i7.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$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
             type: Component,
@@ -11909,7 +12086,8 @@ class TreeHierarchyModule {
             OrgHierarchyAddModalComponent,
             CategoryEditModuleComponent], imports: [CommonModule,
             MaterialModule,
-            TreeEditorRoutingModule], exports: [TreeHierarchyComponent,
+            TreeEditorRoutingModule,
+            MatChipsModule], exports: [TreeHierarchyComponent,
             CreateCategoriesComponent,
             ConfigFrameworkComponent,
             TreeViewComponent,
@@ -11927,7 +12105,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,
@@ -11959,6 +12138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CommonModule,
                         MaterialModule,
                         TreeEditorRoutingModule,
+                        MatChipsModule
                     ],
                     providers: [
                         DatePipe,