@sunbird-cb/tree-hierarchy 0.0.9-cbrelease-4.8.26 → 0.0.11-cbrelease-4.8.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.mjs +3 -3
- package/esm2022/lib/components/term-card/term-card.component.mjs +25 -5
- package/esm2022/lib/components/tree-column-view/tree-column-view.component.mjs +5 -3
- package/esm2022/lib/components/tree-view/tree-view.component.mjs +3 -3
- package/esm2022/lib/models/framework.model.mjs +1 -1
- package/esm2022/lib/services/connector.service.mjs +25 -2
- package/esm2022/lib/services/framework.service.mjs +116 -3
- package/esm2022/lib/tree-hierarchy.service.mjs +6 -2
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs +196 -34
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs.map +1 -1
- package/lib/components/term-card/term-card.component.d.ts +5 -1
- package/lib/components/term-card/term-card.component.d.ts.map +1 -1
- package/lib/components/tree-column-view/tree-column-view.component.d.ts.map +1 -1
- package/lib/models/framework.model.d.ts +1 -0
- package/lib/models/framework.model.d.ts.map +1 -1
- package/lib/services/connector.service.d.ts.map +1 -1
- package/lib/services/framework.service.d.ts +5 -0
- package/lib/services/framework.service.d.ts.map +1 -1
- package/lib/tree-hierarchy.service.d.ts +1 -0
- package/lib/tree-hierarchy.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, Input, NgModule, EventEmitter, Output, Pipe, ViewEncapsulation, Inject, InjectionToken } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, Input, NgModule, EventEmitter, Output, Pipe, ViewEncapsulation, Inject, ViewChild, InjectionToken } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, of, Subject } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/common/http';
|
|
5
5
|
import { HttpClientModule } from '@angular/common/http';
|
|
6
|
-
import { tap, catchError,
|
|
6
|
+
import { switchMap, map, tap, catchError, startWith, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
7
7
|
import { v4 } from 'uuid';
|
|
8
8
|
import * as _ from 'lodash';
|
|
9
9
|
import ___default from 'lodash';
|
|
@@ -23,7 +23,7 @@ import * as i7 from '@angular/material/autocomplete';
|
|
|
23
23
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
24
24
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
25
25
|
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i6 from '@angular/material/button';
|
|
27
27
|
import { MatButtonModule } from '@angular/material/button';
|
|
28
28
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
29
29
|
import * as i2 from '@angular/material/card';
|
|
@@ -41,12 +41,12 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|
|
41
41
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
42
42
|
import * as i5$1 from '@angular/material/icon';
|
|
43
43
|
import { MatIconModule } from '@angular/material/icon';
|
|
44
|
-
import * as i6$
|
|
44
|
+
import * as i6$3 from '@angular/material/input';
|
|
45
45
|
import { MatInputModule } from '@angular/material/input';
|
|
46
46
|
import { MatListModule } from '@angular/material/list';
|
|
47
47
|
import * as i14 from '@angular/material/menu';
|
|
48
48
|
import { MatMenuModule } from '@angular/material/menu';
|
|
49
|
-
import * as i6$
|
|
49
|
+
import * as i6$2 from '@angular/material/core';
|
|
50
50
|
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|
51
51
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
52
52
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
@@ -65,7 +65,7 @@ import { MatTableModule } from '@angular/material/table';
|
|
|
65
65
|
import * as i1$2 from '@angular/material/tabs';
|
|
66
66
|
import { MatTabsModule, MAT_TABS_CONFIG } from '@angular/material/tabs';
|
|
67
67
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
68
|
-
import * as i6 from '@angular/material/tooltip';
|
|
68
|
+
import * as i6$1 from '@angular/material/tooltip';
|
|
69
69
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
70
70
|
import { MatTreeModule } from '@angular/material/tree';
|
|
71
71
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
@@ -79,14 +79,15 @@ import { MAT_LEGACY_DIALOG_DATA } from '@angular/material/legacy-dialog';
|
|
|
79
79
|
import * as i15 from '@angular/cdk/text-field';
|
|
80
80
|
import * as d3 from 'd3';
|
|
81
81
|
|
|
82
|
-
const API_ENDPOINT = {
|
|
82
|
+
const API_ENDPOINT$1 = {
|
|
83
83
|
ORG_V1_SEARCH: '/apis/proxies/v8/org/v1/search',
|
|
84
84
|
CREATE_TERMS: `/apis/proxies/v8/action/framework/v3/term/create`,
|
|
85
85
|
UPDATE_TERMS: `/apis/proxies/v8/framework/v1/term/update/`,
|
|
86
86
|
UPDATE_ASSOCIATION: `/apis/proxies/v8/framework/v1/term/update/`,
|
|
87
87
|
PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`,
|
|
88
88
|
RETIRE_TREM: `/apis/proxies/v8/framework/v1/term/retire`,
|
|
89
|
-
UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update
|
|
89
|
+
UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`,
|
|
90
|
+
USERS_SEARCH: `apis/proxies/v8/user/v1/search`
|
|
90
91
|
};
|
|
91
92
|
class TreeHierarchyService {
|
|
92
93
|
constructor(http) {
|
|
@@ -95,28 +96,31 @@ class TreeHierarchyService {
|
|
|
95
96
|
this.loaderState$ = this.loaderSubject.asObservable();
|
|
96
97
|
}
|
|
97
98
|
orgSerachApi(requestBody) {
|
|
98
|
-
return this.http.post(`${API_ENDPOINT.ORG_V1_SEARCH}`, requestBody);
|
|
99
|
+
return this.http.post(`${API_ENDPOINT$1.ORG_V1_SEARCH}`, requestBody);
|
|
99
100
|
}
|
|
100
101
|
createTerm(requestBody, frameworkObj) {
|
|
101
|
-
return this.http.post(`${API_ENDPOINT.CREATE_TERMS}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
102
|
+
return this.http.post(`${API_ENDPOINT$1.CREATE_TERMS}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
102
103
|
}
|
|
103
104
|
updateTerm(requestBody, frameworkObj, codeId) {
|
|
104
|
-
return this.http.patch(`${API_ENDPOINT.UPDATE_TERMS}/${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
105
|
+
return this.http.patch(`${API_ENDPOINT$1.UPDATE_TERMS}/${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
105
106
|
}
|
|
106
107
|
updateFrameworkAssociation(requestBody, frameworkObj, codeId) {
|
|
107
|
-
return this.http.patch(`${API_ENDPOINT.UPDATE_ASSOCIATION}${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
108
|
+
return this.http.patch(`${API_ENDPOINT$1.UPDATE_ASSOCIATION}${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
108
109
|
}
|
|
109
110
|
publishFreamework(frameworkObj) {
|
|
110
|
-
return this.http.post(`${API_ENDPOINT.PUBLISH_FRAMEWORK}${frameworkObj.id}`, {});
|
|
111
|
+
return this.http.post(`${API_ENDPOINT$1.PUBLISH_FRAMEWORK}${frameworkObj.id}`, {});
|
|
111
112
|
}
|
|
112
113
|
setLoaderState(isLoading) {
|
|
113
114
|
this.loaderSubject.next(isLoading);
|
|
114
115
|
}
|
|
115
116
|
retireTerm(requestBody, frameworkObj) {
|
|
116
|
-
return this.http.post(`${API_ENDPOINT.RETIRE_TREM}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
117
|
+
return this.http.post(`${API_ENDPOINT$1.RETIRE_TREM}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
117
118
|
}
|
|
118
119
|
updateCategory(requestBody, frameworkObj) {
|
|
119
|
-
return this.http.patch(`${API_ENDPOINT.UPDATE_CATEGORY}${frameworkObj.category}?framework=${frameworkObj.id}`, requestBody);
|
|
120
|
+
return this.http.patch(`${API_ENDPOINT$1.UPDATE_CATEGORY}${frameworkObj.category}?framework=${frameworkObj.id}`, requestBody);
|
|
121
|
+
}
|
|
122
|
+
getUsersSearch(requestBody) {
|
|
123
|
+
return this.http.post(`${API_ENDPOINT$1.USERS_SEARCH}`, requestBody);
|
|
120
124
|
}
|
|
121
125
|
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 }); }
|
|
122
126
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeHierarchyService, providedIn: 'root' }); }
|
|
@@ -7173,6 +7177,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
7173
7177
|
}]
|
|
7174
7178
|
}], ctorParameters: function () { return []; } });
|
|
7175
7179
|
|
|
7180
|
+
const API_ENDPOINT = {
|
|
7181
|
+
ORG_V1_SEARCH: '/apis/proxies/v8/org/v1/search',
|
|
7182
|
+
CREATE_TERMS: `/apis/proxies/v8/action/framework/v3/term/create`,
|
|
7183
|
+
UPDATE_TERMS: `/apis/proxies/v8/framework/v1/term/update/`,
|
|
7184
|
+
UPDATE_ASSOCIATION: `/apis/proxies/v8/framework/v1/term/update/`,
|
|
7185
|
+
PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`,
|
|
7186
|
+
RETIRE_TREM: `/apis/proxies/v8/framework/v1/term/retire`,
|
|
7187
|
+
UPDATE_CATEGORY: `/apis/proxies/v8/framework/v1/category/update/`,
|
|
7188
|
+
USERS_SEARCH: `apis/proxies/v8/user/v1/search`
|
|
7189
|
+
};
|
|
7176
7190
|
class FrameworkService {
|
|
7177
7191
|
constructor(http, localConfig) {
|
|
7178
7192
|
this.http = http;
|
|
@@ -7198,7 +7212,15 @@ class FrameworkService {
|
|
|
7198
7212
|
else {
|
|
7199
7213
|
url = url + this.environment.frameworkName;
|
|
7200
7214
|
}
|
|
7201
|
-
return this.http.get(`${url}`, { withCredentials: true }).pipe(
|
|
7215
|
+
return this.http.get(`${url}`, { withCredentials: true }).pipe(switchMap((frameworkResponse) => {
|
|
7216
|
+
const originalFrameworkResponse = frameworkResponse;
|
|
7217
|
+
return this.getSelectedStateOrg(_orgData).pipe(switchMap((orgListData) => {
|
|
7218
|
+
this.additionalData = orgListData?.result?.response?.content || [];
|
|
7219
|
+
return this.getUserPerOrg().pipe(map(() => {
|
|
7220
|
+
return originalFrameworkResponse;
|
|
7221
|
+
}));
|
|
7222
|
+
}));
|
|
7223
|
+
}), tap(async (response) => {
|
|
7202
7224
|
this.resetAll();
|
|
7203
7225
|
this.formateData(response);
|
|
7204
7226
|
this.completeResponse = response.result.framework;
|
|
@@ -7347,6 +7369,8 @@ class FrameworkService {
|
|
|
7347
7369
|
config: this.getConfig(a.code),
|
|
7348
7370
|
children: (a.terms || []).map((c) => {
|
|
7349
7371
|
const associations = c.associations || [];
|
|
7372
|
+
const tempCount = this.getUserCount(c);
|
|
7373
|
+
Object.assign(c, { userCount: tempCount });
|
|
7350
7374
|
if (associations.length > 0) {
|
|
7351
7375
|
Object.assign(c, { children: associations });
|
|
7352
7376
|
}
|
|
@@ -7542,6 +7566,99 @@ class FrameworkService {
|
|
|
7542
7566
|
});
|
|
7543
7567
|
}
|
|
7544
7568
|
}
|
|
7569
|
+
getSelectedStateOrg(_orgData) {
|
|
7570
|
+
const requestBody = {
|
|
7571
|
+
request: {
|
|
7572
|
+
filters: {
|
|
7573
|
+
status: 1,
|
|
7574
|
+
ministryOrStateType: (_orgData) ?
|
|
7575
|
+
_orgData.sbOrgType : '',
|
|
7576
|
+
ministryOrStateId: (_orgData) ?
|
|
7577
|
+
_orgData.identifier : ''
|
|
7578
|
+
},
|
|
7579
|
+
sort_by: {
|
|
7580
|
+
createdDate: "desc"
|
|
7581
|
+
},
|
|
7582
|
+
limit: 100,
|
|
7583
|
+
offset: 0,
|
|
7584
|
+
fields: [
|
|
7585
|
+
'identifier',
|
|
7586
|
+
'orgName',
|
|
7587
|
+
'description',
|
|
7588
|
+
'parentOrgName',
|
|
7589
|
+
'ministryOrStateId',
|
|
7590
|
+
'ministryOrStateType',
|
|
7591
|
+
'ministryOrStateName',
|
|
7592
|
+
'sbOrgSubType'
|
|
7593
|
+
]
|
|
7594
|
+
}
|
|
7595
|
+
};
|
|
7596
|
+
return this.http.post(`${API_ENDPOINT.ORG_V1_SEARCH}`, requestBody).pipe(catchError(error => {
|
|
7597
|
+
console.error('Error fetching Org data:', error);
|
|
7598
|
+
return of({});
|
|
7599
|
+
}));
|
|
7600
|
+
}
|
|
7601
|
+
getUserPerOrg(_orgData) {
|
|
7602
|
+
const orgIds = this.additionalData.map((org) => org.identifier);
|
|
7603
|
+
const requestBody = {
|
|
7604
|
+
request: {
|
|
7605
|
+
filters: {
|
|
7606
|
+
rootOrgId: orgIds
|
|
7607
|
+
},
|
|
7608
|
+
fields: [
|
|
7609
|
+
'identifier',
|
|
7610
|
+
'rootOrgId'
|
|
7611
|
+
],
|
|
7612
|
+
limit: 1,
|
|
7613
|
+
facets: [
|
|
7614
|
+
"rootOrgId"
|
|
7615
|
+
],
|
|
7616
|
+
sort_by: {
|
|
7617
|
+
"createdDate": "desc"
|
|
7618
|
+
}
|
|
7619
|
+
}
|
|
7620
|
+
};
|
|
7621
|
+
const orgIdCounts = [];
|
|
7622
|
+
if (this.additionalData && this.additionalData.length > 0) {
|
|
7623
|
+
this.additionalData.forEach((org) => {
|
|
7624
|
+
if (org.identifier) {
|
|
7625
|
+
orgIdCounts.push({
|
|
7626
|
+
id: org.identifier,
|
|
7627
|
+
count: 0
|
|
7628
|
+
});
|
|
7629
|
+
}
|
|
7630
|
+
});
|
|
7631
|
+
}
|
|
7632
|
+
return this.http.post(`${API_ENDPOINT.USERS_SEARCH}`, requestBody).pipe(map((res) => {
|
|
7633
|
+
if (res && res.result && res.result.response && res.result.response.count) {
|
|
7634
|
+
const facetsValue = res.result.response.facets || [];
|
|
7635
|
+
if (facetsValue && facetsValue.length > 0) {
|
|
7636
|
+
const orgFacet = facetsValue.find((facet) => facet.name === 'rootOrgId');
|
|
7637
|
+
if (orgFacet && orgFacet.values) {
|
|
7638
|
+
orgFacet.values.forEach((value) => {
|
|
7639
|
+
const orgIndex = orgIdCounts.findIndex(org => org.id === value.name);
|
|
7640
|
+
if (orgIndex !== -1) {
|
|
7641
|
+
orgIdCounts[orgIndex].count = value.count || 0;
|
|
7642
|
+
}
|
|
7643
|
+
});
|
|
7644
|
+
}
|
|
7645
|
+
}
|
|
7646
|
+
}
|
|
7647
|
+
this.userCountData = orgIdCounts;
|
|
7648
|
+
}), catchError(error => {
|
|
7649
|
+
console.error('Error fetching user count data:', error);
|
|
7650
|
+
return of({});
|
|
7651
|
+
}));
|
|
7652
|
+
}
|
|
7653
|
+
getUserCount(term) {
|
|
7654
|
+
if (term && term.additionalProperties && term.additionalProperties.orgId) {
|
|
7655
|
+
if (this.userCountData && this.userCountData.length > 0) {
|
|
7656
|
+
const userCount = this.userCountData.filter((user) => user.id === term.additionalProperties.orgId)[0]?.count;
|
|
7657
|
+
return userCount || 0;
|
|
7658
|
+
}
|
|
7659
|
+
}
|
|
7660
|
+
return 0;
|
|
7661
|
+
}
|
|
7545
7662
|
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 }); }
|
|
7546
7663
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrameworkService, providedIn: 'root' }); }
|
|
7547
7664
|
}
|
|
@@ -7785,7 +7902,7 @@ class ActionBarComponent {
|
|
|
7785
7902
|
return `Approve ${res.substr(res.lastIndexOf('_') + 1, res.length)}`;
|
|
7786
7903
|
}
|
|
7787
7904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7788
|
-
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:
|
|
7905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionBarComponent, selector: "lib-action-bar", inputs: { actionType: "actionType", configType: "configType" }, outputs: { sendApproval: "sendApproval", closeAction: "closeAction" }, ngImport: i0, template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n <div class=\"action-bar-buttons\">\n <div>\n <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n </div>\n <div>\n <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n {{actionType? getApproveLevelText(configType) :'Send for Approval'}} \n </button>\n </div>\n </div>\n <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n <mat-icon color=\"primary\">flag</mat-icon>\n Terms tobe Approve\n </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width: 1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
|
|
7789
7906
|
}
|
|
7790
7907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, decorators: [{
|
|
7791
7908
|
type: Component,
|
|
@@ -7959,7 +8076,7 @@ class PendingApprovalComponent {
|
|
|
7959
8076
|
return temp;
|
|
7960
8077
|
}
|
|
7961
8078
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, deps: [{ token: ApprovalService }, { token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7962
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PendingApprovalComponent, selector: "lib-pending-approval", ngImport: i0, template: "<div class=\"pending-approval\">\n <header class=\"mat-header\">\n <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n </header>\n\n <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n <mat-card-content>\n <span class=\"date\">\n <h4>{{app_strings.date}}</h4>\n <span>{{p.lastUpdatedOn | date}}</span>\n </span>\n <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n <h4>{{t.name}}</h4>\n <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n {{t.children[0].name}}\n <ng-container *ngIf=\"t.children.length>1\">\n & {{t.children.length-1}} {{app_strings.more}}\n </ng-container>\n </div>\n </div>\n <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n </mat-card-content>\n </mat-card>\n <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n <mat-tab label=\"Sent for approval\" active> -->\n <!-- <mat-card>\n <mat-card-content>\n <div *ngFor=\"let t of categories\" class=\"col\">\n <h4>{{t}}</h4>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngFor=\"let p of approvalList\">\n <mat-card-content>\n <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n <h4>{{t.name}}</h4>\n <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n {{t.children[0].name}}\n <ng-container *ngIf=\"t.children.length>1\">\n & {{t.children.length-1}} more...\n </ng-container>\n </div>\n \n </div> \n <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n </mat-card-content>\n </mat-card>\n </mat-tab> -->\n <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }] }); }
|
|
8079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PendingApprovalComponent, selector: "lib-pending-approval", ngImport: i0, template: "<div class=\"pending-approval\">\n <header class=\"mat-header\">\n <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n </header>\n\n <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n <mat-card-content>\n <span class=\"date\">\n <h4>{{app_strings.date}}</h4>\n <span>{{p.lastUpdatedOn | date}}</span>\n </span>\n <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n <h4>{{t.name}}</h4>\n <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n {{t.children[0].name}}\n <ng-container *ngIf=\"t.children.length>1\">\n & {{t.children.length-1}} {{app_strings.more}}\n </ng-container>\n </div>\n </div>\n <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n </mat-card-content>\n </mat-card>\n <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n <mat-tab label=\"Sent for approval\" active> -->\n <!-- <mat-card>\n <mat-card-content>\n <div *ngFor=\"let t of categories\" class=\"col\">\n <h4>{{t}}</h4>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngFor=\"let p of approvalList\">\n <mat-card-content>\n <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n <h4>{{t.name}}</h4>\n <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n {{t.children[0].name}}\n <ng-container *ngIf=\"t.children.length>1\">\n & {{t.children.length-1}} more...\n </ng-container>\n </div>\n \n </div> \n <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n </mat-card-content>\n </mat-card>\n </mat-tab> -->\n <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }] }); }
|
|
7963
8080
|
}
|
|
7964
8081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, decorators: [{
|
|
7965
8082
|
type: Component,
|
|
@@ -8810,7 +8927,7 @@ class CreateTermComponent {
|
|
|
8810
8927
|
});
|
|
8811
8928
|
}
|
|
8812
8929
|
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 }); }
|
|
8813
|
-
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" }] }); }
|
|
8930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermComponent, selector: "lib-create-term", ngImport: i0, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title></div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n <div class=\"dialog\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n class=\"defaultForm\">\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name }}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n</ng-template>\n\n<ng-template #themeCreate >\n <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{getCategoryName(term.category,term)}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n </mat-select>\n\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n \n <div class=\"flex\">\n\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n </div>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname \n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input autocomplete=\"off\" \n matInput [value]=\"data?.childrenData?.name\" disabled>\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n </button>\n </div>\n <mat-accordion formArrayName=\"themeFields\">\n <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n {{getExpansionTitle(field)}} \n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeThemeFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n \n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}} </mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n \n </mat-select>\n \n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <div class=\"flex\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n \n \n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n \n \n \n \n </div>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <div class=\"flex flex-end\">\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n Save\n </button>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.add_btn}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n <div class=\"themDesignation\">\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"mb-2\">\n <span class=\"organisation\">Organisation</span>\n <div class=\"org-name pl-4 flex items-center\">\n <!-- <span>Department of Fisheries</span> -->\n <span>{{data?.columnInfo?.name}}</span>\n </div>\n </div>\n <div class=\"row-divider\"></div>\n <div class=\"flex w-full items-center justify-end mt-4\">\n <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n <span>Add Designations</span>\n </a>\n </div>\n <div class=\"mt-5\">\n <form [formGroup]=\"createThemeForm\">\n <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n <mat-expansion-panel [formGroupName]=\"i\" class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n <mat-expansion-panel-header>\n <div class=\"flex w-full items-center justify-end\">\n <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"flex flex-col gap-2 \">\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete>\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n </div>\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Description <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <textarea matInput formControlName=\"designationDescription\"\n placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n </mat-form-field>\n </div>\n \n <div class=\"w-full flex justify-end items-center\">\n <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n (click)=\"saveDesignation(i)\">Save</button>\n </div>\n </div>\n </mat-expansion-panel>\n </ng-container>\n </mat-accordion>\n </form>\n </div>\n </div>\n <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n <button mat-raised-button class=\"cancel flex justify-center items-center\"\n (click)=\"cancel()\">Cancel</button>\n <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n </div>\n </div>\n</ng-template>\n<ng-template #compTheme>\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{term.category}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button class=\"learning-section\" *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n \n </mat-radio-group>\n </div>\n </div>\n \n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Add Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n \n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add {{data.columnInfo.name}}\n </button>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <!-- {{name?.value}} -->\n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Select Competency Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\" >{{option.name}}</mat-option>\n </mat-select>\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <!-- <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n </mat-form-field>\n </div> -->\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Select Competency Sub-Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n \n </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i15.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
|
|
8814
8931
|
}
|
|
8815
8932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, decorators: [{
|
|
8816
8933
|
type: Component,
|
|
@@ -8856,7 +8973,7 @@ class ConnectorComponent {
|
|
|
8856
8973
|
this.dialogRef.close({ source: 'offline', data: {} });
|
|
8857
8974
|
}
|
|
8858
8975
|
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 }); }
|
|
8859
|
-
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:
|
|
8976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectorComponent, selector: "lib-connector", ngImport: i0, template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n </button>\n</div>\n<div class=\"dialog flex\">\n <div class=\"flex flex-1 flex-row\">\n <div class=\"container flex flex-1\">\n <div class=\"side flex flex-1\">\n <div class=\"'flex flex-2 padding-s\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.endPoint}}</mat-label>\n <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.token}}</mat-label>\n <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n </div>\n <div class=\"or\">\n <div class=\"or-line\"></div>\n <div class=\"or-label\">{{app_strings.or}}</div>\n </div>\n <div class=\"side flex flex-1\">\n <div class=\"'flex flex-1 padding-s\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n {{app_strings.playWithIt}}\n </button>\n </div>\n </div>\n </div>\u200B\n\n </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width: 1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
8860
8977
|
}
|
|
8861
8978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, decorators: [{
|
|
8862
8979
|
type: Component,
|
|
@@ -8919,7 +9036,7 @@ class ConforamtionPopupComponent {
|
|
|
8919
9036
|
});
|
|
8920
9037
|
}
|
|
8921
9038
|
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 }); }
|
|
8922
|
-
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:
|
|
9039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConforamtionPopupComponent, selector: "lib-conforamtion-popup", ngImport: i0, template: "<!-- <div class=\"w-full\">\n <div class=\"w-full conformation-popup flex justify-center items-center\">\n <span class=\"msgDescription\">{{dialogData?.message}}</span>\n </div>\n <div class=\"w-full flex justify-end items-center gap-4\">\n <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n </div>\n</div> -->\n\n<div class=\"dialog-container\">\n <ng-container *ngIf=\"showLoader\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n <!-- <ng-container *ngSwitchCase=\"'success'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fail'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n </div>\n </ng-container> -->\n <ng-container *ngSwitchCase=\"'warning'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogDetails.iconDetails\">\n <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n <ng-container *ngIf=\"description.header\">\n <div [ngClass]=\"description.headerClass\">\n <span>{{description.header}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"description.messages\">\n <div class=\"description mt-1 flex w-full justify-center\">\n <span>\n <ng-container *ngFor=\"let msgDetails of description.messages\">\n <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n </ng-container>\n </span>\n <!-- <span>{{description.message}}</span> -->\n </div>\n </ng-container>\n </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
8923
9040
|
}
|
|
8924
9041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, decorators: [{
|
|
8925
9042
|
type: Component,
|
|
@@ -9717,7 +9834,7 @@ class CreateTermFromFrameworkComponent {
|
|
|
9717
9834
|
return this.competencyForm.get('compThemeFields');
|
|
9718
9835
|
}
|
|
9719
9836
|
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 }); }
|
|
9720
|
-
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"] }] }); }
|
|
9837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermFromFrameworkComponent, selector: "lib-create-term-from-framework", ngImport: i0, template: "\n<div class=\"\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <div class=\"dialogNew\">\n <div class=\"flex items-center justify-between\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <ng-container *ngIf=\"term.category !== 'competency'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{frameWorkService.getConfig(term.category).labelName}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"competencyForm\">\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <div class=\"flex flex-end mb-4\" >\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n <!-- {{data.columnInfo.name}} -->\n </button>\n </ng-container>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n </mat-panel-title>\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </ng-container>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <ng-container >\n <ng-container >\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n (onSelectionChange)=\"OnThemeSelection($event, i, option)\" >{{option.name}}\n <ng-container *ngIf=\"option.refId\">\n <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </mat-select>\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n </div>\n \n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n\n {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n \n </label>\n <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field> -->\n <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n <mat-select-trigger >\n <mat-chip-listbox>\n <!-- -->\n \n <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\" [removable]=\"data?.openMode ==='view'? false: true\">\n <span >{{ item.name }}</span>\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n <!-- <mat-optgroup>\n <mat-form-field floatLabel=\"never\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n formControlName=\"competencySubTheme\" matInput>\n </mat-form-field>\n </mat-optgroup> -->\n <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n <div>No results found!</div>\n </mat-optgroup>\n <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n <mat-option \n [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n <ng-container *ngIf=\"option?.refId\">\n <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n \n </mat-select>\n <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n Please select up to five preferred providers for the request.\n </mat-error> -->\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.update}}\n </button>\n <!-- </ng-container> -->\n \n <!-- <ng-template #updateBtn>\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.delete}}\n </button>\n </ng-template> -->\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(competencyForm, data)\"\n [disabled]=\"competencyForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n </ng-container>\n \n </div>\n \n \n <!-- Title of the popup -->\n <ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <!-- {{data |json}} -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n </ng-container>\n <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n </ng-container>\n </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button (click)=\"deleteTheme()\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "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$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
|
|
9721
9838
|
}
|
|
9722
9839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, decorators: [{
|
|
9723
9840
|
type: Component,
|
|
@@ -9887,11 +10004,11 @@ class OrgHierarchyAddModalComponent {
|
|
|
9887
10004
|
return true;
|
|
9888
10005
|
}
|
|
9889
10006
|
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 }); }
|
|
9890
|
-
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"] }] }); }
|
|
10007
|
+
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\" (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}.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}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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"] }] }); }
|
|
9891
10008
|
}
|
|
9892
10009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
|
|
9893
10010
|
type: Component,
|
|
9894
|
-
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"] }]
|
|
10011
|
+
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\" (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}.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}\n"] }]
|
|
9895
10012
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
9896
10013
|
type: Inject,
|
|
9897
10014
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
@@ -9932,7 +10049,7 @@ class CategoryEditModuleComponent {
|
|
|
9932
10049
|
}
|
|
9933
10050
|
}
|
|
9934
10051
|
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 }); }
|
|
9935
|
-
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:
|
|
10052
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryEditModuleComponent, selector: "sb-cb-tree-category-edit-module", ngImport: i0, template: "<div class=\"modal-wrapper\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h2 class=\"modal-title\">Edit Category</h2>\n <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Container -->\n <div class=\"modal-container\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"form-group\">\n <div class=\"static-label required\">Name</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <input matInput formControlName=\"categoryName\" >\n <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n Name is required\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"form-group\">\n <div class=\"static-label\">Description</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <textarea matInput formControlName=\"categoryDescription\"></textarea>\n <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n Description is required\n </mat-error>\n </mat-form-field>\n </div>\n </form>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
9936
10053
|
}
|
|
9937
10054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
|
|
9938
10055
|
type: Component,
|
|
@@ -10022,7 +10139,30 @@ class ConnectorService {
|
|
|
10022
10139
|
container.style.right = '0';
|
|
10023
10140
|
container.style.width = '100%';
|
|
10024
10141
|
container.style.height = '100%';
|
|
10025
|
-
|
|
10142
|
+
const resizeObserver = new ResizeObserver(entries => {
|
|
10143
|
+
for (const entry of entries) {
|
|
10144
|
+
if (entry.target === treeViewComponent) {
|
|
10145
|
+
container.style.width = `${entry.contentRect.width}px`;
|
|
10146
|
+
if (this.connectorMap) {
|
|
10147
|
+
Object.values(this.connectorMap).forEach((connector) => {
|
|
10148
|
+
if (connector && connector.lines) {
|
|
10149
|
+
connector.lines.forEach((item) => {
|
|
10150
|
+
if (item.line && typeof item.line.position === 'function') {
|
|
10151
|
+
item.line.position();
|
|
10152
|
+
}
|
|
10153
|
+
});
|
|
10154
|
+
}
|
|
10155
|
+
});
|
|
10156
|
+
}
|
|
10157
|
+
}
|
|
10158
|
+
}
|
|
10159
|
+
});
|
|
10160
|
+
resizeObserver.observe(treeViewComponent);
|
|
10161
|
+
treeViewComponent.addEventListener('scroll', () => {
|
|
10162
|
+
overflowWrapper.style.width = `${treeViewComponent.scrollWidth}px`;
|
|
10163
|
+
overflowWrapper.style.height = `${treeViewComponent.scrollHeight}px`;
|
|
10164
|
+
this.repositionAllLines();
|
|
10165
|
+
});
|
|
10026
10166
|
overflowWrapper.appendChild(container);
|
|
10027
10167
|
treeViewComponent.appendChild(overflowWrapper);
|
|
10028
10168
|
}
|
|
@@ -10488,13 +10628,33 @@ class TermCardComponent {
|
|
|
10488
10628
|
menuAction(type, _item) {
|
|
10489
10629
|
this.cardAction.emit({ action: type, data: _item });
|
|
10490
10630
|
}
|
|
10631
|
+
getuserCount(item) {
|
|
10632
|
+
if (item.children.code) {
|
|
10633
|
+
const tempData = item.columnInfo.children.find((i) => i.code === item.children.code);
|
|
10634
|
+
return tempData?.userCount || 0;
|
|
10635
|
+
}
|
|
10636
|
+
return 0;
|
|
10637
|
+
}
|
|
10638
|
+
openDialog() {
|
|
10639
|
+
this.dialog.open(this.dialogTemplate, {
|
|
10640
|
+
width: '500px',
|
|
10641
|
+
disableClose: true,
|
|
10642
|
+
data: {}
|
|
10643
|
+
});
|
|
10644
|
+
}
|
|
10645
|
+
closeModal() {
|
|
10646
|
+
this.dialog.closeAll();
|
|
10647
|
+
}
|
|
10491
10648
|
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 }); }
|
|
10492
|
-
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"] }] }); }
|
|
10649
|
+
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\">\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 gap-5 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: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
|
|
10493
10650
|
}
|
|
10494
10651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
|
|
10495
10652
|
type: Component,
|
|
10496
|
-
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"] }]
|
|
10497
|
-
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: {
|
|
10653
|
+
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=\"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 gap-5 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"] }]
|
|
10654
|
+
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { dialogTemplate: [{
|
|
10655
|
+
type: ViewChild,
|
|
10656
|
+
args: ['dialogTemplate']
|
|
10657
|
+
}], data: [{
|
|
10498
10658
|
type: Input
|
|
10499
10659
|
}], isSelected: [{
|
|
10500
10660
|
type: Output
|
|
@@ -10525,6 +10685,7 @@ class TreeColumnViewComponent {
|
|
|
10525
10685
|
}
|
|
10526
10686
|
ngOnChanges() { }
|
|
10527
10687
|
ngOnInit() {
|
|
10688
|
+
console.log('column', this.column);
|
|
10528
10689
|
this.subscribeEvents();
|
|
10529
10690
|
this.setColumnItems();
|
|
10530
10691
|
this.searchValue.valueChanges.pipe(debounceTime(700), distinctUntilChanged()).subscribe((ele) => {
|
|
@@ -10717,6 +10878,7 @@ class TreeColumnViewComponent {
|
|
|
10717
10878
|
}, 200);
|
|
10718
10879
|
}
|
|
10719
10880
|
}
|
|
10881
|
+
this.frameworkService.removeOldLine();
|
|
10720
10882
|
this.setColumnItems();
|
|
10721
10883
|
}
|
|
10722
10884
|
clearSearch() {
|
|
@@ -10801,11 +10963,11 @@ class TreeColumnViewComponent {
|
|
|
10801
10963
|
this.cardAction.emit(event);
|
|
10802
10964
|
}
|
|
10803
10965
|
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 }); }
|
|
10804
|
-
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
|
|
10966
|
+
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"] }] }); }
|
|
10805
10967
|
}
|
|
10806
10968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, decorators: [{
|
|
10807
10969
|
type: Component,
|
|
10808
|
-
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
|
|
10970
|
+
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"] }]
|
|
10809
10971
|
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: ConnectorService }, { type: ApprovalService }]; }, propDecorators: { column: [{
|
|
10810
10972
|
type: Input
|
|
10811
10973
|
}], containerId: [{
|
|
@@ -11526,11 +11688,11 @@ class TreeViewComponent {
|
|
|
11526
11688
|
}
|
|
11527
11689
|
}
|
|
11528
11690
|
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 }); }
|
|
11529
|
-
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"] }] }); }
|
|
11691
|
+
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: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
|
|
11530
11692
|
}
|
|
11531
11693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
11532
11694
|
type: Component,
|
|
11533
|
-
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"] }]
|
|
11695
|
+
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"] }]
|
|
11534
11696
|
}], 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: [{
|
|
11535
11697
|
type: Input
|
|
11536
11698
|
}], isApprovalView: [{
|
|
@@ -11701,7 +11863,7 @@ class CreateCategoriesComponent {
|
|
|
11701
11863
|
}
|
|
11702
11864
|
}
|
|
11703
11865
|
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 }); }
|
|
11704
|
-
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:
|
|
11866
|
+
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: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
11705
11867
|
}
|
|
11706
11868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
|
|
11707
11869
|
type: Component,
|