@sunbird-cb/tree-hierarchy 0.0.3-cbrelease-4.8.26 → 0.0.5-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/approve-view/approve-view.component.mjs +1 -1
- package/esm2022/lib/components/category-edit/category-edit-module/category-edit-module.component.mjs +57 -0
- package/esm2022/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.mjs +32 -13
- package/esm2022/lib/components/term-card/term-card.component.mjs +6 -6
- package/esm2022/lib/components/tree-view/tree-view.component.mjs +187 -66
- package/esm2022/lib/services/framework.service.mjs +2 -1
- package/esm2022/lib/tree-hierarchy.module.mjs +5 -2
- package/esm2022/lib/tree-hierarchy.service.mjs +5 -1
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs +282 -93
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs.map +1 -1
- package/lib/components/category-edit/category-edit-module/category-edit-module.component.d.ts +18 -0
- package/lib/components/category-edit/category-edit-module/category-edit-module.component.d.ts.map +1 -0
- package/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.d.ts +3 -1
- package/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.d.ts.map +1 -1
- package/lib/components/term-card/term-card.component.d.ts +1 -1
- package/lib/components/term-card/term-card.component.d.ts.map +1 -1
- package/lib/components/tree-view/tree-view.component.d.ts +5 -2
- package/lib/components/tree-view/tree-view.component.d.ts.map +1 -1
- package/lib/services/framework.service.d.ts +1 -0
- package/lib/services/framework.service.d.ts.map +1 -1
- package/lib/tree-hierarchy.module.d.ts +5 -4
- package/lib/tree-hierarchy.module.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
|
@@ -9,7 +9,7 @@ import * as _ from 'lodash';
|
|
|
9
9
|
import ___default from 'lodash';
|
|
10
10
|
import * as i1$1 from '@angular/router';
|
|
11
11
|
import { RouterModule } from '@angular/router';
|
|
12
|
-
import * as i5
|
|
12
|
+
import * as i5 from '@angular/common';
|
|
13
13
|
import { CommonModule, DatePipe } from '@angular/common';
|
|
14
14
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
15
15
|
import * as i3$1 from '@angular/cdk/drag-drop';
|
|
@@ -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 i4 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';
|
|
@@ -39,14 +39,14 @@ import { MatDividerModule } from '@angular/material/divider';
|
|
|
39
39
|
import * as i11 from '@angular/material/expansion';
|
|
40
40
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
41
41
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
42
|
-
import * as
|
|
42
|
+
import * as i5$1 from '@angular/material/icon';
|
|
43
43
|
import { MatIconModule } from '@angular/material/icon';
|
|
44
|
-
import * as
|
|
44
|
+
import * as i6$2 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$1 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
|
|
68
|
+
import * as i6 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';
|
|
@@ -82,6 +82,7 @@ import * as d3 from 'd3';
|
|
|
82
82
|
const API_ENDPOINT = {
|
|
83
83
|
ORG_V1_SEARCH: '/apis/proxies/v8/org/v1/search',
|
|
84
84
|
CREATE_TERMS: `/apis/proxies/v8/action/framework/v3/term/create`,
|
|
85
|
+
UPDATE_TERMS: `/apis/proxies/v8/framework/v1/term/update/`,
|
|
85
86
|
UPDATE_ASSOCIATION: `/apis/proxies/v8/framework/v1/term/update/`,
|
|
86
87
|
PUBLISH_FRAMEWORK: `/apis/proxies/v8/framework/v1/publish/`,
|
|
87
88
|
RETIRE_TREM: `apis/proxies/v8/framework/v1/term/retire`
|
|
@@ -98,6 +99,9 @@ class TreeHierarchyService {
|
|
|
98
99
|
createTerm(requestBody, frameworkObj) {
|
|
99
100
|
return this.http.post(`${API_ENDPOINT.CREATE_TERMS}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
100
101
|
}
|
|
102
|
+
updateTerm(requestBody, frameworkObj, codeId) {
|
|
103
|
+
return this.http.patch(`${API_ENDPOINT.UPDATE_TERMS}/${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
104
|
+
}
|
|
101
105
|
updateFrameworkAssociation(requestBody, frameworkObj, codeId) {
|
|
102
106
|
return this.http.patch(`${API_ENDPOINT.UPDATE_ASSOCIATION}${codeId}?framework=${frameworkObj.id}&category=${frameworkObj.category}`, requestBody);
|
|
103
107
|
}
|
|
@@ -7193,6 +7197,7 @@ class FrameworkService {
|
|
|
7193
7197
|
return this.http.get(`${url}`, { withCredentials: true }).pipe(tap((response) => {
|
|
7194
7198
|
this.resetAll();
|
|
7195
7199
|
this.formateData(response);
|
|
7200
|
+
this.completeResponse = response.result.framework;
|
|
7196
7201
|
}), catchError((err) => {
|
|
7197
7202
|
this.resetAll();
|
|
7198
7203
|
this.list.clear();
|
|
@@ -7776,7 +7781,7 @@ class ActionBarComponent {
|
|
|
7776
7781
|
return `Approve ${res.substr(res.lastIndexOf('_') + 1, res.length)}`;
|
|
7777
7782
|
}
|
|
7778
7783
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7779
|
-
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:
|
|
7784
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionBarComponent, selector: "lib-action-bar", inputs: { actionType: "actionType", configType: "configType" }, outputs: { sendApproval: "sendApproval", closeAction: "closeAction" }, ngImport: i0, template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n <div class=\"action-bar-buttons\">\n <div>\n <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n </div>\n <div>\n <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n {{actionType? getApproveLevelText(configType) :'Send for Approval'}} \n </button>\n </div>\n </div>\n <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n <mat-icon color=\"primary\">flag</mat-icon>\n Terms tobe Approve\n </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width: 1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
|
|
7780
7785
|
}
|
|
7781
7786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, decorators: [{
|
|
7782
7787
|
type: Component,
|
|
@@ -7950,7 +7955,7 @@ class PendingApprovalComponent {
|
|
|
7950
7955
|
return temp;
|
|
7951
7956
|
}
|
|
7952
7957
|
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 }); }
|
|
7953
|
-
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
|
|
7958
|
+
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" }] }); }
|
|
7954
7959
|
}
|
|
7955
7960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, decorators: [{
|
|
7956
7961
|
type: Component,
|
|
@@ -8801,7 +8806,7 @@ class CreateTermComponent {
|
|
|
8801
8806
|
});
|
|
8802
8807
|
}
|
|
8803
8808
|
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 }); }
|
|
8804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermComponent, selector: "lib-create-term", ngImport: i0, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title></div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n <div class=\"dialog\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n class=\"defaultForm\">\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name }}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n</ng-template>\n\n<ng-template #themeCreate >\n <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{getCategoryName(term.category,term)}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n </mat-select>\n\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n \n <div class=\"flex\">\n\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n </div>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname \n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input autocomplete=\"off\" \n matInput [value]=\"data?.childrenData?.name\" disabled>\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n </button>\n </div>\n <mat-accordion formArrayName=\"themeFields\">\n <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n {{getExpansionTitle(field)}} \n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeThemeFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n \n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}} </mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n \n </mat-select>\n \n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <div class=\"flex\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n \n \n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n \n \n \n \n </div>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <div class=\"flex flex-end\">\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n Save\n </button>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.add_btn}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n <div class=\"themDesignation\">\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"mb-2\">\n <span class=\"organisation\">Organisation</span>\n <div class=\"org-name pl-4 flex items-center\">\n <!-- <span>Department of Fisheries</span> -->\n <span>{{data?.columnInfo?.name}}</span>\n </div>\n </div>\n <div class=\"row-divider\"></div>\n <div class=\"flex w-full items-center justify-end mt-4\">\n <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n <span>Add Designations</span>\n </a>\n </div>\n <div class=\"mt-5\">\n <form [formGroup]=\"createThemeForm\">\n <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n <mat-expansion-panel [formGroupName]=\"i\" class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n <mat-expansion-panel-header>\n <div class=\"flex w-full items-center justify-end\">\n <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"flex flex-col gap-2 \">\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete>\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n </div>\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Description <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <textarea matInput formControlName=\"designationDescription\"\n placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n </mat-form-field>\n </div>\n \n <div class=\"w-full flex justify-end items-center\">\n <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n (click)=\"saveDesignation(i)\">Save</button>\n </div>\n </div>\n </mat-expansion-panel>\n </ng-container>\n </mat-accordion>\n </form>\n </div>\n </div>\n <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n <button mat-raised-button class=\"cancel flex justify-center items-center\"\n (click)=\"cancel()\">Cancel</button>\n <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n </div>\n </div>\n</ng-template>\n<ng-template #compTheme>\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{term.category}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button class=\"learning-section\" *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n \n </mat-radio-group>\n </div>\n </div>\n \n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Add Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n \n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add {{data.columnInfo.name}}\n </button>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <!-- {{name?.value}} -->\n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Select Competency Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\" >{{option.name}}</mat-option>\n </mat-select>\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <!-- <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n </mat-form-field>\n </div> -->\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Select Competency Sub-Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n \n </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i15.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }] }); }
|
|
8809
|
+
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" }] }); }
|
|
8805
8810
|
}
|
|
8806
8811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, decorators: [{
|
|
8807
8812
|
type: Component,
|
|
@@ -8847,7 +8852,7 @@ class ConnectorComponent {
|
|
|
8847
8852
|
this.dialogRef.close({ source: 'offline', data: {} });
|
|
8848
8853
|
}
|
|
8849
8854
|
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 }); }
|
|
8850
|
-
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:
|
|
8855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectorComponent, selector: "lib-connector", ngImport: i0, template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n </button>\n</div>\n<div class=\"dialog flex\">\n <div class=\"flex flex-1 flex-row\">\n <div class=\"container flex flex-1\">\n <div class=\"side flex flex-1\">\n <div class=\"'flex flex-2 padding-s\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.endPoint}}</mat-label>\n <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.token}}</mat-label>\n <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n </div>\n <div class=\"or\">\n <div class=\"or-line\"></div>\n <div class=\"or-label\">{{app_strings.or}}</div>\n </div>\n <div class=\"side flex flex-1\">\n <div class=\"'flex flex-1 padding-s\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n {{app_strings.playWithIt}}\n </button>\n </div>\n </div>\n </div>\u200B\n\n </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width: 1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
8851
8856
|
}
|
|
8852
8857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, decorators: [{
|
|
8853
8858
|
type: Component,
|
|
@@ -8910,7 +8915,7 @@ class ConforamtionPopupComponent {
|
|
|
8910
8915
|
});
|
|
8911
8916
|
}
|
|
8912
8917
|
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 }); }
|
|
8913
|
-
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
|
|
8918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConforamtionPopupComponent, selector: "lib-conforamtion-popup", ngImport: i0, template: "<!-- <div class=\"w-full\">\n <div class=\"w-full conformation-popup flex justify-center items-center\">\n <span class=\"msgDescription\">{{dialogData?.message}}</span>\n </div>\n <div class=\"w-full flex justify-end items-center gap-4\">\n <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n </div>\n</div> -->\n\n<div class=\"dialog-container\">\n <ng-container *ngIf=\"showLoader\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n <!-- <ng-container *ngSwitchCase=\"'success'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fail'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n </div>\n </ng-container> -->\n <ng-container *ngSwitchCase=\"'warning'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogDetails.iconDetails\">\n <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n <ng-container *ngIf=\"description.header\">\n <div [ngClass]=\"description.headerClass\">\n <span>{{description.header}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"description.messages\">\n <div class=\"description mt-1 flex w-full justify-center\">\n <span>\n <ng-container *ngFor=\"let msgDetails of description.messages\">\n <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n </ng-container>\n </span>\n <!-- <span>{{description.message}}</span> -->\n </div>\n </ng-container>\n </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
8914
8919
|
}
|
|
8915
8920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, decorators: [{
|
|
8916
8921
|
type: Component,
|
|
@@ -9708,7 +9713,7 @@ class CreateTermFromFrameworkComponent {
|
|
|
9708
9713
|
return this.competencyForm.get('compThemeFields');
|
|
9709
9714
|
}
|
|
9710
9715
|
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 }); }
|
|
9711
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermFromFrameworkComponent, selector: "lib-create-term-from-framework", ngImport: i0, template: "\n<div class=\"\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <div class=\"dialogNew\">\n <div class=\"flex items-center justify-between\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <ng-container *ngIf=\"term.category !== 'competency'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{frameWorkService.getConfig(term.category).labelName}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"competencyForm\">\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <div class=\"flex flex-end mb-4\" >\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n <!-- {{data.columnInfo.name}} -->\n </button>\n </ng-container>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n </mat-panel-title>\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </ng-container>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <ng-container >\n <ng-container >\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n (onSelectionChange)=\"OnThemeSelection($event, i, option)\" >{{option.name}}\n <ng-container *ngIf=\"option.refId\">\n <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </mat-select>\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n </div>\n \n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n\n {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n \n </label>\n <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field> -->\n <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n <mat-select-trigger >\n <mat-chip-listbox>\n <!-- -->\n \n <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\" [removable]=\"data?.openMode ==='view'? false: true\">\n <span >{{ item.name }}</span>\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n <!-- <mat-optgroup>\n <mat-form-field floatLabel=\"never\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n formControlName=\"competencySubTheme\" matInput>\n </mat-form-field>\n </mat-optgroup> -->\n <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n <div>No results found!</div>\n </mat-optgroup>\n <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n <mat-option \n [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n <ng-container *ngIf=\"option?.refId\">\n <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n \n </mat-select>\n <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n Please select up to five preferred providers for the request.\n </mat-error> -->\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.update}}\n </button>\n <!-- </ng-container> -->\n \n <!-- <ng-template #updateBtn>\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.delete}}\n </button>\n </ng-template> -->\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(competencyForm, data)\"\n [disabled]=\"competencyForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n </ng-container>\n \n </div>\n \n \n <!-- Title of the popup -->\n <ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <!-- {{data |json}} -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n </ng-container>\n <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n </ng-container>\n </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button (click)=\"deleteTheme()\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
|
|
9716
|
+
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"] }] }); }
|
|
9712
9717
|
}
|
|
9713
9718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, decorators: [{
|
|
9714
9719
|
type: Component,
|
|
@@ -9719,10 +9724,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9719
9724
|
}] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i5$2.MatLegacySnackBar }]; } });
|
|
9720
9725
|
|
|
9721
9726
|
class OrgHierarchyAddModalComponent {
|
|
9722
|
-
constructor(dialogRef, data, treeHierarchySvc) {
|
|
9727
|
+
constructor(dialogRef, data, treeHierarchySvc, frameworkService) {
|
|
9723
9728
|
this.dialogRef = dialogRef;
|
|
9724
9729
|
this.data = data;
|
|
9725
9730
|
this.treeHierarchySvc = treeHierarchySvc;
|
|
9731
|
+
this.frameworkService = frameworkService;
|
|
9726
9732
|
this.searchControl = new FormControl('');
|
|
9727
9733
|
this.selectedOrgsControl = new FormControl([]);
|
|
9728
9734
|
this.orgOptions = [];
|
|
@@ -9837,12 +9843,28 @@ class OrgHierarchyAddModalComponent {
|
|
|
9837
9843
|
});
|
|
9838
9844
|
if (orgListData && orgListData.result &&
|
|
9839
9845
|
orgListData.result.response && orgListData.result.response.content) {
|
|
9840
|
-
|
|
9846
|
+
const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
9847
|
+
let orgIdsAdded = [];
|
|
9848
|
+
if (framworkData && framworkData.categories && framworkData.categories.length > 0) {
|
|
9849
|
+
framworkData.categories.forEach((category) => {
|
|
9850
|
+
if (category.terms && category.terms.length > 0) {
|
|
9851
|
+
category.terms.forEach((term) => {
|
|
9852
|
+
if (term.additionalProperties && term.additionalProperties.orgId) {
|
|
9853
|
+
if (!orgIdsAdded.includes(term.additionalProperties.orgId)) {
|
|
9854
|
+
orgIdsAdded.push(term.additionalProperties.orgId);
|
|
9855
|
+
}
|
|
9856
|
+
}
|
|
9857
|
+
});
|
|
9858
|
+
}
|
|
9859
|
+
});
|
|
9860
|
+
}
|
|
9861
|
+
const filteredOrgList = orgListData.result.response.content.filter((org) => !orgIdsAdded.includes(org.identifier));
|
|
9862
|
+
this.orgOptions = filteredOrgList || [];
|
|
9841
9863
|
this.filteredOptions = [...this.orgOptions];
|
|
9842
9864
|
}
|
|
9843
9865
|
}
|
|
9844
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: TreeHierarchyService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9845
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <div class=\"header-title\">\n <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n </div>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Content -->\n <div class=\"modal-content\">\n <div class=\"content-container\">\n <div class=\"flex flex-col org-container\">\n <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n <ng-container *ngIf=\"data?.previous?.length > 0\">\n <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data?.currentData\">\n <div class=\"flex flex-col org-container\" \n [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n \n <!-- Searchable multi-select -->\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n [panelClass]=\"'mat-select-panel-below'\" disableOptionCentering [disableOptionCentering]=\"true\"\n multiple> <!-- Added the multiple attribute here -->\n <!-- Search container -->\n <div class=\"search-container\">\n <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n (keydown)=\"$event.key === ' ' ? $event.stopPropagation() : null\" (click)=\"$event.stopPropagation()\"\n class=\"search-input\" #searchInput>\n </div>\n <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n {{organization.orgName}}\n </mat-option>\n <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n Cancel\n </button>\n <button \n mat-stroked-button \n class=\"btn-common btn-primary\" \n [disabled]=\"!selectedOrgsControl.value?.length\" \n (click)=\"onSave()\" \n type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [":host{display:block;height:100%}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
9866
|
+
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 }); }
|
|
9867
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <div class=\"header-title\">\n <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n </div>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Content -->\n <div class=\"modal-content\">\n <div class=\"content-container\">\n <div class=\"flex flex-col org-container\">\n <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n <ng-container *ngIf=\"data?.previous?.length > 0\">\n <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data?.currentData\">\n <div class=\"flex flex-col org-container\" \n [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n \n <!-- Searchable multi-select -->\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n [panelClass]=\"'mat-select-panel-below'\" disableOptionCentering [disableOptionCentering]=\"true\"\n multiple> <!-- Added the multiple attribute here -->\n <!-- Search container -->\n <div class=\"search-container\">\n <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n (keydown)=\"$event.key === ' ' ? $event.stopPropagation() : null\" (click)=\"$event.stopPropagation()\"\n class=\"search-input\" #searchInput>\n </div>\n <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n {{organization.orgName}}\n </mat-option>\n <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n Cancel\n </button>\n <button \n mat-stroked-button \n class=\"btn-common btn-primary\" \n [disabled]=\"!selectedOrgsControl.value?.length\" \n (click)=\"onSave()\" \n type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [":host{display:block;height:100%}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i5.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"] }] }); }
|
|
9846
9868
|
}
|
|
9847
9869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
|
|
9848
9870
|
type: Component,
|
|
@@ -9850,7 +9872,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9850
9872
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
9851
9873
|
type: Inject,
|
|
9852
9874
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
9853
|
-
}] }, { type: TreeHierarchyService }]; } });
|
|
9875
|
+
}] }, { type: TreeHierarchyService }, { type: FrameworkService }]; } });
|
|
9876
|
+
|
|
9877
|
+
class CategoryEditModuleComponent {
|
|
9878
|
+
constructor(fb, dialogRef, data) {
|
|
9879
|
+
this.fb = fb;
|
|
9880
|
+
this.dialogRef = dialogRef;
|
|
9881
|
+
this.data = data;
|
|
9882
|
+
}
|
|
9883
|
+
ngOnInit() {
|
|
9884
|
+
console.log('Category Edit Module Data:', this.data);
|
|
9885
|
+
this.initForm();
|
|
9886
|
+
}
|
|
9887
|
+
initForm() {
|
|
9888
|
+
this.categoryForm = this.fb.group({
|
|
9889
|
+
categoryName: [this.data?.columnInfo?.name || '', Validators.required],
|
|
9890
|
+
categoryDescription: [this.data?.columnInfo?.description || '', Validators.maxLength(500)]
|
|
9891
|
+
});
|
|
9892
|
+
}
|
|
9893
|
+
closeDialog() {
|
|
9894
|
+
this.dialogRef.close();
|
|
9895
|
+
}
|
|
9896
|
+
saveCategoryName() {
|
|
9897
|
+
if (this.categoryForm.valid) {
|
|
9898
|
+
const updatedCategory = {
|
|
9899
|
+
...this.data.column,
|
|
9900
|
+
config: {
|
|
9901
|
+
...this.data.column.config,
|
|
9902
|
+
categoryDisplayName: this.categoryForm.get('categoryName')?.value || ''
|
|
9903
|
+
}
|
|
9904
|
+
};
|
|
9905
|
+
this.dialogRef.close({
|
|
9906
|
+
updated: true,
|
|
9907
|
+
column: updatedCategory,
|
|
9908
|
+
index: this.data.index
|
|
9909
|
+
});
|
|
9910
|
+
}
|
|
9911
|
+
}
|
|
9912
|
+
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 }); }
|
|
9913
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryEditModuleComponent, selector: "sb-cb-tree-category-edit-module", ngImport: i0, template: "<div class=\"modal-wrapper\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h2 class=\"modal-title\">Edit Category</h2>\n <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Container -->\n <div class=\"modal-container\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"form-group\">\n <div class=\"static-label required\">Name</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <input matInput formControlName=\"categoryName\" >\n <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n Name is required\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"form-group\">\n <div class=\"static-label\">Description</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <textarea matInput formControlName=\"categoryDescription\"></textarea>\n <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n Description is required\n </mat-error>\n </mat-form-field>\n </div>\n </form>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
9914
|
+
}
|
|
9915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
|
|
9916
|
+
type: Component,
|
|
9917
|
+
args: [{ selector: 'sb-cb-tree-category-edit-module', template: "<div class=\"modal-wrapper\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h2 class=\"modal-title\">Edit Category</h2>\n <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Container -->\n <div class=\"modal-container\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"form-group\">\n <div class=\"static-label required\">Name</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <input matInput formControlName=\"categoryName\" >\n <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n Name is required\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"form-group\">\n <div class=\"static-label\">Description</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <textarea matInput formControlName=\"categoryDescription\"></textarea>\n <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n Description is required\n </mat-error>\n </mat-form-field>\n </div>\n </form>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"] }]
|
|
9918
|
+
}], ctorParameters: function () { return [{ type: i3.FormBuilder }, { type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
9919
|
+
type: Inject,
|
|
9920
|
+
args: [MAT_LEGACY_DIALOG_DATA]
|
|
9921
|
+
}] }]; } });
|
|
9854
9922
|
|
|
9855
9923
|
class ConnectorService {
|
|
9856
9924
|
constructor() {
|
|
@@ -10128,8 +10196,8 @@ class TermCardComponent {
|
|
|
10128
10196
|
if (this.frameworkService.isLastColumn(this.data.category)) {
|
|
10129
10197
|
return;
|
|
10130
10198
|
}
|
|
10131
|
-
this.isSelected.emit({ element: this.data.children, isSelected: !data.selected });
|
|
10132
10199
|
this.frameworkService.currentSelection.next({ type: this.data.category, data: data.children, cardRef });
|
|
10200
|
+
this.isSelected.emit({ element: this.data.children, isSelected: !data.selected });
|
|
10133
10201
|
}
|
|
10134
10202
|
handleProductClick(term, event) {
|
|
10135
10203
|
this.selectedCard.emit({ term: term, checked: event.checked });
|
|
@@ -10372,15 +10440,15 @@ class TermCardComponent {
|
|
|
10372
10440
|
}, 100);
|
|
10373
10441
|
});
|
|
10374
10442
|
}
|
|
10375
|
-
|
|
10376
|
-
this.cardAction.emit({ action:
|
|
10443
|
+
menuAction(type, _item) {
|
|
10444
|
+
this.cardAction.emit({ action: type, data: _item });
|
|
10377
10445
|
}
|
|
10378
10446
|
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 }); }
|
|
10379
|
-
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.enabaleRemoveConnection\" (click)=\"removeConnection(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.enableUpdateHierarchy\" (click)=\"updateHierarchy(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>Update Hierarchy</span>\n </button>\n \n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"manageOrganization(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Manage Organisation</span>\n </button> -->\n </ng-template>\n</mat-menu>", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 0 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
|
|
10447
|
+
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 0 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#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"] }] }); }
|
|
10380
10448
|
}
|
|
10381
10449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
|
|
10382
10450
|
type: Component,
|
|
10383
|
-
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.
|
|
10451
|
+
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 0 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#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"] }]
|
|
10384
10452
|
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { data: [{
|
|
10385
10453
|
type: Input
|
|
10386
10454
|
}], isSelected: [{
|
|
@@ -10688,7 +10756,7 @@ class TreeColumnViewComponent {
|
|
|
10688
10756
|
this.cardAction.emit(event);
|
|
10689
10757
|
}
|
|
10690
10758
|
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 }); }
|
|
10691
|
-
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 <!-- <ng-container *ngIf=\"column?.config?.showSearch\"> -->\n <div class=\"sinput mat-field-rounded\">\n <mat-icon class=\" search-icon\">search</mat-icon>\n <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n <mat-icon class=\"\">clear</mat-icon>\n </button>\n </div>\n \n <!-- </ng-container> -->\n </div>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n <ng-container *ngFor=\"let child of columnItems; let j = index\">\n <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n <lib-term-card\n [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n </lib-term-card>\n </div>\n </ng-container>\n</ng-container>\n<ng-template #noDataTemplate>\n <!-- <div>No {{column.name}} associated</div> -->\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search .search-icon{position:absolute;top:12px;font-size:20px;left:10px}.search .rsearch{display:flex;position:relative;flex:1 1 auto}.search .sinput{width:100%;border-radius:20px;border:1px solid #d5d0d0;padding:8px 8px 8px 34px;margin-top:0;font: 14px Lato;font-weight:400;box-sizing:border-box;height:42px}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i5
|
|
10759
|
+
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 <!-- <ng-container *ngIf=\"column?.config?.showSearch\"> -->\n <div class=\"sinput mat-field-rounded\">\n <mat-icon class=\" search-icon\">search</mat-icon>\n <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n <mat-icon class=\"\">clear</mat-icon>\n </button>\n </div>\n \n <!-- </ng-container> -->\n </div>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n <ng-container *ngFor=\"let child of columnItems; let j = index\">\n <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n <lib-term-card\n [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n </lib-term-card>\n </div>\n </ng-container>\n</ng-container>\n<ng-template #noDataTemplate>\n <!-- <div>No {{column.name}} associated</div> -->\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search .search-icon{position:absolute;top:12px;font-size:20px;left:10px}.search .rsearch{display:flex;position:relative;flex:1 1 auto}.search .sinput{width:100%;border-radius:20px;border:1px solid #d5d0d0;padding:8px 8px 8px 34px;margin-top:0;font: 14px Lato;font-weight:400;box-sizing:border-box;height:42px}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i5.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"] }] }); }
|
|
10692
10760
|
}
|
|
10693
10761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, decorators: [{
|
|
10694
10762
|
type: Component,
|
|
@@ -10723,6 +10791,7 @@ class TreeViewComponent {
|
|
|
10723
10791
|
this.workFlowStatus = '';
|
|
10724
10792
|
this.sentForApprove = new EventEmitter();
|
|
10725
10793
|
this.loaderEnable = new EventEmitter();
|
|
10794
|
+
this.manageOrg = new EventEmitter();
|
|
10726
10795
|
this.mapping = {};
|
|
10727
10796
|
this.heightLighted = [];
|
|
10728
10797
|
this.localList = [];
|
|
@@ -11022,10 +11091,32 @@ class TreeViewComponent {
|
|
|
11022
11091
|
this.categoryList.push(event);
|
|
11023
11092
|
}
|
|
11024
11093
|
getCount(code) {
|
|
11094
|
+
const allCategories = Array.from(this.frameworkService.list.values());
|
|
11095
|
+
const currentCategoryIndex = allCategories.findIndex(cat => cat.code === code);
|
|
11096
|
+
for (let i = 0; i < currentCategoryIndex; i++) {
|
|
11097
|
+
const prevCategoryCode = allCategories[i].code;
|
|
11098
|
+
const hasPrevSelection = this.frameworkService.selectionList.has(prevCategoryCode);
|
|
11099
|
+
if (!hasPrevSelection) {
|
|
11100
|
+
return 0;
|
|
11101
|
+
}
|
|
11102
|
+
}
|
|
11025
11103
|
let count = 0;
|
|
11026
|
-
|
|
11027
|
-
|
|
11028
|
-
|
|
11104
|
+
const prevCategory = this.frameworkService.getPreviousCategory(code);
|
|
11105
|
+
if (prevCategory) {
|
|
11106
|
+
const prevSelectedTerm = this.frameworkService.selectionList.get(prevCategory.code);
|
|
11107
|
+
if (prevSelectedTerm) {
|
|
11108
|
+
if (prevSelectedTerm.children && prevSelectedTerm.children.length > 0) {
|
|
11109
|
+
count = prevSelectedTerm.children.filter((child) => !child.isDeleted && child.status !== 'Retired' &&
|
|
11110
|
+
(child.category === code || (child.associations &&
|
|
11111
|
+
child.associations.some((assoc) => assoc.category === code)))).length;
|
|
11112
|
+
return count;
|
|
11113
|
+
}
|
|
11114
|
+
}
|
|
11115
|
+
return 0;
|
|
11116
|
+
}
|
|
11117
|
+
const categoryData = this.frameworkService.list.get(code);
|
|
11118
|
+
if (categoryData && categoryData.children) {
|
|
11119
|
+
count = categoryData.children.filter((child) => !child.isDeleted && child.status !== 'Retired').length;
|
|
11029
11120
|
}
|
|
11030
11121
|
return count;
|
|
11031
11122
|
}
|
|
@@ -11113,6 +11204,7 @@ class TreeViewComponent {
|
|
|
11113
11204
|
parentOrgName: ele.ministryOrStateName || '',
|
|
11114
11205
|
orgId: ele.identifier || '',
|
|
11115
11206
|
orgName: ele.orgName || '',
|
|
11207
|
+
ministryOrStateType: ele.ministryOrStateType || '',
|
|
11116
11208
|
}
|
|
11117
11209
|
}
|
|
11118
11210
|
}
|
|
@@ -11191,68 +11283,91 @@ class TreeViewComponent {
|
|
|
11191
11283
|
});
|
|
11192
11284
|
}
|
|
11193
11285
|
removeConnection(data) {
|
|
11194
|
-
const
|
|
11195
|
-
|
|
11196
|
-
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
|
|
11200
|
-
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
11206
|
-
|
|
11207
|
-
|
|
11208
|
-
|
|
11209
|
-
|
|
11210
|
-
|
|
11211
|
-
|
|
11212
|
-
|
|
11213
|
-
|
|
11214
|
-
|
|
11215
|
-
|
|
11216
|
-
|
|
11217
|
-
|
|
11218
|
-
|
|
11219
|
-
|
|
11220
|
-
|
|
11221
|
-
|
|
11222
|
-
|
|
11223
|
-
|
|
11224
|
-
|
|
11225
|
-
|
|
11226
|
-
|
|
11227
|
-
|
|
11228
|
-
|
|
11229
|
-
|
|
11230
|
-
|
|
11231
|
-
|
|
11232
|
-
|
|
11233
|
-
|
|
11234
|
-
|
|
11286
|
+
const association = this.getSelectedTermsAssociation(data.children.code);
|
|
11287
|
+
let count = 0;
|
|
11288
|
+
if (association && association.length > 0) {
|
|
11289
|
+
association.forEach((assoc) => {
|
|
11290
|
+
if (assoc.ids && assoc.ids.length > 0) {
|
|
11291
|
+
count += assoc.ids.length;
|
|
11292
|
+
}
|
|
11293
|
+
});
|
|
11294
|
+
}
|
|
11295
|
+
if (count > 0) {
|
|
11296
|
+
const dialogData = {
|
|
11297
|
+
dialogType: 'warning',
|
|
11298
|
+
descriptions: [
|
|
11299
|
+
{
|
|
11300
|
+
header: `${count || 0} Organisation${count > 1 ? 's' : ''} will be removed from organisation hierarchy.`,
|
|
11301
|
+
headerClass: 'flex items-center justify-center text-blue',
|
|
11302
|
+
messages: [
|
|
11303
|
+
{
|
|
11304
|
+
msgClass: 'text-blue margin-bottom-s',
|
|
11305
|
+
msg: `Do you want to proceed?`,
|
|
11306
|
+
},
|
|
11307
|
+
],
|
|
11308
|
+
},
|
|
11309
|
+
],
|
|
11310
|
+
footerClass: 'items-center justify-center',
|
|
11311
|
+
buttons: [
|
|
11312
|
+
{
|
|
11313
|
+
btnText: 'No',
|
|
11314
|
+
btnClass: 'btn-common btn-secondary',
|
|
11315
|
+
response: false,
|
|
11316
|
+
},
|
|
11317
|
+
{
|
|
11318
|
+
btnText: 'Yes',
|
|
11319
|
+
btnClass: 'btn-common btn-primary',
|
|
11320
|
+
response: true,
|
|
11321
|
+
},
|
|
11322
|
+
],
|
|
11323
|
+
};
|
|
11324
|
+
const dialogRef = this.dialog.open(ConforamtionPopupComponent, {
|
|
11325
|
+
data: dialogData,
|
|
11326
|
+
autoFocus: false,
|
|
11327
|
+
width: '600px',
|
|
11328
|
+
maxWidth: '80vw',
|
|
11329
|
+
maxHeight: '90vh',
|
|
11330
|
+
disableClose: true,
|
|
11331
|
+
});
|
|
11332
|
+
dialogRef.afterClosed().subscribe((res) => {
|
|
11333
|
+
if (res) {
|
|
11334
|
+
this.retireTermFunction(association);
|
|
11335
|
+
}
|
|
11336
|
+
});
|
|
11337
|
+
}
|
|
11338
|
+
else {
|
|
11339
|
+
this._snackBar.open(`Error in removing the organisation`, 'cancel');
|
|
11340
|
+
}
|
|
11235
11341
|
}
|
|
11236
|
-
async retireTermFunction(
|
|
11237
|
-
|
|
11238
|
-
request: {
|
|
11239
|
-
contentIds: [
|
|
11240
|
-
data.children.code
|
|
11241
|
-
]
|
|
11242
|
-
}
|
|
11243
|
-
};
|
|
11244
|
-
const identifierParts = data.children.identifier.split('_');
|
|
11245
|
-
const frameworkObj = {
|
|
11246
|
-
id: identifierParts.slice(0, 3).join('_'),
|
|
11247
|
-
category: data.category
|
|
11248
|
-
};
|
|
11342
|
+
async retireTermFunction(association) {
|
|
11343
|
+
let count = 0;
|
|
11249
11344
|
this.treeHierarchySvc.setLoaderState(true);
|
|
11250
|
-
|
|
11251
|
-
|
|
11252
|
-
|
|
11253
|
-
|
|
11254
|
-
|
|
11255
|
-
|
|
11345
|
+
for await (const ele of association) {
|
|
11346
|
+
const requestBody = {
|
|
11347
|
+
request: {
|
|
11348
|
+
contentIds: ele.ids
|
|
11349
|
+
}
|
|
11350
|
+
};
|
|
11351
|
+
const frameworkObj = {
|
|
11352
|
+
id: this.frameworkService.completeResponse.code,
|
|
11353
|
+
category: ele.category || '',
|
|
11354
|
+
};
|
|
11355
|
+
const retireRes = await this.treeHierarchySvc.retireTerm(requestBody, frameworkObj).toPromise().catch((_err) => {
|
|
11356
|
+
this.treeHierarchySvc.setLoaderState(false);
|
|
11357
|
+
this._snackBar.open(`Failed to remove connection.`, 'cancel');
|
|
11358
|
+
});
|
|
11359
|
+
if (retireRes && retireRes.params && retireRes.params.status?.toLowerCase() === 'successful') {
|
|
11360
|
+
count += 1;
|
|
11361
|
+
}
|
|
11362
|
+
else {
|
|
11363
|
+
this.treeHierarchySvc.setLoaderState(false);
|
|
11364
|
+
this._snackBar.open(`Failed to remove connection.`, 'cancel');
|
|
11365
|
+
}
|
|
11366
|
+
}
|
|
11367
|
+
if (count === association.length) {
|
|
11368
|
+
await this.publishFramework({
|
|
11369
|
+
id: this.frameworkService.completeResponse.code,
|
|
11370
|
+
});
|
|
11256
11371
|
}
|
|
11257
11372
|
else {
|
|
11258
11373
|
this.treeHierarchySvc.setLoaderState(false);
|
|
@@ -11264,14 +11379,84 @@ class TreeViewComponent {
|
|
|
11264
11379
|
case 'remove-term':
|
|
11265
11380
|
this.removeConnection(event.data);
|
|
11266
11381
|
break;
|
|
11382
|
+
case 'update-hierarchy':
|
|
11383
|
+
this.openOrganizationDialog(this.list[this.list.findIndex((item) => item.code === event.data.category) + 1], '');
|
|
11384
|
+
break;
|
|
11385
|
+
case 'manage-org':
|
|
11386
|
+
this.manageOrg.emit(event.data.children);
|
|
11387
|
+
break;
|
|
11267
11388
|
}
|
|
11268
11389
|
}
|
|
11390
|
+
editCategoryName(column, index) {
|
|
11391
|
+
console.log('editCategoryName', column, index);
|
|
11392
|
+
const dialog = this.dialog.open(CategoryEditModuleComponent, {
|
|
11393
|
+
data: {
|
|
11394
|
+
columnInfo: column,
|
|
11395
|
+
frameworkId: this.frameworkService.getFrameworkId(),
|
|
11396
|
+
colIndex: index
|
|
11397
|
+
},
|
|
11398
|
+
width: '800px',
|
|
11399
|
+
panelClass: 'category-edit-container',
|
|
11400
|
+
position: { top: '50px' }
|
|
11401
|
+
});
|
|
11402
|
+
dialog.afterClosed().subscribe((res) => {
|
|
11403
|
+
console.log('Category edit dialog closed', res);
|
|
11404
|
+
});
|
|
11405
|
+
}
|
|
11406
|
+
getSelectedTermsAssociation(categoryCode) {
|
|
11407
|
+
let tempData = [];
|
|
11408
|
+
const completeData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
11409
|
+
if (completeData && completeData.categories && completeData.categories.length > 0) {
|
|
11410
|
+
completeData.categories.forEach((category, catIndex) => {
|
|
11411
|
+
if (category.terms && category.terms.length > 0) {
|
|
11412
|
+
category.terms.forEach((term) => {
|
|
11413
|
+
if (term.code === categoryCode) {
|
|
11414
|
+
tempData.push({
|
|
11415
|
+
name: term.name,
|
|
11416
|
+
category: term.category,
|
|
11417
|
+
ids: [term.code],
|
|
11418
|
+
nextCategory: term.children ? term.children[0].category : '',
|
|
11419
|
+
assocIds: []
|
|
11420
|
+
});
|
|
11421
|
+
if (term.associations && term.associations.length > 0) {
|
|
11422
|
+
term.associations.forEach((assoc) => {
|
|
11423
|
+
tempData[catIndex]['assocIds'].push(assoc.code);
|
|
11424
|
+
});
|
|
11425
|
+
}
|
|
11426
|
+
}
|
|
11427
|
+
});
|
|
11428
|
+
}
|
|
11429
|
+
if (catIndex > 0 && category.terms && category.terms.length > 0) {
|
|
11430
|
+
category.terms.forEach((term) => {
|
|
11431
|
+
tempData.forEach((item) => {
|
|
11432
|
+
if (item.nextCategory === term.category && item.assocIds.includes(term.code)) {
|
|
11433
|
+
const pushData = {
|
|
11434
|
+
name: term.name,
|
|
11435
|
+
category: term.category,
|
|
11436
|
+
ids: [term.code],
|
|
11437
|
+
nextCategory: term.children ? term.children[0].category : '',
|
|
11438
|
+
assocIds: []
|
|
11439
|
+
};
|
|
11440
|
+
if (term.associations && term.associations.length > 0) {
|
|
11441
|
+
term.associations.forEach((assoc) => {
|
|
11442
|
+
pushData['assocIds'].push(assoc.code);
|
|
11443
|
+
});
|
|
11444
|
+
}
|
|
11445
|
+
tempData.push(pushData);
|
|
11446
|
+
}
|
|
11447
|
+
});
|
|
11448
|
+
});
|
|
11449
|
+
}
|
|
11450
|
+
});
|
|
11451
|
+
}
|
|
11452
|
+
return tempData;
|
|
11453
|
+
}
|
|
11269
11454
|
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 }); }
|
|
11270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 felx-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full\" id=\"box{{i}}Header\">\n <ng-container *ngIf=\"column?.config?.iconEnabled\">\n <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n </ng-container>\n <span class=\"flex-1 mat-body-1\">\n <!-- {{column.name}} -->\n {{column?.config?.categoryDisplayName || column.name }}\n <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n <ng-container *ngIf=\"column.index !== 1\">\n <span class=\"count\">({{getCount(column.code)}})</span>\n </ng-container>\n </ng-container>\n </span>\n <ng-template #firstColumn>\n <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n </ng-template>\n <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n <button mat-button class=\"add-btn\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n </div>\n </div>\n <!-- <div>\n Put search button here in future\n </div> -->\n </div>\n </div>\n <!-- {{column.code}} -->\n <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n (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>{{isLoading}} Select an organization to add or see further connections</label>\n <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
|
|
11455
|
+
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 felx-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full 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{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.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"] }] }); }
|
|
11271
11456
|
}
|
|
11272
11457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
11273
11458
|
type: Component,
|
|
11274
|
-
args: [{ selector: 'lib-tree-view', template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 felx-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full\" id=\"box{{i}}Header\">\n <ng-container *ngIf=\"column?.config?.iconEnabled\">\n <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n </ng-container>\n <span class=\"flex-1 mat-body-1\">\n <!-- {{column.name}} -->\n {{column?.config?.categoryDisplayName || column.name }}\n <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n <ng-container *ngIf=\"column.index !== 1\">\n <span class=\"count\">({{getCount(column.code)}})</span>\n </ng-container>\n </ng-container>\n </span>\n <ng-template #firstColumn>\n <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n </ng-template>\n <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n <button mat-button class=\"add-btn\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n </div>\n </div>\n <!-- <div>\n Put search button here in future\n </div> -->\n </div>\n </div>\n <!-- {{column.code}} -->\n <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n (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>{{isLoading}} Select an organization to add or see further connections</label>\n <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
11459
|
+
args: [{ selector: 'lib-tree-view', template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 felx-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full 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{height:inherit;min-width:350px}.category-heading-sticky{top:0;position:sticky;width:100%;background:#fff;margin-bottom:16px;z-index:10}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:100%;overflow-x:auto;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.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"] }]
|
|
11275
11460
|
}], 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: [{
|
|
11276
11461
|
type: Input
|
|
11277
11462
|
}], isApprovalView: [{
|
|
@@ -11288,6 +11473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
11288
11473
|
type: Output
|
|
11289
11474
|
}], loaderEnable: [{
|
|
11290
11475
|
type: Output
|
|
11476
|
+
}], manageOrg: [{
|
|
11477
|
+
type: Output
|
|
11291
11478
|
}] } });
|
|
11292
11479
|
|
|
11293
11480
|
class ApproveViewComponent {
|
|
@@ -11337,7 +11524,7 @@ class ApproveViewComponent {
|
|
|
11337
11524
|
this.frameworkService.removeOldLine();
|
|
11338
11525
|
}
|
|
11339
11526
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ApprovalService }, { token: FrameworkService }, { token: i5$2.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11340
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApproveViewComponent, selector: "lib-approve-view", ngImport: i0, template: "<!-- <div class=\"approve-view__container\" *ngIf=\"listItems && listItems.length > 0 \">\n <ng-container *ngFor=\"let column of categories let i = index;\">\n <div class=\"approve-view__columns\">\n <h4 class=\"approve-view__columns-title\">{{column}}</h4> \n <section>\n <ng-container *ngFor=\"let term of listItems\">\n <div *ngIf=\"column === term.category\" >\n <lib-term-card\n [data]=\"{'children': term, 'selected' : false, 'category':column, cardSubType: 'minimal', isViewOnly:true}\">\n </lib-term-card>\n </div>\n \n </ng-container>\n </section>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showAction\" [configType]=\"workflowDetails.currentStatus\" [actionType]=\"'approve'\" (sendApproval)=\"approvalRequest()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar> \n</div> -->\n<ng-container *ngIf=\"listItems\">\n <lib-tree-view \n [isApprovalView]=\"true\" \n [approvalList]=\"listItems\" \n [workFlowStatus]=\"workflowDetails?.currentStatus\"\n (sentForApprove)=\"approvalRequest($event)\">\n </lib-tree-view>\n</ng-container>\n", styles: [".approve-view__container{display:flex;justify-content:center;flex-direction:row}.approve-view__columns{flex:1;padding:30px}.approve-view__columns-title{text-transform:capitalize;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i5
|
|
11527
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApproveViewComponent, selector: "lib-approve-view", ngImport: i0, template: "<!-- <div class=\"approve-view__container\" *ngIf=\"listItems && listItems.length > 0 \">\n <ng-container *ngFor=\"let column of categories let i = index;\">\n <div class=\"approve-view__columns\">\n <h4 class=\"approve-view__columns-title\">{{column}}</h4> \n <section>\n <ng-container *ngFor=\"let term of listItems\">\n <div *ngIf=\"column === term.category\" >\n <lib-term-card\n [data]=\"{'children': term, 'selected' : false, 'category':column, cardSubType: 'minimal', isViewOnly:true}\">\n </lib-term-card>\n </div>\n \n </ng-container>\n </section>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showAction\" [configType]=\"workflowDetails.currentStatus\" [actionType]=\"'approve'\" (sendApproval)=\"approvalRequest()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar> \n</div> -->\n<ng-container *ngIf=\"listItems\">\n <lib-tree-view \n [isApprovalView]=\"true\" \n [approvalList]=\"listItems\" \n [workFlowStatus]=\"workflowDetails?.currentStatus\"\n (sentForApprove)=\"approvalRequest($event)\">\n </lib-tree-view>\n</ng-container>\n", styles: [".approve-view__container{display:flex;justify-content:center;flex-direction:row}.approve-view__columns{flex:1;padding:30px}.approve-view__columns-title{text-transform:capitalize;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeViewComponent, selector: "lib-tree-view", inputs: ["approvalList", "isApprovalView", "workFlowStatus", "environment", "taxonomyConfig", "orgSelectedData"], outputs: ["sentForApprove", "loaderEnable", "manageOrg"] }] }); }
|
|
11341
11528
|
}
|
|
11342
11529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, decorators: [{
|
|
11343
11530
|
type: Component,
|
|
@@ -11374,7 +11561,7 @@ class CategoriesPreviewComponent {
|
|
|
11374
11561
|
}
|
|
11375
11562
|
}
|
|
11376
11563
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11377
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoriesPreviewComponent, selector: "lib-categories-preview", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"category\">\n <h1>{{app_strings.categoryPreview}}</h1>\n <div class=\"category__wrap\" *ngIf=\"data.length>0\">\n <div class=\"category__column\" *ngFor=\"let cat of data\">\n <header class=\"category__header\">{{cat.name}}</header>\n <mat-card class=\"category__cards\" [ngClass]=\"{'highlight':term.selected}\" id=\"{{term.domId}}\" *ngFor=\"let term of cat.terms\">\n <span class=\"category__circle left\"></span>\n <mat-card-content>{{term.name}}</mat-card-content>\n <span class=\"category__circle right\"></span>\n </mat-card>\n </div>\n </div>\n</div>\n", styles: [".category{display:flex;flex-flow:column;padding:15px}.category h1{font-size:24px;color:#666;font-weight:500}.category__wrap{display:flex;flex-flow:row;padding-top:20px}.category__column{display:flex;flex-flow:column;flex:1;padding:10px 50px;text-align:center}.category__header{margin:30px 0}.category__cards{margin-bottom:15px;position:relative;padding:20px 15px;background:#00000014;box-shadow:0 0 #fff;border:2px solid #ccc}.category__cards.highlight{background:#666;border:2px solid #666666;color:#fff}.category__circle{position:absolute;top:40%;display:inline-block}.category__circle.left{left:-3.6%}.category__circle.right{right:-3%}#start{width:200px;height:100px;margin:200px;background:#00000014}@media only screen and (max-width: 1024px){.category h1{font-size:20px}.category__column{padding:10px 25px}}\n"], dependencies: [{ kind: "directive", type: i5
|
|
11564
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoriesPreviewComponent, selector: "lib-categories-preview", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"category\">\n <h1>{{app_strings.categoryPreview}}</h1>\n <div class=\"category__wrap\" *ngIf=\"data.length>0\">\n <div class=\"category__column\" *ngFor=\"let cat of data\">\n <header class=\"category__header\">{{cat.name}}</header>\n <mat-card class=\"category__cards\" [ngClass]=\"{'highlight':term.selected}\" id=\"{{term.domId}}\" *ngFor=\"let term of cat.terms\">\n <span class=\"category__circle left\"></span>\n <mat-card-content>{{term.name}}</mat-card-content>\n <span class=\"category__circle right\"></span>\n </mat-card>\n </div>\n </div>\n</div>\n", styles: [".category{display:flex;flex-flow:column;padding:15px}.category h1{font-size:24px;color:#666;font-weight:500}.category__wrap{display:flex;flex-flow:row;padding-top:20px}.category__column{display:flex;flex-flow:column;flex:1;padding:10px 50px;text-align:center}.category__header{margin:30px 0}.category__cards{margin-bottom:15px;position:relative;padding:20px 15px;background:#00000014;box-shadow:0 0 #fff;border:2px solid #ccc}.category__cards.highlight{background:#666;border:2px solid #666666;color:#fff}.category__circle{position:absolute;top:40%;display:inline-block}.category__circle.left{left:-3.6%}.category__circle.right{right:-3%}#start{width:200px;height:100px;margin:200px;background:#00000014}@media only screen and (max-width: 1024px){.category h1{font-size:20px}.category__column{padding:10px 25px}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }] }); }
|
|
11378
11565
|
}
|
|
11379
11566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoriesPreviewComponent, decorators: [{
|
|
11380
11567
|
type: Component,
|
|
@@ -11440,7 +11627,7 @@ class CreateCategoriesComponent {
|
|
|
11440
11627
|
}
|
|
11441
11628
|
}
|
|
11442
11629
|
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 }); }
|
|
11443
|
-
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
|
|
11630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateCategoriesComponent, selector: "lib-create-categories", inputs: { taxonomyInfo: "taxonomyInfo" }, outputs: { updateCategory: "updateCategory", removeCategories: "removeCategories", changePosition: "changePosition" }, ngImport: i0, template: "\n<div class=\"form-wrap\">\n <h1>{{app_strings.createCategories}}</h1>\n <form [formGroup]=\"createCategoriesForm\" (ngSubmit)=\"saveForm()\" novalidate>\n <div class=\"form-field\">\n <div class=\"form-field__wrap\" formArrayName=\"categories\" cdkDropListGroup>\n <div cdkDropList [cdkDropListData]=\"categories().controls\" (cdkDropListDropped)=\"drop($event)\">\n <div class=\"form__category\" *ngFor=\"let cat of categories().controls; let i = index\" >\n <mat-form-field appearance=\"outline\" [formGroupName]=\"i\" cdkDrag>\n <mat-label>{{app_strings.category}} {{i}}</mat-label>\n <input matInput placeholder=\"{{app_strings.categoryName}}\" formControlName=\"name\" (blur)=\"emitCategory($event)\"> \n <div class=\"drag-Handle\" cdkDragHandle>\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n </svg>\n </div>\n </mat-form-field>\n <mat-icon (click)=\"removeCategory(i)\">{{app_strings.removeCircleOutline}}</mat-icon>\n \n </div>\n </div>\n </div>\n </div>\n <footer>\n <button type=\"button\" mat-raised-button (click)=\"addCategory()\" color=\"primary\">\n {{app_strings.add | titlecase}}\n </button>\n </footer>\n </form>\n</div>\n", styles: [".form-wrap{display:flex;flex-direction:column;justify-content:center;padding:15px}.form-wrap h1{font-size:24px;color:#666;font-weight:500}.form-field{display:flex;flex-direction:row;justify-content:start}.form-field__wrap{display:flex;flex-direction:column}.form-field__wrap .mat-form-field{width:350px}.form__btns{display:flex;flex-direction:column;justify-content:end;padding-bottom:15px;margin-left:15px}.form__category{display:flex;flex-direction:row;justify-content:center;align-items:center}.form__category .mat-form-field .mat-form-field-appearance-outline{margin-bottom:0}.form__category .mat-icon{margin-left:20px;height:20px;padding:5px 5px 25px;color:#b60909;cursor:pointer}.drag-Handle{position:absolute;top:8px;right:0;color:#9b9b9b;cursor:grabbing}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}footer{display:flex;flex-direction:row;justify-content:start}footer .mat-raised-button{padding:0 40px}@media only screen and (max-width: 1024px){.form-wrap h1{font-size:20px}.form-wrap-field__wrap .mat-form-field{width:250px}.form-wrap ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{top:10px;bottom:4px}.form-wrap ::ng-deep .mat-form-field-wrapper{padding-bottom:.3em}.form-wrap ::ng-deep .mat-input-element{font-size:10px}.form-wrap ::ng-deep .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
11444
11631
|
}
|
|
11445
11632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
|
|
11446
11633
|
type: Component,
|
|
@@ -11534,7 +11721,7 @@ class ConfigFrameworkComponent {
|
|
|
11534
11721
|
});
|
|
11535
11722
|
}
|
|
11536
11723
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigFrameworkComponent, deps: [{ token: FrameworkService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigFrameworkComponent, selector: "lib-config-framework", ngImport: i0, template: "<div class=\"config__wrap\">\n <lib-create-categories class=\"config__form-wrap\" [taxonomyInfo]=\"''\" (updateCategory)=\"updateCategory($event)\" \n (removeCategories)=\"removeCategory($event)\" (changePosition)=\"changePosition($event)\"></lib-create-categories>\n <ng-container *ngIf=\"categoriesRepresentations\">\n <lib-categories-preview class=\"config__preview\" [data]=\"categoriesRepresentations\"></lib-categories-preview>\n </ng-container>\n </div>\n", styles: [".config__wrap{display:flex;flex-direction:row;align-items:start;height:100vh}.config__form-wrap{flex-grow:1}.config__preview{flex-grow:9}\n"], dependencies: [{ kind: "directive", type: i5
|
|
11724
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfigFrameworkComponent, selector: "lib-config-framework", ngImport: i0, template: "<div class=\"config__wrap\">\n <lib-create-categories class=\"config__form-wrap\" [taxonomyInfo]=\"''\" (updateCategory)=\"updateCategory($event)\" \n (removeCategories)=\"removeCategory($event)\" (changePosition)=\"changePosition($event)\"></lib-create-categories>\n <ng-container *ngIf=\"categoriesRepresentations\">\n <lib-categories-preview class=\"config__preview\" [data]=\"categoriesRepresentations\"></lib-categories-preview>\n </ng-container>\n </div>\n", styles: [".config__wrap{display:flex;flex-direction:row;align-items:start;height:100vh}.config__form-wrap{flex-grow:1}.config__preview{flex-grow:9}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CreateCategoriesComponent, selector: "lib-create-categories", inputs: ["taxonomyInfo"], outputs: ["updateCategory", "removeCategories", "changePosition"] }, { kind: "component", type: CategoriesPreviewComponent, selector: "lib-categories-preview", inputs: ["data"] }] }); }
|
|
11538
11725
|
}
|
|
11539
11726
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfigFrameworkComponent, decorators: [{
|
|
11540
11727
|
type: Component,
|
|
@@ -11622,7 +11809,8 @@ class TreeHierarchyModule {
|
|
|
11622
11809
|
OrderByPipe,
|
|
11623
11810
|
ConforamtionPopupComponent,
|
|
11624
11811
|
CreateTermFromFrameworkComponent,
|
|
11625
|
-
OrgHierarchyAddModalComponent
|
|
11812
|
+
OrgHierarchyAddModalComponent,
|
|
11813
|
+
CategoryEditModuleComponent], imports: [CommonModule,
|
|
11626
11814
|
MaterialModule,
|
|
11627
11815
|
TreeEditorRoutingModule], exports: [TreeHierarchyComponent,
|
|
11628
11816
|
CreateCategoriesComponent,
|
|
@@ -11668,6 +11856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
11668
11856
|
ConforamtionPopupComponent,
|
|
11669
11857
|
CreateTermFromFrameworkComponent,
|
|
11670
11858
|
OrgHierarchyAddModalComponent,
|
|
11859
|
+
CategoryEditModuleComponent,
|
|
11671
11860
|
],
|
|
11672
11861
|
imports: [
|
|
11673
11862
|
CommonModule,
|