@sunbird-cb/tree-hierarchy 0.0.12-cbrelease-4.8.26 → 0.0.13-cbrelease-4.8.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.mjs +53 -51
- package/esm2022/lib/components/term-card/term-card.component.mjs +3 -3
- package/esm2022/lib/components/tree-view/tree-view.component.mjs +77 -10
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs +146 -76
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs.map +1 -1
- package/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.d.ts +7 -3
- package/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.d.ts.map +1 -1
- package/lib/components/tree-view/tree-view.component.d.ts +3 -1
- package/lib/components/tree-view/tree-view.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -12,24 +12,24 @@ import { RouterModule } from '@angular/router';
|
|
|
12
12
|
import * as i5 from '@angular/common';
|
|
13
13
|
import { CommonModule, DatePipe } from '@angular/common';
|
|
14
14
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
15
|
-
import * as i3$
|
|
15
|
+
import * as i3$2 from '@angular/cdk/drag-drop';
|
|
16
16
|
import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
|
|
17
17
|
import { PortalModule } from '@angular/cdk/portal';
|
|
18
18
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
19
19
|
import { CdkStepperModule } from '@angular/cdk/stepper';
|
|
20
20
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
21
21
|
import { CdkTreeModule } from '@angular/cdk/tree';
|
|
22
|
-
import * as i7
|
|
22
|
+
import * as i7 from '@angular/material/autocomplete';
|
|
23
23
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
24
24
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
25
25
|
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i6 from '@angular/material/button';
|
|
27
27
|
import { MatButtonModule } from '@angular/material/button';
|
|
28
28
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
29
29
|
import * as i2 from '@angular/material/card';
|
|
30
30
|
import { MatCardModule } from '@angular/material/card';
|
|
31
31
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
32
|
-
import * as
|
|
32
|
+
import * as i7$2 from '@angular/material/legacy-chips';
|
|
33
33
|
import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
|
|
34
34
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
35
35
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -41,12 +41,12 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|
|
41
41
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
42
42
|
import * as i5$1 from '@angular/material/icon';
|
|
43
43
|
import { MatIconModule } from '@angular/material/icon';
|
|
44
|
-
import * as i6$
|
|
44
|
+
import * as i6$3 from '@angular/material/input';
|
|
45
45
|
import { MatInputModule } from '@angular/material/input';
|
|
46
46
|
import { MatListModule } from '@angular/material/list';
|
|
47
47
|
import * as i14 from '@angular/material/menu';
|
|
48
48
|
import { MatMenuModule } from '@angular/material/menu';
|
|
49
|
-
import * as i6$
|
|
49
|
+
import * as i6$2 from '@angular/material/core';
|
|
50
50
|
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|
51
51
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
52
52
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
@@ -65,15 +65,15 @@ import { MatTableModule } from '@angular/material/table';
|
|
|
65
65
|
import * as i1$2 from '@angular/material/tabs';
|
|
66
66
|
import { MatTabsModule, MAT_TABS_CONFIG } from '@angular/material/tabs';
|
|
67
67
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
68
|
-
import * as i6 from '@angular/material/tooltip';
|
|
68
|
+
import * as i6$1 from '@angular/material/tooltip';
|
|
69
69
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
70
70
|
import { MatTreeModule } from '@angular/material/tree';
|
|
71
71
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
72
|
-
import * as i7$
|
|
72
|
+
import * as i7$1 from '@angular/material/form-field';
|
|
73
73
|
import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
|
74
74
|
import * as i3 from '@angular/forms';
|
|
75
75
|
import { ReactiveFormsModule, FormsModule, Validators, FormControl, UntypedFormControl } from '@angular/forms';
|
|
76
|
-
import * as
|
|
76
|
+
import * as i3$1 from '@angular/material/legacy-snack-bar';
|
|
77
77
|
import * as i1$3 from '@angular/material/legacy-dialog';
|
|
78
78
|
import { MAT_LEGACY_DIALOG_DATA } from '@angular/material/legacy-dialog';
|
|
79
79
|
import * as i15 from '@angular/cdk/text-field';
|
|
@@ -7904,7 +7904,7 @@ class ActionBarComponent {
|
|
|
7904
7904
|
return `Approve ${res.substr(res.lastIndexOf('_') + 1, res.length)}`;
|
|
7905
7905
|
}
|
|
7906
7906
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7907
|
-
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:
|
|
7907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionBarComponent, selector: "lib-action-bar", inputs: { actionType: "actionType", configType: "configType" }, outputs: { sendApproval: "sendApproval", closeAction: "closeAction" }, ngImport: i0, template: "<!-- *ngIf=\"configType !=='APPROVED' && actionType\" -->\n<mat-card class=\"action-bar\">\n <div class=\"action-bar-buttons\">\n <div>\n <button mat-raised-button color=\"default\" (click)=\"closeActionBar()\">{{app_strings.cancel}}</button>\n </div>\n <div>\n <button mat-raised-button color=\"primary\" (click)=\"SendForApproval()\">\n {{actionType? getApproveLevelText(configType) :'Send for Approval'}} \n </button>\n </div>\n </div>\n <!-- <button mat-raised-button color=\"primary\" (click)=\"publishFramwork()\">Publish</button> -->\n <!-- <button *ngIf=\"actionType\" mat-button color=\"primary\">\n <mat-icon color=\"primary\">flag</mat-icon>\n Terms tobe Approve\n </button> -->\n\n</mat-card>", styles: [".action-bar{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;box-shadow:0 -1px 2px 1px #ccc;border-radius:0;height:10%;align-items:center;z-index:50;padding:0}.action-bar .mat-raised-button{padding:0 4em}.action-bar-buttons{display:flex;justify-content:space-between;width:100%;padding:0 10px}.action .mat-checkbox{margin-right:20px}@media only screen and (max-width: 1024px){.action-bar-buttons button{font-size:12px}.action-bar-buttons .mat-raised-button{padding:0 3em}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
|
|
7908
7908
|
}
|
|
7909
7909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionBarComponent, decorators: [{
|
|
7910
7910
|
type: Component,
|
|
@@ -8078,7 +8078,7 @@ class PendingApprovalComponent {
|
|
|
8078
8078
|
return temp;
|
|
8079
8079
|
}
|
|
8080
8080
|
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 }); }
|
|
8081
|
-
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" }] }); }
|
|
8081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PendingApprovalComponent, selector: "lib-pending-approval", ngImport: i0, template: "<div class=\"pending-approval\">\n <header class=\"mat-header\">\n <h2>{{app_strings.pendingApproval}} ({{approvalList.length}})</h2>\n </header>\n\n <mat-card *ngFor=\"let p of approvalList | orderBy\">\n\n <mat-card-content>\n <span class=\"date\">\n <h4>{{app_strings.date}}</h4>\n <span>{{p.lastUpdatedOn | date}}</span>\n </span>\n <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n <h4>{{t.name}}</h4>\n <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n {{t.children[0].name}}\n <ng-container *ngIf=\"t.children.length>1\">\n & {{t.children.length-1}} {{app_strings.more}}\n </ng-container>\n </div>\n </div>\n <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>{{app_strings.rightArrow}}</mat-icon></a>\n </mat-card-content>\n </mat-card>\n <!-- <mat-tab-group mat-align-tabs=\"center\" animationDuration=\"0ms\">\n <mat-tab label=\"Sent for approval\" active> -->\n <!-- <mat-card>\n <mat-card-content>\n <div *ngFor=\"let t of categories\" class=\"col\">\n <h4>{{t}}</h4>\n </div>\n </mat-card-content>\n </mat-card> -->\n <!-- <mat-card *ngFor=\"let p of approvalList\">\n <mat-card-content>\n <div *ngFor=\"let t of createApprovalList(p.updateFieldValues)\" class=\"col\">\n <h4>{{t.name}}</h4>\n <div matTooltip=\"{{getTerms(t.children)}}\" matTooltipPosition=\"above\" matTooltipClass=\"custom-tooltip\">\n {{t.children[0].name}}\n <ng-container *ngIf=\"t.children.length>1\">\n & {{t.children.length-1}} more...\n </ng-container>\n </div>\n \n </div> \n <a class=\"approve-view-link\" routerLink=\"/approval/{{p.wfId}}\"><mat-icon>keyboard_arrow_right</mat-icon></a>\n </mat-card-content>\n </mat-card>\n </mat-tab> -->\n <!-- <mat-tab label=\"Approved\"> Approved </mat-tab>\n <mat-tab label=\"Rejected\"> Rejected </mat-tab> -->\n <!-- </mat-tab-group> -->\n\n</div>", styles: [".pending-approval{padding:0 15px}.pending-approval h2{font-weight:400}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header{background-color:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label{padding:0 10px}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label .mat-tab-label-content{color:#000}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active{background:#fff}.pending-approval .mat-tab-group ::ng-deep .mat-tab-header .mat-tab-label-active .mat-tab-label-content{color:#000}.pending-approval .mat-card{background:#f3f3f3;margin-top:25px;padding:5px 0;box-shadow:none}.pending-approval .mat-card-content{display:flex;flex-direction:row;justify-content:left;align-items:center;padding-left:4%;position:relative}.pending-approval .mat-card-content h4{text-transform:capitalize;padding:0;margin:10px 0}.pending-approval .mat-card-content .approve-view-link{position:absolute;right:4%}.pending-approval .col{display:flex;flex-direction:column;padding-right:100px}.pending-approval .col div{cursor:pointer;font-size:20px}::ng-deep .custom-tooltip{font-size:16px;background:#fff!important;color:#000!important;padding:10px 0}::ng-deep .mat-icon{font-size:40px;color:#000000de;cursor:pointer}.date{padding:0 20px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }] }); }
|
|
8082
8082
|
}
|
|
8083
8083
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PendingApprovalComponent, decorators: [{
|
|
8084
8084
|
type: Component,
|
|
@@ -8928,8 +8928,8 @@ class CreateTermComponent {
|
|
|
8928
8928
|
});
|
|
8929
8929
|
});
|
|
8930
8930
|
}
|
|
8931
|
-
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:
|
|
8932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermComponent, selector: "lib-create-term", ngImport: i0, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title></div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n <div class=\"dialog\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n class=\"defaultForm\">\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name }}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n</ng-template>\n\n<ng-template #themeCreate >\n <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{getCategoryName(term.category,term)}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n </mat-select>\n\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n \n <div class=\"flex\">\n\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n </div>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname \n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input autocomplete=\"off\" \n matInput [value]=\"data?.childrenData?.name\" disabled>\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n </button>\n </div>\n <mat-accordion formArrayName=\"themeFields\">\n <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n {{getExpansionTitle(field)}} \n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeThemeFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n \n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}} </mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n \n </mat-select>\n \n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <div class=\"flex\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n \n \n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n \n \n \n \n </div>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <div class=\"flex flex-end\">\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n Save\n </button>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.add_btn}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n <div class=\"themDesignation\">\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"mb-2\">\n <span class=\"organisation\">Organisation</span>\n <div class=\"org-name pl-4 flex items-center\">\n <!-- <span>Department of Fisheries</span> -->\n <span>{{data?.columnInfo?.name}}</span>\n </div>\n </div>\n <div class=\"row-divider\"></div>\n <div class=\"flex w-full items-center justify-end mt-4\">\n <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n <span>Add Designations</span>\n </a>\n </div>\n <div class=\"mt-5\">\n <form [formGroup]=\"createThemeForm\">\n <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n <mat-expansion-panel [formGroupName]=\"i\" class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n <mat-expansion-panel-header>\n <div class=\"flex w-full items-center justify-end\">\n <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"flex flex-col gap-2 \">\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete>\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n </div>\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Description <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <textarea matInput formControlName=\"designationDescription\"\n placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n </mat-form-field>\n </div>\n \n <div class=\"w-full flex justify-end items-center\">\n <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n (click)=\"saveDesignation(i)\">Save</button>\n </div>\n </div>\n </mat-expansion-panel>\n </ng-container>\n </mat-accordion>\n </form>\n </div>\n </div>\n <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n <button mat-raised-button class=\"cancel flex justify-center items-center\"\n (click)=\"cancel()\">Cancel</button>\n <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n </div>\n </div>\n</ng-template>\n<ng-template #compTheme>\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{term.category}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button class=\"learning-section\" *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n \n </mat-radio-group>\n </div>\n </div>\n \n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Add Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n \n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add {{data.columnInfo.name}}\n </button>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <!-- {{name?.value}} -->\n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Select Competency Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\" >{{option.name}}</mat-option>\n </mat-select>\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <!-- <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n </mat-form-field>\n </div> -->\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Select Competency Sub-Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n \n </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i15.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
|
|
8931
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: FrameworkService }, { token: i3.UntypedFormBuilder }, { token: OdcsService }, { token: i3$1.MatLegacySnackBar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8932
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermComponent, selector: "lib-create-term", ngImport: i0, template: "<ng-container [ngSwitch]=\"data?.columnInfo?.code || 'defaultCreate'\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'theme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'subtheme'\" [ngTemplateOutlet]=\"themeCreate\"></ng-container>\n <ng-container *ngSwitchCase=\"'designation'\" [ngTemplateOutlet]=\"themeDesignation\"></ng-container>\n <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"compTheme\"></ng-container>\n</ng-container>\n\n<ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>Add {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name }} </div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title></div>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data?.columnInfo?.config?.categoryDisplayName || data.columnInfo.name}}</div>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultCreate>\n <div class=\"dialog\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <form [formGroup]=\"createTermForm\" novalidate (ngSubmit)=\"disableCreate?updateTermAssociations():saveTerm()\"\n class=\"defaultForm\">\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <input matInput formControlName=\"name\" placeholder=\"{{app_strings.name}}\" [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, createTermForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name }}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput formControlName=\"description\" placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"!disableCreate || disableMultiCreate\">{{app_strings.create}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n *ngIf=\"disableCreate\">{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n</ng-template>\n\n<ng-template #themeCreate >\n <div class=\"dialogNew\" [ngClass]=\"{'disabled-div': disableMultiCreate}\" >\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{getCategoryName(term.category,term)}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code !== 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeForm)\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeForm)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}}</mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n </mat-select>\n\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n \n <div class=\"flex\">\n\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n </div>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname \n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" >\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n <div class=\"flex gap-4 \" *ngIf=\"data.columnInfo?.code === 'competencyarea' && data.mode === 'view'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n \n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input autocomplete=\"off\" \n matInput [value]=\"data?.childrenData?.name\" disabled>\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeFormMulti\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addThemeFields()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n </button>\n </div>\n <mat-accordion formArrayName=\"themeFields\">\n <mat-expansion-panel #mep=\"matExpansionPanel\" *ngFor=\"let field of themeFieldsControls; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n {{getExpansionTitle(field)}} \n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeThemeFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeFormMulti, i)\" maxlength=\"70\"> -->\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n \n <mat-select placeholder=\"{{app_strings?.name}}\" formControlName=\"name\" id=\"name\" #name (selectionChange)=\"change($event,createThemeFormMulti, i )\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" (keyup)=\"onKey($event)\" matInput>\n <mat-option *ngFor=\"let option of filteredMasterList\" (blur)=\"updateDname(option?.title, createThemeFormMulti, i)\" [disabled]=\"onDisableTheme(option)\" [value]=\"option\">{{option.title}} </mat-option>\n <mat-option *ngIf=\"filteredMasterList.length === 0\" disabled>\n No results found!\n </mat-option>\n \n </mat-select>\n \n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings?.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <div class=\"flex\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n \n \n <mat-icon class=\"info-icon cursor-pointer\" [matTooltip]=\"toolTipText\" \n matTooltipClass=\"tooltip-sec\">info_outline</mat-icon>\n \n \n \n \n \n </div>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Field automatically generated from the name field.\" maxlength=\"70\" [disabled]=\"name?.value?.length === 0\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\" maxlength=\"2000\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <div class=\"flex flex-end\">\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"mep.expanded = false\"\n [disabled]=\"createThemeFormMulti?.get('themeFields')['controls'][i].invalid\">\n Save\n </button>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.add_btn}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.add_btn}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #themeDesignation>\n <div class=\"themDesignation\">\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"mb-2\">\n <span class=\"organisation\">Organisation</span>\n <div class=\"org-name pl-4 flex items-center\">\n <!-- <span>Department of Fisheries</span> -->\n <span>{{data?.columnInfo?.name}}</span>\n </div>\n </div>\n <div class=\"row-divider\"></div>\n <div class=\"flex w-full items-center justify-end mt-4\">\n <a class=\"add-designation flex justify-center items-center\" (click)=\"addDesignation()\">\n <mat-icon class=\"add-icon mr-2\">add_circle_outline</mat-icon>\n <span>Add Designations</span>\n </a>\n </div>\n <div class=\"mt-5\">\n <form [formGroup]=\"createThemeForm\">\n <mat-accordion class=\"flex flex-col gap-2\" formArrayName=\"designations\">\n <ng-container *ngFor=\"let designation of designationControls; let i = index\">\n <mat-expansion-panel [formGroupName]=\"i\" class=\"designation-panel\" [expanded]=\"panelOpenState[i]\">\n <mat-expansion-panel-header>\n <div class=\"flex w-full items-center justify-end\">\n <mat-icon class=\"deletDesignation mr-4\" (click)=\"deleteDesignation(i)\">delete</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"flex flex-col gap-2 \">\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Designation Name <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" placeholder=\"Type here\" [matAutocomplete]=\"auto\" (change)=\"clearSelectedDesignaionOnChange(i, $event)\">\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option, designation)\">\n <mat-option *ngFor=\"let option of getFilteredDesignationList(i)\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete>\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n <!-- <mat-error>{{app_strings.alreadyExist}}</mat-error> -->\n </div>\n <div class=\"w-full\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\">\n Description <mat-icon class=\"info-icon\">info</mat-icon>\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <textarea matInput formControlName=\"designationDescription\"\n placeholder=\"Type the decription in fewer than 600 characters\"></textarea>\n </mat-form-field>\n </div>\n \n <div class=\"w-full flex justify-end items-center\">\n <button mat-raised-button class=\"saveDesignaton flex justify-center items-center\"\n (click)=\"saveDesignation(i)\">Save</button>\n </div>\n </div>\n </mat-expansion-panel>\n </ng-container>\n </mat-accordion>\n </form>\n </div>\n </div>\n <div class=\"flex justify-end items-center gap-4 mt-5 designation-footer\">\n <button mat-raised-button class=\"cancel flex justify-center items-center\"\n (click)=\"cancel()\">Cancel</button>\n <button mat-raised-button [disabled]=\"!enableAddBtn\" class=\"addBtn flex justify-center items-center\" (click)=\"submitDesignation()\">Add</button>\n </div>\n </div>\n</ng-template>\n<ng-template #compTheme>\n <div class=\"dialogNew\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{term.category}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button class=\"learning-section\" *ngFor=\"let item of allCompetency\" [value]=\"item\" (change)=\"onSelectionArea(item)\">{{item.name}}</mat-radio-button>\n \n </mat-radio-group>\n </div>\n </div>\n \n <ng-container *ngIf=\"data?.mode !== 'multi-create'\">\n <form class=\"themeForm\" [formGroup]=\"createThemeForm\" novalidate\n (ngSubmit)=\"disableCreate?updateTermAssociations():saveThemeTerm()\">\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Add Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"name\" id=\"name\" #name\n placeholder=\"{{app_strings.name}}\"\n (blur)=\"updateDname(name.value, createThemeForm)\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\"> -->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n <!-- <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Description\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <textarea matInput [cdkTextareaAutosize] [cdkAutosizeMaxRows]=\"10\"\n [cdkAutosizeMinRows]=\"3\" formControlName=\"description\"\n placeholder=\"{{app_strings.description}}\"></textarea>\n </mat-form-field>\n </div>\n </div>\n </div>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\" [disabled]=\"createThemeForm?.invalid\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </form>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n \n <div class=\"flex flex-end mb-4\">\n <button type=\"button\" class=\"mat-button flex items-center \" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add {{data.columnInfo.name}}\n </button>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l\" [formGroupName]=\"i\" [expanded]=\"isFirst\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <!-- {{name?.value}} -->\n </mat-panel-title>\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Select Competency Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" (onSelectionChange)=\"OnThemeSelection($event)\" >{{option.name}}</mat-option>\n </mat-select>\n <!-- <input matInput formControlName=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [matAutocomplete]=\"auto\">\n <mat-autocomplete #auto=\"matAutocomplete\"\n (optionSelected)=\"onSelect($event.option, createThemeForm)\">\n <mat-option *ngFor=\"let option of filtedTermLists | async\" [value]=\"option\">\n {{option.name}}\n </mat-option>\n </mat-autocomplete> -->\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n <!-- <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n Display Name\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput formControlName=\"dname\" id=\"dname\" #dname\n placeholder=\"Competency display name\">\n </mat-form-field>\n </div> -->\n </div>\n\n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n Select Competency Sub-Theme\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <!-- <mat-label>Enter {{data.name}} name</mat-label> -->\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <!-- <input #search autocomplete=\"off\" placeholder=\"Search\" class=\"assigneeSearch\"\n (keydown.space)=\"$event.stopPropagation()\" formControlName=\"assigneeText\" matInput> -->\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"createThemeForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"createThemeFormMulti.invalid\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(createThemeFormMulti, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(createThemeForm, data)\"\n [disabled]=\"createThemeForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n \n </div>\n</ng-template>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:0 1rem}.dialogNew .mat-dialog-title{padding:1em;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.info-icon{color:#0009;font-size:19px;position:relative;top:3px}::ng-deep .tooltip-sec{background-color:0!important;font-size:12px!important;font-family:500!important;color:#fff!important}.assigneeSearch{height:50px!important;font-size:15px;padding-left:12px;box-sizing:border-box}.disabled-div{pointer-events:none;opacity:.5;background-color:#f9f9f9}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i15.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
|
|
8933
8933
|
}
|
|
8934
8934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermComponent, decorators: [{
|
|
8935
8935
|
type: Component,
|
|
@@ -8937,7 +8937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8937
8937
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
8938
8938
|
type: Inject,
|
|
8939
8939
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
8940
|
-
}] }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: OdcsService }, { type:
|
|
8940
|
+
}] }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: OdcsService }, { type: i3$1.MatLegacySnackBar }, { type: i0.ChangeDetectorRef }]; } });
|
|
8941
8941
|
|
|
8942
8942
|
class ConnectorComponent {
|
|
8943
8943
|
constructor(dialogRef, data, localScv, fb) {
|
|
@@ -8975,7 +8975,7 @@ class ConnectorComponent {
|
|
|
8975
8975
|
this.dialogRef.close({ source: 'offline', data: {} });
|
|
8976
8976
|
}
|
|
8977
8977
|
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 }); }
|
|
8978
|
-
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:
|
|
8978
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConnectorComponent, selector: "lib-connector", ngImport: i0, template: "<div class=\"flex flex-1 flex-row-reverse pointer\">\n <button mat-raised-button color=\"default\" (click)=\"dialogClose()\" >\n <mat-icon mat-raised-button >{{app_strings.close}}</mat-icon>\n </button>\n</div>\n<div class=\"dialog flex\">\n <div class=\"flex flex-1 flex-row\">\n <div class=\"container flex flex-1\">\n <div class=\"side flex flex-1\">\n <div class=\"'flex flex-2 padding-s\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.newConnection}}</div>\n <form [formGroup]=\"connectorForm\" novalidate (ngSubmit)=\"saveConnection()\">\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.endPoint}}</mat-label>\n <input matInput type=\"url\" formControlName=\"endpoint\" placeholder=\"{{app_strings.endPoint}}\" />\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.token}}</mat-label>\n <input matInput formControlName=\"token\" placeholder=\"{{app_strings.token}}\" />\n </mat-form-field>\n <mat-form-field appearance=\"outline\">\n <mat-label>{{app_strings.enterFrameworkName}}</mat-label>\n <input matInput formControlName=\"frameworkName\" placeholder=\"{{app_strings.frameworkName}}\" />\n </mat-form-field>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose()\">{{app_strings.cancel}}</button>\n <button mat-raised-button color=\"default\" type=\"reset\" (click)=\"clear()\">{{app_strings.clear}}</button>\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial>{{app_strings.update}}</button>\n </footer>\n </form>\n </div>\n </div>\n <div class=\"or\">\n <div class=\"or-line\"></div>\n <div class=\"or-label\">{{app_strings.or}}</div>\n </div>\n <div class=\"side flex flex-1\">\n <div class=\"'flex flex-1 padding-s\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.experienceTaxonomy}}</div>\n <button mat-raised-button class=\"play\" color=\"primary\" type=\"reset\" (click)=\"loadDefault()\">\n {{app_strings.playWithIt}}\n </button>\n </div>\n </div>\n </div>\u200B\n\n </div>\n</div>", styles: [".dialog .mat-dialog-title{padding:10px 20px;margin-bottom:0;background:#00000014}.dialog .mat-form-field{width:90%;padding:0;background:#fff;margin:20px;border-radius:2px}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 20px 20px}.dialog .mat-error{padding:0 25px;margin-top:-10px}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-1{flex:1}.flex-2{flex:2}.flex{display:flex}.padding-s{padding:8px}.container{padding:1em}.side,.or{float:left;text-align:center}.side{width:40%}.or{position:relative;width:20%}.or-line{float:left;width:50%;border-right:1px solid rgb(68,50,50);height:100%}.or-label{background:#fff;color:#000;height:1em;left:50%;margin-left:-1.25em;margin-top:2em;padding:.5em;position:absolute;text-transform:uppercase;width:1em}.play{padding:20px;margin:20% auto auto;display:flex}.dialog-title{align-items:center;display:flex}::ng-deep .mat-form-field-wrapper{padding:0}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:70%!important;height:60%!important}}@media only screen and (max-width: 1024px){mat-icon{font-size:20px;width:1.25em;height:1.25em}.pointer .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}.dialog.flex{height:calc(100% - 16vh);font-size:12px}.dialog.flex mat-form-field{margin:1em}.dialog .actions{padding:0}.dialog .actions button{font-size:12px;line-height:2.5em;margin:0 5px}.dialog-title{font-size:14px;height:1em}.play{padding:.6em;font-size:12px}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
8979
8979
|
}
|
|
8980
8980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConnectorComponent, decorators: [{
|
|
8981
8981
|
type: Component,
|
|
@@ -9037,8 +9037,8 @@ class ConforamtionPopupComponent {
|
|
|
9037
9037
|
this.dialogRef.close(event);
|
|
9038
9038
|
});
|
|
9039
9039
|
}
|
|
9040
|
-
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:
|
|
9041
|
-
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:
|
|
9040
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: FrameworkService }, { token: i3$1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConforamtionPopupComponent, selector: "lib-conforamtion-popup", ngImport: i0, template: "<!-- <div class=\"w-full\">\n <div class=\"w-full conformation-popup flex justify-center items-center\">\n <span class=\"msgDescription\">{{dialogData?.message}}</span>\n </div>\n <div class=\"w-full flex justify-end items-center gap-4\">\n <button mat-raised-button [mat-dialog-close]=\"true\">Close</button>\n <button mat-raised-button (click)=\"closePopup(true)\" class=\"remove\">Remove</button>\n </div>\n</div> -->\n\n<div class=\"dialog-container\">\n <ng-container *ngIf=\"showLoader\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <ng-container [ngSwitch]=\"dialogDetails.dialogType\">\n <!-- <ng-container *ngSwitchCase=\"'success'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"success-icon\">done</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'fail'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"fail-icon\">priority_high</mat-icon>\n </div>\n </ng-container> -->\n <ng-container *ngSwitchCase=\"'warning'\">\n <div class=\"flex justify-center items-center mb-4\">\n <mat-icon aria-hidden=\"false\" class=\"warning-icon\">info_outlined</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogDetails.iconDetails\">\n <div class=\"circule mb2\" [ngClass]=\"dialogDetails.iconDetails.iconClass\">\n <mat-icon aria-hidden=\"false\" class=\"success-icon\">{{dialogDetails.iconDetails.icon}}</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngFor=\"let description of dialogDetails?.descriptions\">\n <ng-container *ngIf=\"description.header\">\n <div [ngClass]=\"description.headerClass\">\n <span>{{description.header}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"description.messages\">\n <div class=\"description mt-1 flex w-full justify-center\">\n <span>\n <ng-container *ngFor=\"let msgDetails of description.messages\">\n <span [ngClass]=\"msgDetails.msgClass\">{{msgDetails.msg}}</span>\n </ng-container>\n </span>\n <!-- <span>{{description.message}}</span> -->\n </div>\n </ng-container>\n </ng-container>\n</div>\n<div class=\"px2 footer flex w-full gap-2\" [ngClass]=\"dialogDetails.footerClass\">\n <ng-container *ngFor=\"let btn of dialogDetails?.buttons\">\n <button mat-raised-button (click)=\"closePopup(btn.response)\" [ngClass]=\"btn.btnClass\">{{btn.btnText}}</button>\n </ng-container>\n</div>", styles: [".dialog-container .warning-icon{color:#f3962f;font-size:45px;height:45px;width:45px}.dialog-container .description{font-size:14px}.footer{height:60px}.footer .btn-full-success{min-width:80px;border:none;background-color:#045dad;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-full-red{min-width:80px;border:none;background-color:red;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.footer .btn-outline{min-width:80px;background-color:#fff;color:#045dad;border:2px solid #045dad;border-radius:5px;font-size:15px;cursor:pointer}.textBold{font-weight:700}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}.text-blue{font-size:16px!important;color:#1b4ca1!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
9042
9042
|
}
|
|
9043
9043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConforamtionPopupComponent, decorators: [{
|
|
9044
9044
|
type: Component,
|
|
@@ -9046,7 +9046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9046
9046
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
9047
9047
|
type: Inject,
|
|
9048
9048
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
9049
|
-
}] }, { type: FrameworkService }, { type:
|
|
9049
|
+
}] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
|
|
9050
9050
|
|
|
9051
9051
|
class CreateTermFromFrameworkComponent {
|
|
9052
9052
|
constructor(dialogRef, data, dialog, frameWorkService, fb, _snackBar) {
|
|
@@ -9835,8 +9835,8 @@ class CreateTermFromFrameworkComponent {
|
|
|
9835
9835
|
get compThemeFields() {
|
|
9836
9836
|
return this.competencyForm.get('compThemeFields');
|
|
9837
9837
|
}
|
|
9838
|
-
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:
|
|
9839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermFromFrameworkComponent, selector: "lib-create-term-from-framework", ngImport: i0, template: "\n<div class=\"\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <div class=\"dialogNew\">\n <div class=\"flex items-center justify-between\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <ng-container *ngIf=\"term.category !== 'competency'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{frameWorkService.getConfig(term.category).labelName}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"competencyForm\">\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <div class=\"flex flex-end mb-4\" >\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n <!-- {{data.columnInfo.name}} -->\n </button>\n </ng-container>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n </mat-panel-title>\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </ng-container>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <ng-container >\n <ng-container >\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n (onSelectionChange)=\"OnThemeSelection($event, i, option)\" >{{option.name}}\n <ng-container *ngIf=\"option.refId\">\n <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </mat-select>\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n </div>\n \n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n\n {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n \n </label>\n <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field> -->\n <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n <mat-select-trigger >\n <mat-chip-listbox>\n <!-- -->\n \n <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\" [removable]=\"data?.openMode ==='view'? false: true\">\n <span >{{ item.name }}</span>\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n <!-- <mat-optgroup>\n <mat-form-field floatLabel=\"never\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n formControlName=\"competencySubTheme\" matInput>\n </mat-form-field>\n </mat-optgroup> -->\n <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n <div>No results found!</div>\n </mat-optgroup>\n <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n <mat-option \n [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n <ng-container *ngIf=\"option?.refId\">\n <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n \n </mat-select>\n <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n Please select up to five preferred providers for the request.\n </mat-error> -->\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.update}}\n </button>\n <!-- </ng-container> -->\n \n <!-- <ng-template #updateBtn>\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.delete}}\n </button>\n </ng-template> -->\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(competencyForm, data)\"\n [disabled]=\"competencyForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n </ng-container>\n \n </div>\n \n \n <!-- Title of the popup -->\n <ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <!-- {{data |json}} -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n </ng-container>\n <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n </ng-container>\n </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button (click)=\"deleteTheme()\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i8.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i8.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i18.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
9838
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: FrameworkService }, { token: i3.UntypedFormBuilder }, { token: i3$1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateTermFromFrameworkComponent, selector: "lib-create-term-from-framework", ngImport: i0, template: "\n<div class=\"\">\n <ng-container *ngIf=\"disableMultiCreate\">\n <div class=\"flex flex-col flex-1 w-100 absolute loader-bg items-center pt-5 text-center\">\n <mat-spinner class=\"display-inline-block mb-5\" [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n <!-- <p>{{loaderMsg}}</p> -->\n </div>\n </ng-container>\n <div class=\"dialogNew\">\n <div class=\"flex items-center justify-between\">\n <ng-container [ngTemplateOutlet]=\"modalTitle\"></ng-container>\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"cardMenu\" [matMenuTriggerData]=\"{'data':data}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n <div class=\"flex gap-4\">\n <ng-container *ngFor=\"let term of data?.selectedParentTerms\">\n <ng-container *ngIf=\"term.category !== 'competency'\">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label\" aria-label=\"First name label\">\n {{frameWorkService.getConfig(term.category).labelName}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <input matInput name=\"name\" id=\"name\" #name placeholder=\"{{app_strings.name}}\"\n [value]=\"term.name\" disabled>\n </mat-form-field>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"row-divider\"></div>\n <ng-container *ngIf=\"competencyForm\">\n <form [formGroup]=\"competencyForm\">\n <div class=\"title-text\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\" aria-label=\"First name labe \">\n {{'Select Area'}}\n </label>\n <div class=\"mt-5\">\n <mat-radio-group class=\"competency-group\" aria-label=\"Select an option\" formControlName=\"compArea\">\n <mat-radio-button [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" class=\"learning-section\" [ngClass]=\"{'active-btn':item?.code === seletedCompetencyArea?.code}\"\n *ngFor=\"let item of competencyArea?.children\" [value]=\"item\" [checked]=\"item?.code === seletedCompetencyArea?.code\" (change)=\"clearSelectedThemes(item)\">{{item.name}}</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n <ng-container *ngIf=\"data?.mode === 'multi-create'\">\n <div class=\"flex flex-end mb-4\" >\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button type=\"button\" class=\"mat-button flex items-center create-accordion-btn\" *ngIf=\"data.mode === 'multi-create'\" (click)=\"addCompetencyTheme()\">\n <mat-icon class=\"mr-2 mat-icon-custom \">add_circle_outline</mat-icon>\n Add more\n <!-- {{data.columnInfo.name}} -->\n </button>\n </ng-container>\n </div>\n <mat-accordion formArrayName=\"compThemeFields\">\n <mat-expansion-panel *ngFor=\"let field of competencyForm?.get('compThemeFields')['controls']; let i = index; let isFirst = first\" \n class=\"margin-bottom-l comp-theme-fields\" [formGroupName]=\"i\" [expanded]=\"isFirst\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.name}} \n </mat-panel-title>\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-button type=\"button\" *ngIf=\"data.mode === 'multi-create'\"\n (click)=\"removeCompFields(i)\">\n <mat-icon class=\"mat-icon-custom \">delete</mat-icon>\n </button>\n </ng-container>\n </mat-expansion-panel-header>\n <div class=\"input-column\">\n <div class=\"input-wrapper margin-top-s\">\n <div class=\"flex gap-4 \">\n <div class=\"flex-1 flex-col\">\n <label for=\"name\" class=\"margin-remove-bottom form-label required\"\n aria-label=\"First name label\">\n {{data.openMode !== 'view'? 'Select Competency Theme': 'Competency Theme Name'}}\n </label>\n <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select [disabled]=\"data?.columnInfo?.code === 'subtheme' || data.openMode ==='view'\" placeholder=\"Choose the Competency Theme\" formControlName=\"competencyTheme\">\n <ng-container >\n <ng-container >\n <mat-option *ngFor=\"let option of filteredallCompetencyTheme\" [value]=\"option\" [disabled]=\"onDisableTheme(option) || data.openMode ==='view'\" \n (onSelectionChange)=\"OnThemeSelection($event, i, option)\" >{{option.name}}\n <ng-container *ngIf=\"option.refId\">\n <span class=\"ml-2 ref-id\">({{option.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </mat-select>\n </mat-form-field>\n <mat-error *ngIf=\"isTermExist\">{{app_strings.alreadyExist}}</mat-error>\n </div>\n </div>\n \n <div class=\"flex-col mt-2\">\n <label for=\"fname\" class=\"margin-remove-bottom form-label required\"\n i18n=\"First Name label|Label which explains the user to enter first name\"\n i18n-aria-label aria-label=\"First name label\">\n\n {{data.openMode !== 'view'? 'Select Competency Sub-Theme': 'Competency Sub-Theme Name'}}\n \n </label>\n <!-- <mat-form-field appearance=\"outline\" class=\"flex-1\">\n <mat-select placeholder=\"Choose the Competency Theme\" formControlName=\"competencySubTheme\">\n <mat-option *ngFor=\"let option of filteredallCompetencySubTheme\" [value]=\"option\">{{option.name}}</mat-option>\n </mat-select>\n </mat-form-field> -->\n <!-- {{competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value |json}} -->\n <mat-form-field appearance=\"outline\" class=\"w-full field-height\" >\n <mat-select class=\" placeholder-text\" placeholder=\"Choose the Competency Sub-Theme\"\n formControlName=\"competencySubTheme\" multiple [disabled]=\"data.openMode ==='view'\" panelClass=\"full-width-panel\">\n <!-- [ngClass]=\"{'disbaledSelect':isHideData}\" -->\n <mat-select-trigger >\n <mat-chip-listbox>\n <!-- -->\n \n <mat-chip *ngFor=\"let item of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencySubTheme?.value\" \n (removed)=\"onTermRemove(item, i)\" [disabled]=\"data.openMode ==='view'\"\n [ngClass]=\"{'sub-theme-disable': data?.openMode ==='view'}\" [removable]=\"data?.openMode ==='view'? false: true\">\n <span >{{ item.name }}</span>\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <!-- {{competencyForm?.get('compThemeFields') |json}} -->\n <!-- <mat-optgroup>\n <mat-form-field floatLabel=\"never\">\n <input #search autocomplete=\"off\" placeholder=\"Search\" (keydown.space)=\"$event.stopPropagation()\"\n formControlName=\"competencySubTheme\" matInput>\n </mat-form-field>\n </mat-optgroup> -->\n <mat-optgroup *ngIf=\"filteredallCompetencySubTheme.length === 0\">\n <div>No results found!</div>\n </mat-optgroup>\n <!-- <mat-option *ngFor=\"let option of requestObjData.preferredProvider\" [value]=\"option.providerName\">{{option.providerName}}</mat-option> -->\n <ng-container *ngFor=\"let option of competencyForm?.get('compThemeFields')['controls'][i]['controls']?.competencyTheme?.value?.children\">\n <mat-option \n [value]=\"option\" class=\"mat-option-list\">{{option?.name}}\n <ng-container *ngIf=\"option?.refId\">\n <span class=\"ml-2 ref-id\">({{option?.refId}})</span>\n </ng-container>\n </mat-option>\n </ng-container>\n \n </mat-select>\n <!-- <mat-error *ngIf=\"requestForm.controls['providerText'].hasError('required')\">\n Please select up to five preferred providers for the request.\n </mat-error> -->\n </mat-form-field>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </mat-accordion>\n <footer class=\"actions\">\n <button mat-raised-button color=\"default\" type=\"reset\"\n (click)=\"dialogClose('')\">{{app_strings.cancel}}</button>\n <ng-container *ngIf=\"data?.mode === 'create' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"submit\" cdkFocusInitial\n [disabled]=\"competencyForm?.invalid\" *ngIf=\"!disableCreate\">{{app_strings.create}}</button>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'multi-create' && data.openMode !=='view'\">\n <ng-container *ngIf=\"data?.columnInfo?.code !== 'subtheme'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreate(competencyForm, data)\">\n {{app_strings.create}}\n </button>\n </ng-container>\n <ng-container *ngIf=\"data?.columnInfo?.code === 'subtheme'\">\n <!-- <ng-container *ngIf=\"competencyForm?.get('compThemeFields')['controls'][0]['controls']?.competencySubTheme?.value?.length;else updateBtn\"> -->\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.update}}\n </button>\n <!-- </ng-container> -->\n \n <!-- <ng-template #updateBtn>\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n [disabled]=\"competencyForm.invalid || disableMultiCreate\" *ngIf=\"!disableCreate\" (click)=\"multiCreateSubTheme(competencyForm, data)\">\n {{app_strings.delete}}\n </button>\n </ng-template> -->\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.mode === 'edit' && data.openMode !=='view'\">\n <button mat-raised-button color=\"primary\" type=\"button\" cdkFocusInitial\n (click)=\"updateTermData(competencyForm, data)\"\n [disabled]=\"competencyForm?.invalid || disableUpdate\"\n *ngIf=\"!disableCreate\">{{app_strings.update}}</button>\n </ng-container>\n </footer>\n </ng-container>\n </form>\n </ng-container>\n \n </div>\n \n \n <!-- Title of the popup -->\n <ng-template #modalTitle>\n <!-- <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{data.columnInfo.name === 'Theme' ? app_strings.addCompetency : app_strings.createNew}} {{data.columnInfo.name}}</div>\n </ng-container> -->\n <!-- {{data |json}} -->\n <ng-container *ngIf=\"data?.mode === 'create' || data?.mode === 'multi-create'\">\n <div class=\"dialog-title\" mat-dialog-title>{{getCreateName(data)}}</div>\n </ng-container>\n <!-- <ng-container *ngIf=\"data?.mode === 'view'\">\n <div class=\"dialog-title\" mat-dialog-title>View {{data.columnInfo.name}}</div>\n </ng-container> -->\n <ng-container *ngIf=\"data?.mode === 'edit'\">\n <div class=\"dialog-title\" mat-dialog-title>{{app_strings.edit}} {{data.columnInfo.name}}</div>\n </ng-container>\n </ng-template>\n</div>\n\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button (click)=\"deleteTheme()\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>", styles: [".gap-3{gap:1.25rem}.gap-4{gap:1.5rem}.row-divider{width:100%;border-top:1px solid rgba(0,0,0,.08);margin:1rem 0}.defaultForm{padding:16px;display:flex;gap:16px;flex-direction:column}.theme-actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:30px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialog .mat-dialog-title{padding:1em;margin-bottom:0;background:#00000014}.dialog .mat-form-field{padding:0;background:#fff;border-radius:2px}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{padding:15px;margin-top:0;border-top:0}.dialog .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix textarea{resize:none}.dialog .mat-form-field-disabled{background:#00000014}.dialog .actions{display:flex;flex-direction:row;justify-content:space-between;padding:0 1em 1em}.dialog .mat-error{padding:0 25px;margin-top:-10px}.dialogNew{padding:1rem}.dialogNew .mat-dialog-title{padding:1em 0;margin-bottom:0}.dialogNew .actions{display:flex;justify-content:right;padding:1em 0;gap:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.0784313725)}.dialogNew .mat-error{margin-top:-10px}.dialogNew .learning-section{padding:10px!important;border:1px solid rgba(0,0,0,.1803921569);border-radius:4px;margin-right:8px}.dialogNew .learning-section.active-btn{border:1px solid #1B4CA1!important}.learning-section.mat-radio-button .mat-radio-container .mat-radio-outer-circle{border-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-inner-circle{background-color:#1b4ca1!important}::ng-deep .competency-group .learning-section .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#1b4ca1!important}.dialog-title{align-items:center;display:flex}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.mr-5{margin-right:1.5rem}.flex-1{flex:1 1}.margin-remove-bottom{margin-bottom:0}::ng-deep .custom-dialog-container{max-height:90vh}::ng-deep .custom-dialog-container .mat-dialog-container{padding:0;border-radius:0;background:#00000014}@media only screen and (max-width: 1024px){::ng-deep .cdk-overlay-pane{width:40%!important}}@media only screen and (max-width: 992px){::ng-deep .cdk-overlay-pane{width:45%!important}}@media only screen and (max-width: 1024px){.dialog{font-size:12px}.dialog .dialog-title{font-size:24px;height:1em}.dialog button{font-size:12px;line-height:3.5em}.dialog .mat-raised-button{padding:0 3em}}.flex-align{align-items:center;justify-content:flex-start}::ng-deep mat-form-field .mat-form-field-infix .mat-form-field-label,::ng-deep mat-form-field .mat-form-field-infix .mat-select-value{line-height:normal!important}ws-widget-btn-page-back-admin{margin-left:-270px}.max-wid{max-width:400px}::ng-deep .mat-form-field.mat-focused .mat-form-field-label{color:#333232!important}.margin-right-10{margin-right:10px!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::ng-deep .mat-tab-header{margin:0 3rem}.heading{color:#222}.heading.mt-10{margin-top:2.5rem!important}.img-column{flex:100px 0 0}.input-column{flex:auto}.radio-toolbar input[type=radio]{opacity:0;position:fixed;width:0}.radio-toolbar{padding:10px 0}.radio-toolbar label{display:inline-block;padding:7px 21px;font-size:14px;background:#fff 0% 0% no-repeat padding-box;border:1px solid #5F5F5F;border-radius:4px;margin:0 10px 10px 0;color:#5f5f5f;cursor:pointer;transition:all .125s ease-in-out}.radio-toolbar input[type=radio]:checked+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.radio-toolbar input[type=radio]:focus+label{background:#0074b6 0% 0% no-repeat padding-box;border-radius:6px;border-color:#0074b6;color:#fff}.mar{margin-left:30px;min-width:175px}.radio-toolbar label:hover{background:none;border-color:#0074b6;color:#0074b6}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-form-field.full-width{max-width:100%}::ng-deep .mat-form-field.no-pb .mat-form-field-wrapper{padding-bottom:0}.combined-field{width:100%}.w-full-imp{width:100%!important}::ng-deep .full-width-panel{width:100%!important;min-width:300px}::ng-deep .full-width-panel .mat-option{white-space:normal}.btn-success{background-color:#0075b7!important;border-radius:4px;width:240px;box-shadow:none;margin-right:16px}.btn-success.btn-responsive{width:100%}.btn-success:disabled,.btn-success[disabled]{opacity:.6}.btn-danger{height:30px;width:30px}.color-danger{font-size:30px;height:30px;width:30px;color:#e44}::ng-deep .mat-form-field-outline{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline .mat-form-field-outline-start{border:1px solid rgba(112,112,112,.4117647059);border-radius:4px 0 0 4px;min-width:8px;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-gap{border:1px solid currentColor;border-radius:82px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline .mat-form-field-outline-end{border:1px solid rgba(112,112,112,.4117647059);border-left-style:none;border-radius:0 4px 4px 0}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick{min-height:40px;background:#fff;border-radius:4px}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-start{border-radius:4px 0 0 4px;min-width:8px;border:1px solid currentColor;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-gap{border-width:1px;border:1px solid currentColor;border-radius:4px;border-left-style:none;border-right-style:none}::ng-deep .mat-form-field-outline.mat-form-field-outline-thick .mat-form-field-outline-end{border-width:1px;border-radius:0 4px 4px 0;border:1px solid currentColor;border-left-style:none}::ng-deep .mat-form-field-disabled .mat-form-field-outline{background:#ebebeb!important}::ng-deep .mat-form-field-infix{padding:0;margin:0;border:none}::ng-deep .mat-form-field-flex{min-height:40px;align-items:center}::ng-deep .mat-form-field-infix{padding:0;margin:8px 0 0;border:none}.form-label{color:#222;font-size:14px;margin-bottom:.5rem;font-weight:700;font-family:Lato}.form-input{font-size:14px;font-weight:400;font-family:Lato}input.mat-input-element{color:#5f5f5f}::ng-deep .mat-radio-group{padding-bottom:1.34375em}::ng-deep .mat-chip-list-wrapper{margin:0!important}::ng-deep .mat-chip{font-weight:400;background:#f1f9ff 0% 0% no-repeat padding-box!important;border-radius:12px!important;color:#0074b6!important}::ng-deep .mat-chip:hover{filter:brightness(90%)}::ng-deep .mat-chip .mat-chip-remove{opacity:1!important;color:#0074b6!important;border-radius:50%}::ng-deeptextarea .mat-input-element{padding:8px 0}::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}::ng-deep .mat-checkbox .mat-checkbox-frame{border-radius:4px!important}::ng-deep .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:none!important}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{font-size:18px;color:#222}::ng-deep .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active .mat-tab-label-content{color:#0074b6}::ng-deep .mat-tab-label-container .mat-tab-list .mat-ink-bar{height:3px;background-color:#0074b6!important}.form-control{background:#fff 0% 0% no-repeat padding-box;border:1px solid rgba(112,112,112,.4117647059);border-radius:4px;display:block}.form-control::placeholder{color:#bebebe;font-size:14px}.form-control:focus{border:2px solid #0074b6;outline:none}.input-wrapper{flex:1;display:flex;flex-wrap:wrap;flex-direction:column}::ng-deep .mat-checkbox-inner-container{height:23px!important;width:23px!important}.flex-expand{flex:1!important}.heading{font-weight:600;font-family:Montserrat;font-size:1.25rem;display:block;padding:0px 0px 1rem 0}::ng-deep .multiselect-dropdown{margin-bottom:20px}::ng-deep .multiselect-dropdown .dropdown-btn{border:1px solid #ccc!important;width:92%!important}::ng-deep .multiselect-dropdown .dropdown-list .filter-textbox input{width:90%!important}.organisation{color:#212529;font-weight:700;font-size:14px;font-family:Lato}.org-name{height:50px;border:1px solid #e2e2e2;border-radius:5px;background-color:#ebebeb;font-size:14px}.add-designation{height:25px;color:#1b4ca1!important;font-weight:500;font-size:14px;font-family:Lato;cursor:pointer}.add-designation .add-icon{color:#1b4ca1!important;height:24px;width:24px;font-size:24px}.info-icon{width:14px;height:14px;font-size:14px;color:#a7a9ae!important}.themDesignation{max-height:90vh;overflow-y:auto}.designation-panel{margin-bottom:0!important;background-color:#eef1f7!important;border:1px solid #DBE0E9;box-shadow:none!important}.designation-panel .deletDesignation{font-size:18px;width:14px;height:14px;color:#5f6063}.designation-panel .saveDesignaton{color:#fff;height:40px;width:80px;background-color:#1b4ca1;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}.designation-footer{padding:1rem;border-top:1px solid #efefef}.cancel{width:93px;height:40px;font-weight:700;font-size:14px;font-family:Lato;border:1px solid #eee;color:#363636}.addBtn{color:#fff!important;height:40px;width:80px;background-color:#1b4ca1!important;border:1px solid #1B4CA1;font-weight:700;font-size:14px;font-family:Lato}::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){color:#000000de!important}::ng-deep .theme-igot.day-mode .mat-pseudo-checkbox-checked{background:#0074b6!important}::ng-deep .mat-select-panel .mat-option{line-height:1!important}.comp-theme-fields{background:#eef1f7!important;border:1px solid #DBE0E9!important}.create-accordion-btn{color:#1b4ca1!important;padding:0!important}.create-accordion-btn mat-icon{color:#1b4ca1}.ref-id{font-size:10px}::ng-deep .mat-select-panel{min-width:103%!important;margin-left:32px}.loader-bg{background:#ffffffcf;inset:0;transform:translate(-50% -50%);pointer-events:unset;z-index:999999;display:flex;align-items:center;justify-content:center}::ng-deep .mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.8!important;cursor:none;filter:brightness(90%)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$2.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$2.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i10.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i11.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i11.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i11.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i11.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i17.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i17$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i18.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
9840
9840
|
}
|
|
9841
9841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateTermFromFrameworkComponent, decorators: [{
|
|
9842
9842
|
type: Component,
|
|
@@ -9844,23 +9844,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
9844
9844
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
9845
9845
|
type: Inject,
|
|
9846
9846
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
9847
|
-
}] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type:
|
|
9847
|
+
}] }, { type: i1$3.MatLegacyDialog }, { type: FrameworkService }, { type: i3.UntypedFormBuilder }, { type: i3$1.MatLegacySnackBar }]; } });
|
|
9848
9848
|
|
|
9849
9849
|
class OrgHierarchyAddModalComponent {
|
|
9850
|
-
constructor(dialogRef, data,
|
|
9850
|
+
constructor(dialogRef, data, frameworkService, snackbar) {
|
|
9851
9851
|
this.dialogRef = dialogRef;
|
|
9852
9852
|
this.data = data;
|
|
9853
|
-
this.treeHierarchySvc = treeHierarchySvc;
|
|
9854
9853
|
this.frameworkService = frameworkService;
|
|
9855
9854
|
this.snackbar = snackbar;
|
|
9856
9855
|
this.searchControl = new FormControl('');
|
|
9856
|
+
this.parentSearchControl = new FormControl('');
|
|
9857
9857
|
this.selectedOrgsControl = new FormControl([]);
|
|
9858
|
+
this.parentSelectedOrgControl = new FormControl('');
|
|
9858
9859
|
this.orgOptions = [];
|
|
9859
9860
|
this.filteredOptions = [];
|
|
9861
|
+
this.parentFilteredOptions = [];
|
|
9860
9862
|
this.destroy$ = new Subject();
|
|
9861
9863
|
}
|
|
9862
9864
|
ngOnInit() {
|
|
9863
9865
|
this.getSelectedStateOrg();
|
|
9866
|
+
if (this.data && this.data.type === 'update') {
|
|
9867
|
+
this.frameworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
9868
|
+
this.getParentTerms(this.data.previous[this.data.previous.length - 2]);
|
|
9869
|
+
}
|
|
9864
9870
|
this.searchControl.valueChanges
|
|
9865
9871
|
.pipe(takeUntil(this.destroy$))
|
|
9866
9872
|
.subscribe((value) => {
|
|
@@ -9925,6 +9931,10 @@ class OrgHierarchyAddModalComponent {
|
|
|
9925
9931
|
const selectedIds = this.selectedOrgsControl.value || [];
|
|
9926
9932
|
return this.orgOptions.filter((option) => selectedIds.includes(option.identifier));
|
|
9927
9933
|
}
|
|
9934
|
+
getParentSelectedOptions() {
|
|
9935
|
+
const selectedId = this.parentSelectedOrgControl.value;
|
|
9936
|
+
return this.parentFilteredOptions.find((option) => option.code === selectedId);
|
|
9937
|
+
}
|
|
9928
9938
|
removeSelected(id) {
|
|
9929
9939
|
const currentSelection = this.selectedOrgsControl.value || [];
|
|
9930
9940
|
this.selectedOrgsControl.setValue(currentSelection.filter((value) => value !== id));
|
|
@@ -9933,40 +9943,30 @@ class OrgHierarchyAddModalComponent {
|
|
|
9933
9943
|
this.dialogRef.close();
|
|
9934
9944
|
}
|
|
9935
9945
|
onSave() {
|
|
9946
|
+
if (this.data && this.data.type === 'update' && this.selectedOrgsControl?.value?.find((v) => v === this.parentSelectedOrgControl.value)) {
|
|
9947
|
+
this.snackbar.open('You cannot select the parent organization as a child organization');
|
|
9948
|
+
return;
|
|
9949
|
+
}
|
|
9950
|
+
if (this.data && this.data.type === 'update' && this.selectedOrgsControl?.value?.length === 0 && !this.parentSelectedOrgControl.value) {
|
|
9951
|
+
this.snackbar.open('Please select at least one organization or parent organization');
|
|
9952
|
+
return;
|
|
9953
|
+
}
|
|
9954
|
+
if (this.data && this.data.type === 'add' && this.selectedOrgsControl?.value?.length === 0) {
|
|
9955
|
+
this.snackbar.open('Please select at least one organization');
|
|
9956
|
+
return;
|
|
9957
|
+
}
|
|
9936
9958
|
const selectedOrgs = this.getSelectedOptions();
|
|
9937
|
-
this.
|
|
9959
|
+
const parentSelectedOrg = this.getParentSelectedOptions();
|
|
9960
|
+
this.dialogRef.close({
|
|
9961
|
+
selectedOrg: selectedOrgs,
|
|
9962
|
+
paparentSelectedOrg: parentSelectedOrg,
|
|
9963
|
+
currentTerm: this.data?.previous[this.data.previous.length - 1],
|
|
9964
|
+
type: this.data.type,
|
|
9965
|
+
});
|
|
9938
9966
|
}
|
|
9939
9967
|
async getSelectedStateOrg() {
|
|
9940
|
-
const
|
|
9941
|
-
|
|
9942
|
-
filters: {
|
|
9943
|
-
status: 1,
|
|
9944
|
-
ministryOrStateType: (this.data && this.data.selectedOrgData) ?
|
|
9945
|
-
this.data.selectedOrgData.sbOrgType : '',
|
|
9946
|
-
ministryOrStateId: (this.data && this.data.selectedOrgData) ?
|
|
9947
|
-
this.data.selectedOrgData.identifier : ''
|
|
9948
|
-
},
|
|
9949
|
-
sort_by: {
|
|
9950
|
-
createdDate: "desc"
|
|
9951
|
-
},
|
|
9952
|
-
limit: 100,
|
|
9953
|
-
offset: 0,
|
|
9954
|
-
fields: [
|
|
9955
|
-
'identifier',
|
|
9956
|
-
'orgName',
|
|
9957
|
-
'description',
|
|
9958
|
-
'parentOrgName',
|
|
9959
|
-
'ministryOrStateId',
|
|
9960
|
-
'ministryOrStateType',
|
|
9961
|
-
'ministryOrStateName'
|
|
9962
|
-
]
|
|
9963
|
-
}
|
|
9964
|
-
};
|
|
9965
|
-
const orgListData = await this.treeHierarchySvc.orgSerachApi(requestBody).toPromise().catch(err => {
|
|
9966
|
-
console.error('Error fetching organization data:', err);
|
|
9967
|
-
});
|
|
9968
|
-
if (orgListData && orgListData.result &&
|
|
9969
|
-
orgListData.result.response && orgListData.result.response.content) {
|
|
9968
|
+
const orgListData = this.frameworkService.additionalData || [];
|
|
9969
|
+
if (orgListData && orgListData.length > 0) {
|
|
9970
9970
|
const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
9971
9971
|
let orgIdsAdded = [];
|
|
9972
9972
|
if (framworkData && framworkData.categories && framworkData.categories.length > 0) {
|
|
@@ -9982,7 +9982,7 @@ class OrgHierarchyAddModalComponent {
|
|
|
9982
9982
|
}
|
|
9983
9983
|
});
|
|
9984
9984
|
}
|
|
9985
|
-
const filteredOrgList = orgListData.
|
|
9985
|
+
const filteredOrgList = orgListData.filter((org) => !orgIdsAdded.includes(org.identifier));
|
|
9986
9986
|
this.orgOptions = filteredOrgList || [];
|
|
9987
9987
|
this.filteredOptions = [...this.orgOptions];
|
|
9988
9988
|
}
|
|
@@ -10022,16 +10022,19 @@ class OrgHierarchyAddModalComponent {
|
|
|
10022
10022
|
const updatedValues = currentValues.filter(item => item !== itemToRemove);
|
|
10023
10023
|
this.selectedOrgsControl.setValue(updatedValues);
|
|
10024
10024
|
}
|
|
10025
|
-
|
|
10026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <div class=\"header-title\">\n <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n </div>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Content -->\n <div class=\"modal-content\">\n <div class=\"content-container\">\n <div class=\"flex flex-col org-container\">\n <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n <ng-container *ngIf=\"data?.previous?.length > 0\">\n <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data?.currentData\">\n <div class=\"flex flex-col org-container\" \n [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\n <!-- Searchable multi-select -->\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n [panelClass]=\"'mat-select-panel-below'\" \n disableOptionCentering \n [disableOptionCentering]=\"true\"\n (keydown)=\"handleKeydown($event)\"\n multiple>\n <!-- Search container -->\n <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n (keydown)=\"handleSearchKeydown($event)\"\n class=\"search-input\" #searchInput>\n <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">add</mat-icon>\n </button>\n </div>\n <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n {{organization.orgName}}\n </mat-option>\n <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n {{getNameOfOrg(item)}}\n <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n </mat-chip>\n </mat-chip-list>\n </ng-container>\n </div>\n \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n Cancel\n </button>\n <button \n mat-stroked-button \n class=\"btn-common btn-primary\" \n [disabled]=\"!selectedOrgsControl.value?.length\" \n (click)=\"onSave()\" \n type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.sub-label{font-weight:400;font-size:12px;color:#0009}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i8.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i8.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
10025
|
+
getParentTerms(item) {
|
|
10026
|
+
this.parentFilteredOptions = this.frameworkData.categories.find((v) => v.code === item.category).terms;
|
|
10027
|
+
}
|
|
10028
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: FrameworkService }, { token: i3$1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OrgHierarchyAddModalComponent, selector: "sb-cb-tree-org-hierarchy-add-modal", ngImport: i0, template: "<div class=\"org-hierarchy-modal\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <div class=\"header-title\">\n <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n </div>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Content -->\n <div class=\"modal-content\">\n <div class=\"content-container\">\n <div class=\"flex flex-col org-container\">\n <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n <ng-container *ngIf=\"data?.previous?.length > 0\">\n <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n <ng-container *ngIf=\"data?.type === 'update' && i === (data?.previous?.length - 2)\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"sub-label\">Only the imported organisation will be listed.</label>\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"parentSelectedOrgControl\" placeholder=\"Select\" #parentSelect\n [panelClass]=\"'mat-select-panel-below'\" \n disableOptionCentering \n [disableOptionCentering]=\"true\"\n (keydown)=\"handleKeydown($event)\">\n <!-- Search container -->\n <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n <input type=\"text\" [formControl]=\"parentSearchControl\" placeholder=\"Search...\"\n (keydown)=\"handleSearchKeydown($event)\"\n class=\"search-input\" #searchInput>\n </div>\n <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\" [value]=\"organization.code\">\n {{organization.name}}\n </mat-option>\n <mat-option *ngIf=\"parentFilteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"dashed-line\"></div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!(data?.type === 'update' && i === (data?.previous?.length - 2))\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data?.currentData\">\n <div class=\"flex flex-col org-container\" \n [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\n <!-- Searchable multi-select -->\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n [panelClass]=\"'mat-select-panel-below'\" \n disableOptionCentering \n [disableOptionCentering]=\"true\"\n (keydown)=\"handleKeydown($event)\"\n multiple>\n <!-- Search container -->\n <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n (keydown)=\"handleSearchKeydown($event)\"\n class=\"search-input\" #searchInput>\n <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">add</mat-icon>\n </button>\n </div>\n <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n {{organization.orgName}}\n </mat-option>\n <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n {{getNameOfOrg(item)}}\n <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n </mat-chip>\n </mat-chip-list>\n </ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n Cancel\n </button>\n <button \n mat-stroked-button \n class=\"btn-common btn-primary\" \n (click)=\"onSave()\" \n type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .no-checkbox .mat-pseudo-checkbox{display:none!important}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.sub-label{font-weight:400;font-size:12px;color:#0009}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7$2.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$2.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i17$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i18.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i18.MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
10027
10030
|
}
|
|
10028
10031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
|
|
10029
10032
|
type: Component,
|
|
10030
|
-
args: [{ selector: 'sb-cb-tree-org-hierarchy-add-modal', template: "<div class=\"org-hierarchy-modal\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <div class=\"header-title\">\n <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n </div>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Content -->\n <div class=\"modal-content\">\n <div class=\"content-container\">\n <div class=\"flex flex-col org-container\">\n <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n <ng-container *ngIf=\"data?.previous?.length > 0\">\n <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data?.currentData\">\n <div class=\"flex flex-col org-container\" \n [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\n <!-- Searchable multi-select -->\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n [panelClass]=\"'mat-select-panel-below'\" \n disableOptionCentering \n [disableOptionCentering]=\"true\"\n (keydown)=\"handleKeydown($event)\"\n multiple>\n <!-- Search container -->\n <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n (keydown)=\"handleSearchKeydown($event)\"\n class=\"search-input\" #searchInput>\n <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">add</mat-icon>\n </button>\n </div>\n <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n {{organization.orgName}}\n </mat-option>\n <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n {{getNameOfOrg(item)}}\n <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n </mat-chip>\n </mat-chip-list>\n </ng-container>\n </div>\n \n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n Cancel\n </button>\n <button \n mat-stroked-button \n class=\"btn-common btn-primary\" \n [disabled]=\"!selectedOrgsControl.value?.length\" \n (click)=\"onSave()\" \n type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.sub-label{font-weight:400;font-size:12px;color:#0009}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\n"] }]
|
|
10033
|
+
args: [{ selector: 'sb-cb-tree-org-hierarchy-add-modal', template: "<div class=\"org-hierarchy-modal\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <div class=\"header-title\">\n <h2 class=\"m-0\">Update Organisation Hierarchy</h2>\n </div>\n <button mat-icon-button class=\"close-button\" (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Content -->\n <div class=\"modal-content\">\n <div class=\"content-container\">\n <div class=\"flex flex-col org-container\">\n <label class=\"orgTypeName\">{{data?.selectedOrgData?.sbOrgType}}</label>\n <label class=\"orgTypeSelected\">{{data?.selectedOrgData?.orgName?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </div>\n <ng-container *ngIf=\"data?.previous?.length > 0\">\n <div class=\"flex flex-col org-container\" *ngFor=\"let item of data?.previous;let i = index\"\n [ngStyle]=\"{'margin-left': 30 * (i+1) + 'px'}\">\n <ng-container *ngIf=\"data?.type === 'update' && i === (data?.previous?.length - 2)\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"sub-label\">Only the imported organisation will be listed.</label>\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"parentSelectedOrgControl\" placeholder=\"Select\" #parentSelect\n [panelClass]=\"'mat-select-panel-below'\" \n disableOptionCentering \n [disableOptionCentering]=\"true\"\n (keydown)=\"handleKeydown($event)\">\n <!-- Search container -->\n <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n <input type=\"text\" [formControl]=\"parentSearchControl\" placeholder=\"Search...\"\n (keydown)=\"handleSearchKeydown($event)\"\n class=\"search-input\" #searchInput>\n </div>\n <mat-option class=\"no-checkbox\" *ngFor=\"let organization of parentFilteredOptions\" [value]=\"organization.code\">\n {{organization.name}}\n </mat-option>\n <mat-option *ngIf=\"parentFilteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"dashed-line\"></div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!(data?.type === 'update' && i === (data?.previous?.length - 2))\">\n <label class=\"orgTypeName\">{{item?.category?.toLowerCase()}}</label>\n <label class=\"orgTypeSelected\">{{item?.name?.toLowerCase()}}</label>\n <div class=\"dashed-line\"></div>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"data?.currentData\">\n <div class=\"flex flex-col org-container\" \n [ngStyle]=\"{'margin-left': 30 * (data?.previous?.length + 1) + 'px'}\">\n <label class=\"orgTypeName\">{{data?.currentData?.code?.toLowerCase()}}</label>\n <label class=\"sub-label\">Organisations which are already in the hierarchy will not listed to add or in searchable dropdown</label>\n <!-- Searchable multi-select -->\n <div class=\"select-search-container\">\n <mat-form-field appearance=\"outline\" class=\"w-full custom-height-select\">\n <mat-select [formControl]=\"selectedOrgsControl\" placeholder=\"Select\" #singleSelect\n [panelClass]=\"'mat-select-panel-below'\" \n disableOptionCentering \n [disableOptionCentering]=\"true\"\n (keydown)=\"handleKeydown($event)\"\n multiple>\n <!-- Search container -->\n <div class=\"search-container flex gap-5 flex-middle\" (click)=\"$event.stopPropagation()\">\n <input type=\"text\" [formControl]=\"searchControl\" placeholder=\"Search...\"\n (keydown)=\"handleSearchKeydown($event)\"\n class=\"search-input\" #searchInput>\n <button mat-button class=\"add-btn\" (click)=\"checkAndClose(singleSelect); $event.stopPropagation()\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">add</mat-icon>\n </button>\n </div>\n <mat-option *ngFor=\"let organization of filteredOptions\" [value]=\"organization.identifier\">\n {{organization.orgName}}\n </mat-option>\n <mat-option *ngIf=\"filteredOptions.length === 0\" disabled>\n No data found\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container *ngIf=\"selectedOrgsControl?.value?.length > 0\">\n <mat-chip-list class=\"org-clip\" aria-label=\"orgSelection\">\n <mat-chip class=\"clip-option flex flex-middle\" *ngFor=\"let item of selectedOrgsControl.value\" [removable]=\"true\" (removed)=\"removeOrg(item)\">\n {{getNameOfOrg(item)}}\n <mat-icon matChipRemove class=\"margin-remove\">close</mat-icon>\n </mat-chip>\n </mat-chip-list>\n </ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-stroked-button class=\"btn-common btn-secondary\" (click)=\"onClose()\" type=\"button\">\n Cancel\n </button>\n <button \n mat-stroked-button \n class=\"btn-common btn-primary\" \n (click)=\"onSave()\" \n type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [":host{display:block;height:100%}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .no-checkbox .mat-pseudo-checkbox{display:none!important}.custom-height-select{width:100%;margin-top:5px}.custom-height-select ::ng-deep .mat-mdc-select{height:35px;line-height:35px}.custom-height-select ::ng-deep .mat-form-field-flex{height:35px!important;min-height:35px!important}.custom-height-select ::ng-deep .mat-form-field-infix{min-height:35px!important;height:35px!important;display:flex;align-items:center;border:0;position:relative;padding:4px 8px 0}.custom-height-select ::ng-deep .mat-form-field-wrapper{height:35px;padding:0;margin:0}.custom-height-select ::ng-deep .mdc-notched-outline{border-radius:20px!important}.custom-height-select ::ng-deep .mdc-notched-outline__leading{display:none}.custom-height-select ::ng-deep .mdc-notched-outline__notch{border-color:#00000029!important}.custom-height-select ::ng-deep .mdc-notched-outline__trailing{border-color:#00000029!important;border-radius:20px!important;border-left:1px solid rgba(0,0,0,.1607843137)!important;border-right:1px solid rgba(0,0,0,.1607843137)!important}.custom-height-select ::ng-deep .mat-select-arrow-wrapper{padding-top:15px;transform:translateY(-4px)}.custom-height-select ::ng-deep .mat-select-value{line-height:35px}::ng-deep .right-side-modal.cdk-global-overlay-wrapper{justify-content:flex-end}::ng-deep .right-side-modal .mat-dialog-container{border-radius:0!important;padding:0!important;overflow-x:hidden;display:flex!important;flex-direction:column!important;height:100vh!important}::ng-deep .right-side-modal .cdk-overlay-pane{margin-right:0!important;max-width:90vw!important}::ng-deep .mat-pseudo-checkbox-checked{background-color:#1b4ca1!important;border-color:#1b4ca1!important}.org-hierarchy-modal{display:flex;flex-direction:column;height:100%}.org-hierarchy-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.08);flex-shrink:0}.org-hierarchy-modal .modal-header .header-title h2{font-size:16px;font-weight:600;color:#000000de}.org-hierarchy-modal .modal-header .close-button{color:#666}.org-hierarchy-modal .modal-content{flex:1;overflow-y:auto;padding:12px 24px;min-height:0}.org-hierarchy-modal .modal-content .content-container{max-width:800px;margin:0 auto}.org-hierarchy-modal .modal-content .form-field{margin-bottom:16px}.org-hierarchy-modal .modal-content .form-field .w-full{width:100%}.org-hierarchy-modal .modal-footer{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid rgba(0,0,0,.08);gap:16px;flex-shrink:0}.org-hierarchy-modal .modal-footer .cancel-btn,.org-hierarchy-modal .modal-footer .save-btn{min-width:100px}.searchable-select-container{margin-top:16px;margin-bottom:24px}.selected-items-container{margin-top:8px;margin-bottom:16px}.selected-items-container .selected-chips{display:flex;flex-wrap:wrap;gap:8px}::ng-deep .searchable-select-panel .mat-select-panel{max-height:350px}::ng-deep .searchable-select-panel .search-box{position:relative;padding:8px}::ng-deep .searchable-select-panel .search-box input{width:100%;height:36px;border:1px solid #ddd;border-radius:4px;padding:8px 36px 8px 12px;outline:none;font-size:14px}::ng-deep .searchable-select-panel .search-box input:focus{border-color:#1b4ca1}::ng-deep .searchable-select-panel .search-box .clear-search{position:absolute;right:8px;top:8px;width:24px;height:24px;line-height:24px}::ng-deep .searchable-select-panel .search-box .clear-search .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}::ng-deep .mat-chip{font-size:12px;min-height:26px}::ng-deep .mat-chip .mat-icon{font-size:16px;width:16px;height:16px}::ng-deep .mat-mdc-chip{font-size:12px;min-height:26px}::ng-deep .mat-mdc-chip .mat-icon{font-size:16px;width:16px!important;height:16px!important}::ng-deep .mat-mdc-chip-option[disabled]{opacity:1}::ng-deep .mat-mdc-chip-option[disabled] .mdc-evolution-chip__text-label{opacity:1}.m-0{margin:0}.w-full{width:100%}.orgTypeName{font-weight:700;font-size:14px;text-transform:capitalize}.sub-label{font-weight:400;font-size:12px;color:#0009}.orgTypeSelected{padding:5px 15px;border:1px solid rgba(0,0,0,.1607843137);background:#e8e9eb;border-radius:20px;margin-top:5px;font-size:14px;font-weight:400;text-transform:capitalize}.search-container{position:relative;width:100%;padding:8px;box-sizing:border-box}.search-container:before{content:\"\";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" fill=\"%23757575\"/></svg>');background-repeat:no-repeat;background-size:contain;z-index:1}.search-container .search-input{width:calc(100% - 8px);height:28px;border:1px solid rgba(0,0,0,.1607843137);border-radius:20px;padding:4px 12px 4px 36px;outline:none;font-size:14px;box-sizing:border-box}.search-container .search-input:focus{border-color:#1b4ca1}.dashed-line{height:25px;border-left:2px dashed #1B4CA1;margin-left:10px}.org-container{position:relative}.org-container:not(:first-child){margin-top:0}.org-container:not(:first-child):before{content:\"\";position:absolute;left:-20px;top:4px;height:8px;border-left:2px dashed #1B4CA1;z-index:0;border-bottom:2px dashed #1B4CA1;width:10px}.org-container:not(:first-child):after{content:\"\";position:absolute;left:-15px;top:8px;width:8px;height:8px;border-right:2px solid #1B4CA1;border-bottom:2px solid #1B4CA1;transform:rotate(-45deg);z-index:1;background-color:transparent}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.clip-option{margin:2px!important;border:1px solid #D6D6D6;border-radius:4px;font-size:14px;background:#fff!important;color:#000!important;padding:0!important}.select-search-container{position:relative}.org-clip{position:absolute;top:50px;left:0}\n"] }]
|
|
10031
10034
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
10032
10035
|
type: Inject,
|
|
10033
10036
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
10034
|
-
}] }, { type:
|
|
10037
|
+
}] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
|
|
10035
10038
|
|
|
10036
10039
|
class CategoryEditModuleComponent {
|
|
10037
10040
|
constructor(fb, dialogRef, data) {
|
|
@@ -10067,7 +10070,7 @@ class CategoryEditModuleComponent {
|
|
|
10067
10070
|
}
|
|
10068
10071
|
}
|
|
10069
10072
|
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 }); }
|
|
10070
|
-
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:
|
|
10073
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CategoryEditModuleComponent, selector: "sb-cb-tree-category-edit-module", ngImport: i0, template: "<div class=\"modal-wrapper\">\n <!-- Modal Header -->\n <div class=\"modal-header\">\n <h2 class=\"modal-title\">Edit Category</h2>\n <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Modal Container -->\n <div class=\"modal-container\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"form-group\">\n <div class=\"static-label required\">Name</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <input matInput formControlName=\"categoryName\" >\n <mat-error *ngIf=\"categoryForm.get('categoryName')?.hasError('required')\">\n Name is required\n </mat-error>\n </mat-form-field>\n </div>\n <div class=\"form-group\">\n <div class=\"static-label\">Description</div>\n <mat-form-field appearance=\"outline\" class=\"w-full custom-field\">\n <textarea matInput formControlName=\"categoryDescription\"></textarea>\n <mat-error *ngIf=\"categoryForm.get('categoryDescription')?.hasError('required')\">\n Description is required\n </mat-error>\n </mat-form-field>\n </div>\n </form>\n </div>\n\n <!-- Modal Footer -->\n <div class=\"modal-footer\">\n <button mat-button class=\"btn-common btn-secondary\" (click)=\"closeDialog()\" type=\"button\">Cancel</button>\n <button mat-button class=\"btn-common btn-primary\" [disabled]=\"!categoryForm.valid\" (click)=\"saveCategoryName()\" type=\"button\">\n Save\n </button>\n </div>\n</div>", styles: [".modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.12)}.modal-title{margin:0;font-size:20px;font-weight:500}.modal-container{padding:12px 24px}.full-width{width:100%}.modal-footer{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid rgba(0,0,0,.12);gap:8px}.cancel-btn{margin-right:8px}.form-group{margin-bottom:16px}.form-group .static-label{font-size:14px;font-weight:500;margin-bottom:8px;color:#0009}.form-group .custom-field ::ng-deep .mdc-floating-label{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline{border-radius:8px}.form-group .custom-field ::ng-deep .mdc-notched-outline__leading{display:none}.form-group .custom-field ::ng-deep .mdc-notched-outline__trailing{border-radius:30px;border:1px solid rgba(0,0,0,.12)!important}.form-group .custom-field ::ng-deep .mat-mdc-form-field-infix{padding:.75em 0;min-height:40px}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error-wrapper{padding:0}.form-group .custom-field ::ng-deep .mat-mdc-form-field-error{font-size:12px;color:red}.form-group .custom-field ::ng-deep .mdc-notched-outline__notch{border-top:none}.required:after{color:red;content:\" *\"}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
10071
10074
|
}
|
|
10072
10075
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
|
|
10073
10076
|
type: Component,
|
|
@@ -10664,11 +10667,11 @@ class TermCardComponent {
|
|
|
10664
10667
|
this.dialog.closeAll();
|
|
10665
10668
|
}
|
|
10666
10669
|
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 }); }
|
|
10667
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermCardComponent, selector: "lib-term-card", inputs: { data: "data" }, outputs: { isSelected: "isSelected", selectedCard: "selectedCard", cardAction: "cardAction" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n id=\"{{data.children.name}}\"\n [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n <!-- (click)=\"data.selected=!data.selected\" --> \n <div class=\"term-card-parent\">\n <!-- <Below element is to show id on top left of the card> -->\n <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n \n <div class=\"term-card-content w-full\">\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"ribbon\">{{data?.children?.refId}}</div>\n </ng-container> -->\n\n <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n <div class=\"mb-2\">\n <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n </div>\n </ng-container>\n <div class=\"flex flex-between\">\n <div class=\"card-title\">{{data.children.name}}\n <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard mt-2\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> \n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn\" (click)=\"openDialog()\">\n <mat-icon>info</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard px-4\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> -->\n <!-- <span>++{{data.children.selected}}+++</span>\n <span>=={{data.children.status}}==</span> -->\n <div class=\"flex flex-between\">\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n </div>\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{getuserCount(data)}} Users</span>\n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n <!-- (click)=\"$event.stopPropagation();\" -->\n <!-- <div class=\"term-card-checkbox\">\n <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n <mat-icon color=\"primary\" class=\"approve-flag\"\n *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #cardStandard>\n <div>\n {{data.children.name}} \n </div>\n <div>\n {{data.children.description}} s\n </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n <div>\n {{data.children.name}}\n </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <!-- <div > -->\n <button *ngIf=\"data.columnInfo.config.enableView\" (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>View</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data, data.children,data.index, cardRef)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon>\n <span>Edit</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Add</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy\" (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>close</mat-icon>\n <span>Remove Connection</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>settings</mat-icon>\n <span>Manage Organisation</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n <div class=\"flex flex-col flex-middle\">\n <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n <p class=\"color-primary modal-text margin-top-s\">Select a organisation to add or see further connections.</p>\n <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
|
|
10670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermCardComponent, selector: "lib-term-card", inputs: { data: "data" }, outputs: { isSelected: "isSelected", selectedCard: "selectedCard", cardAction: "cardAction" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n id=\"{{data.children.name}}\"\n [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n <!-- (click)=\"data.selected=!data.selected\" --> \n <div class=\"term-card-parent\">\n <!-- <Below element is to show id on top left of the card> -->\n <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n \n <div class=\"term-card-content w-full\">\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"ribbon\">{{data?.children?.refId}}</div>\n </ng-container> -->\n\n <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n <div class=\"mb-2\">\n <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n </div>\n </ng-container>\n <div class=\"flex flex-between\">\n <div class=\"card-title\">{{data.children.name}}\n <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard mt-2\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> \n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn\" (click)=\"openDialog()\">\n <mat-icon>info</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard px-4\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> -->\n <!-- <span>++{{data.children.selected}}+++</span>\n <span>=={{data.children.status}}==</span> -->\n <div class=\"flex flex-between\">\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n </div>\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{getuserCount(data)}} Users</span>\n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n <!-- (click)=\"$event.stopPropagation();\" -->\n <!-- <div class=\"term-card-checkbox\">\n <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n <mat-icon color=\"primary\" class=\"approve-flag\"\n *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #cardStandard>\n <div>\n {{data.children.name}} \n </div>\n <div>\n {{data.children.description}} s\n </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n <div>\n {{data.children.name}}\n </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <!-- <div > -->\n <button *ngIf=\"data.columnInfo.config.enableView\" (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>View</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data, data.children,data.index, cardRef)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon>\n <span>Edit</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Add</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\" (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>close</mat-icon>\n <span>Remove Connection</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>settings</mat-icon>\n <span>Manage Organisation</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n <div class=\"flex flex-col flex-middle\">\n <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n <p class=\"color-primary modal-text margin-top-s\">Select a organisation to add or see further connections.</p>\n <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
|
|
10668
10671
|
}
|
|
10669
10672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
|
|
10670
10673
|
type: Component,
|
|
10671
|
-
args: [{ selector: 'lib-term-card', template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n id=\"{{data.children.name}}\"\n [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n <!-- (click)=\"data.selected=!data.selected\" --> \n <div class=\"term-card-parent\">\n <!-- <Below element is to show id on top left of the card> -->\n <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n \n <div class=\"term-card-content w-full\">\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"ribbon\">{{data?.children?.refId}}</div>\n </ng-container> -->\n\n <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n <div class=\"mb-2\">\n <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n </div>\n </ng-container>\n <div class=\"flex flex-between\">\n <div class=\"card-title\">{{data.children.name}}\n <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard mt-2\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> \n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn\" (click)=\"openDialog()\">\n <mat-icon>info</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard px-4\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> -->\n <!-- <span>++{{data.children.selected}}+++</span>\n <span>=={{data.children.status}}==</span> -->\n <div class=\"flex flex-between\">\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n </div>\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{getuserCount(data)}} Users</span>\n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n <!-- (click)=\"$event.stopPropagation();\" -->\n <!-- <div class=\"term-card-checkbox\">\n <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n <mat-icon color=\"primary\" class=\"approve-flag\"\n *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #cardStandard>\n <div>\n {{data.children.name}} \n </div>\n <div>\n {{data.children.description}} s\n </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n <div>\n {{data.children.name}}\n </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <!-- <div > -->\n <button *ngIf=\"data.columnInfo.config.enableView\" (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>View</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data, data.children,data.index, cardRef)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon>\n <span>Edit</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Add</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy\" (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>close</mat-icon>\n <span>Remove Connection</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>settings</mat-icon>\n <span>Manage Organisation</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n <div class=\"flex flex-col flex-middle\">\n <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n <p class=\"color-primary modal-text margin-top-s\">Select a organisation to add or see further connections.</p>\n <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}\n"] }]
|
|
10674
|
+
args: [{ selector: 'lib-term-card', template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n id=\"{{data.children.name}}\"\n [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n <!-- (click)=\"data.selected=!data.selected\" --> \n <div class=\"term-card-parent\">\n <!-- <Below element is to show id on top left of the card> -->\n <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n \n <div class=\"term-card-content w-full\">\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"ribbon\">{{data?.children?.refId}}</div>\n </ng-container> -->\n\n <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n <div class=\"mb-2\">\n <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n </div>\n </ng-container>\n <div class=\"flex flex-between\">\n <div class=\"card-title\">{{data.children.name}}\n <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard mt-2\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> \n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn\" (click)=\"openDialog()\">\n <mat-icon>info</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard px-4\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> -->\n <!-- <span>++{{data.children.selected}}+++</span>\n <span>=={{data.children.status}}==</span> -->\n <div class=\"flex flex-between\">\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n </div>\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{getuserCount(data)}} Users</span>\n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n <!-- (click)=\"$event.stopPropagation();\" -->\n <!-- <div class=\"term-card-checkbox\">\n <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n <mat-icon color=\"primary\" class=\"approve-flag\"\n *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #cardStandard>\n <div>\n {{data.children.name}} \n </div>\n <div>\n {{data.children.description}} s\n </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n <div>\n {{data.children.name}}\n </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <!-- <div > -->\n <button *ngIf=\"data.columnInfo.config.enableView\" (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>View</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data, data.children,data.index, cardRef)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon>\n <span>Edit</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Add</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\" (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>close</mat-icon>\n <span>Remove Connection</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>settings</mat-icon>\n <span>Manage Organisation</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n <div class=\"flex flex-col flex-middle\">\n <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n <p class=\"color-primary modal-text margin-top-s\">Select a organisation to add or see further connections.</p>\n <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{margin-bottom:.5em;font-family:Lato;font-size:14px;font-weight:400}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}\n"] }]
|
|
10672
10675
|
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { dialogTemplate: [{
|
|
10673
10676
|
type: ViewChild,
|
|
10674
10677
|
args: ['dialogTemplate']
|
|
@@ -11260,13 +11263,14 @@ class TreeViewComponent {
|
|
|
11260
11263
|
}
|
|
11261
11264
|
}
|
|
11262
11265
|
}
|
|
11263
|
-
openOrganizationDialog(column, _index) {
|
|
11266
|
+
openOrganizationDialog(column, _index, typeSelected) {
|
|
11264
11267
|
const treeListData = this.frameworkService.getPreviousSelectedTerms(column.code);
|
|
11265
11268
|
const dialog = this.dialog.open(OrgHierarchyAddModalComponent, {
|
|
11266
11269
|
data: {
|
|
11267
11270
|
previous: treeListData,
|
|
11268
11271
|
currentData: column,
|
|
11269
11272
|
selectedOrgData: this.orgSelectedData,
|
|
11273
|
+
type: typeSelected
|
|
11270
11274
|
},
|
|
11271
11275
|
autoFocus: true,
|
|
11272
11276
|
restoreFocus: true,
|
|
@@ -11276,10 +11280,25 @@ class TreeViewComponent {
|
|
|
11276
11280
|
panelClass: 'right-side-modal',
|
|
11277
11281
|
maxWidth: '100vw'
|
|
11278
11282
|
});
|
|
11279
|
-
dialog.afterClosed().subscribe((_res) => {
|
|
11280
|
-
if (_res && _res.
|
|
11283
|
+
dialog.afterClosed().subscribe(async (_res) => {
|
|
11284
|
+
if (_res && _res.type === 'add') {
|
|
11281
11285
|
this.treeHierarchySvc.setLoaderState(true);
|
|
11282
|
-
this.createTerms(_res, column);
|
|
11286
|
+
this.createTerms(_res.selectedOrg, column);
|
|
11287
|
+
}
|
|
11288
|
+
else if (_res && _res.type === 'update') {
|
|
11289
|
+
if (_res.paparentSelectedOrg) {
|
|
11290
|
+
await this.updateParentAssociation(_res.paparentSelectedOrg, _res.currentTerm);
|
|
11291
|
+
}
|
|
11292
|
+
if (_res.selectedOrg && _res.selectedOrg.length > 0) {
|
|
11293
|
+
this.treeHierarchySvc.setLoaderState(true);
|
|
11294
|
+
this.createTerms(_res.selectedOrg, column);
|
|
11295
|
+
}
|
|
11296
|
+
else {
|
|
11297
|
+
this.publishFramework({
|
|
11298
|
+
id: this.orgSelectedData.orgHierarchyFrameworkId || '',
|
|
11299
|
+
category: ''
|
|
11300
|
+
});
|
|
11301
|
+
}
|
|
11283
11302
|
}
|
|
11284
11303
|
});
|
|
11285
11304
|
}
|
|
@@ -11473,6 +11492,7 @@ class TreeViewComponent {
|
|
|
11473
11492
|
async updateAssociation(nodeId, frameworkData, column) {
|
|
11474
11493
|
const prev = this.frameworkService.getPreviousCategory(column.code);
|
|
11475
11494
|
let prevTrem = this.frameworkService.getPreviousSelectedTerms(column.code);
|
|
11495
|
+
const tempFrameData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
11476
11496
|
const requestBody = {
|
|
11477
11497
|
request: {
|
|
11478
11498
|
term: {
|
|
@@ -11481,7 +11501,8 @@ class TreeViewComponent {
|
|
|
11481
11501
|
}
|
|
11482
11502
|
};
|
|
11483
11503
|
if (prev && prevTrem) {
|
|
11484
|
-
prevTrem = prevTrem.
|
|
11504
|
+
prevTrem = prevTrem.find((ele) => ele.category === prev.code);
|
|
11505
|
+
prevTrem = tempFrameData.categories.find((ele) => ele.code === prev.code).terms.find((ele) => ele.code === prevTrem.code);
|
|
11485
11506
|
if (prevTrem && prevTrem.associations && prevTrem.associations.length > 0) {
|
|
11486
11507
|
prevTrem.associations.forEach((ele) => {
|
|
11487
11508
|
requestBody.request.term.associations.push({
|
|
@@ -11513,7 +11534,7 @@ class TreeViewComponent {
|
|
|
11513
11534
|
this._snackBar.open(`Organization Hierarchy updated. Will reflect in sometime`, 'cancel');
|
|
11514
11535
|
this.treeHierarchySvc.setLoaderState(false);
|
|
11515
11536
|
this.init();
|
|
11516
|
-
},
|
|
11537
|
+
}, 5000);
|
|
11517
11538
|
}
|
|
11518
11539
|
else {
|
|
11519
11540
|
this._snackBar.open('Error in publishing framework', 'cancel');
|
|
@@ -11622,7 +11643,7 @@ class TreeViewComponent {
|
|
|
11622
11643
|
this.removeConnection(event.data);
|
|
11623
11644
|
break;
|
|
11624
11645
|
case 'update-hierarchy':
|
|
11625
|
-
this.openOrganizationDialog(this.list[this.list.findIndex((item) => item.code === event.data.category) + 1], '');
|
|
11646
|
+
this.openOrganizationDialog(this.list[this.list.findIndex((item) => item.code === event.data.category) + 1], '', 'update');
|
|
11626
11647
|
break;
|
|
11627
11648
|
case 'manage-org':
|
|
11628
11649
|
this.manageOrg.emit(event.data.children);
|
|
@@ -11725,13 +11746,62 @@ class TreeViewComponent {
|
|
|
11725
11746
|
await this.publishFramework(frameworkObj);
|
|
11726
11747
|
}
|
|
11727
11748
|
}
|
|
11728
|
-
|
|
11729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable", manageOrg: "manageOrg" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 flex-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full flex padding-remove\" id=\"box{{i}}Header\">\n <span class=\"flex gap-1 mat-body-1\">\n <ng-container *ngIf=\"column?.config?.iconEnabled\">\n <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n </ng-container>\n <!-- {{column.name}} -->\n {{column?.config?.categoryDisplayName || column.name }}\n <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n <ng-container *ngIf=\"column.index !== 1\">\n <span class=\"count\">({{getCount(column.code)}})</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.levelNameEdit\">\n <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n <mat-icon>edit</mat-icon>\n </button>\n </ng-container>\n </span>\n <ng-template #firstColumn>\n <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n </ng-template>\n <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n </div>\n </div>\n <!-- <div>\n Put search button here in future\n </div> -->\n </div>\n </div>\n <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n </lib-tree-column-view>\n </ng-container>\n <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n <div class=\"svg-border-wrapper\">\n <svg width=\"100%\" height=\"100%\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n </svg>\n <div class=\"content flex flex-col w-full\">\n <div class=\"icon-container\">\n <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n </div>\n <label>Select an organization to add or see further connections</label>\n <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.edit-btn{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;position:relative}.edit-btn mat-icon{font-size:16px;position:absolute;top:50%;height:16px;left:50%;width:16px;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
|
|
11749
|
+
async updateParentAssociation(selectedParent, currentTerm) {
|
|
11750
|
+
const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
11751
|
+
const parentCategoryData = framworkData.categories.find((cat) => cat.code === selectedParent.category);
|
|
11752
|
+
if (parentCategoryData && parentCategoryData.terms && parentCategoryData.terms.length > 0) {
|
|
11753
|
+
const currentParentTerm = parentCategoryData.terms.find((term) => {
|
|
11754
|
+
if (term.associations && term.associations.length > 0) {
|
|
11755
|
+
return term.associations.some((assoc) => assoc.code === currentTerm.code);
|
|
11756
|
+
}
|
|
11757
|
+
});
|
|
11758
|
+
if (currentParentTerm) {
|
|
11759
|
+
const updateOldParentAssociation = {
|
|
11760
|
+
request: {
|
|
11761
|
+
term: {
|
|
11762
|
+
associations: []
|
|
11763
|
+
}
|
|
11764
|
+
}
|
|
11765
|
+
};
|
|
11766
|
+
currentParentTerm.associations.forEach((assoc) => {
|
|
11767
|
+
if (assoc.code !== currentTerm.code) {
|
|
11768
|
+
updateOldParentAssociation.request.term.associations.push({ identifier: assoc.identifier });
|
|
11769
|
+
}
|
|
11770
|
+
});
|
|
11771
|
+
await this.updateHierarchyAssocication(updateOldParentAssociation, framworkData.identifier, currentParentTerm);
|
|
11772
|
+
}
|
|
11773
|
+
selectedParent = parentCategoryData.terms.find((term) => term.code === selectedParent.code);
|
|
11774
|
+
const updateNewParentAssociation = {
|
|
11775
|
+
request: {
|
|
11776
|
+
term: {
|
|
11777
|
+
associations: []
|
|
11778
|
+
}
|
|
11779
|
+
}
|
|
11780
|
+
};
|
|
11781
|
+
if (selectedParent && selectedParent.associations && selectedParent.associations.length > 0) {
|
|
11782
|
+
selectedParent.associations.forEach((assoc) => {
|
|
11783
|
+
updateNewParentAssociation.request.term.associations.push({ identifier: assoc.identifier });
|
|
11784
|
+
});
|
|
11785
|
+
}
|
|
11786
|
+
updateNewParentAssociation.request.term.associations.push({ identifier: currentTerm.identifier });
|
|
11787
|
+
await this.updateHierarchyAssocication(updateNewParentAssociation, framworkData.identifier, selectedParent);
|
|
11788
|
+
}
|
|
11789
|
+
}
|
|
11790
|
+
async updateHierarchyAssocication(requestBody, frameworkId, termData) {
|
|
11791
|
+
this.treeHierarchySvc.setLoaderState(true);
|
|
11792
|
+
await this.treeHierarchySvc.updateFrameworkAssociation(requestBody, { id: frameworkId, category: termData.category }, termData.code).toPromise().catch((err) => {
|
|
11793
|
+
console.error('Error in updating association', err);
|
|
11794
|
+
this.treeHierarchySvc.setLoaderState(false);
|
|
11795
|
+
this._snackBar.open(`Error in updating association`, 'cancel');
|
|
11796
|
+
});
|
|
11797
|
+
}
|
|
11798
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, deps: [{ token: FrameworkService }, { token: LocalConnectionService }, { token: i1$3.MatLegacyDialog }, { token: ApprovalService }, { token: i3$1.MatLegacySnackBar }, { token: ConnectorService }, { token: i0.ChangeDetectorRef }, { token: TreeHierarchyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11799
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeViewComponent, selector: "lib-tree-view", inputs: { approvalList: "approvalList", isApprovalView: "isApprovalView", workFlowStatus: "workFlowStatus", environment: "environment", taxonomyConfig: "taxonomyConfig", orgSelectedData: "orgSelectedData" }, outputs: { sentForApprove: "sentForApprove", loaderEnable: "loaderEnable", manageOrg: "manageOrg" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 flex-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full flex padding-remove\" id=\"box{{i}}Header\">\n <span class=\"flex gap-1 mat-body-1\">\n <ng-container *ngIf=\"column?.config?.iconEnabled\">\n <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n </ng-container>\n <!-- {{column.name}} -->\n {{column?.config?.categoryDisplayName || column.name }}\n <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n <ng-container *ngIf=\"column.index !== 1\">\n <span class=\"count\">({{getCount(column.code)}})</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.levelNameEdit\">\n <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n <mat-icon>edit</mat-icon>\n </button>\n </ng-container>\n </span>\n <ng-template #firstColumn>\n <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n </ng-template>\n <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i, 'add')\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n </div>\n </div>\n <!-- <div>\n Put search button here in future\n </div> -->\n </div>\n </div>\n <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n [containerId]=\"'box'+(i+1)\" (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, 'add')\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.edit-btn{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;position:relative}.edit-btn mat-icon{font-size:16px;position:absolute;top:50%;height:16px;left:50%;width:16px;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: ["column", "containerId"], outputs: ["updateTaxonomyTerm", "updateTermList", "cardsCount", "cardAction"] }, { kind: "component", type: ActionBarComponent, selector: "lib-action-bar", inputs: ["actionType", "configType"], outputs: ["sendApproval", "closeAction"] }] }); }
|
|
11730
11800
|
}
|
|
11731
11801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
11732
11802
|
type: Component,
|
|
11733
|
-
args: [{ selector: 'lib-tree-view', template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 flex-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full flex padding-remove\" id=\"box{{i}}Header\">\n <span class=\"flex gap-1 mat-body-1\">\n <ng-container *ngIf=\"column?.config?.iconEnabled\">\n <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n </ng-container>\n <!-- {{column.name}} -->\n {{column?.config?.categoryDisplayName || column.name }}\n <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n <ng-container *ngIf=\"column.index !== 1\">\n <span class=\"count\">({{getCount(column.code)}})</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.levelNameEdit\">\n <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n <mat-icon>edit</mat-icon>\n </button>\n </ng-container>\n </span>\n <ng-template #firstColumn>\n <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n </ng-template>\n <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n </div>\n </div>\n <!-- <div>\n Put search button here in future\n </div> -->\n </div>\n </div>\n <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n [containerId]=\"'box'+(i+1)\" (updateTaxonomyTerm)=\"updateTaxonomyTerm($event)\"\n (updateTermList)=\"updateDraftStatusTerms($event)\" (cardsCount)=\"getNoOfCards($event)\" \n (retireTermData)=\"removeConnection($event)\" (cardAction)=\"cardActionEmit($event)\">\n </lib-tree-column-view>\n </ng-container>\n <ng-container *ngIf=\"shouldShowSvgBorderWrapper(column, i)\">\n <div class=\"svg-border-wrapper\">\n <svg width=\"100%\" height=\"100%\">\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"#1B213352\" stroke-width=\"2\" \n stroke-dasharray=\"20, 10\" rx=\"10\" ry=\"10\"/>\n </svg>\n <div class=\"content flex flex-col w-full\">\n <div class=\"icon-container\">\n <mat-icon svgIcon=\"frac-no-connection\"></mat-icon>\n </div>\n <label>Select an organization to add or see further connections</label>\n <button mat-button class=\"add-btn\" (click)=\"openOrganizationDialog(column, i)\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.edit-btn{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;position:relative}.edit-btn mat-icon{font-size:16px;position:absolute;top:50%;height:16px;left:50%;width:16px;transform:translate(-50%,-50%)}\n"] }]
|
|
11734
|
-
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: i1$3.MatLegacyDialog }, { type: ApprovalService }, { type:
|
|
11803
|
+
args: [{ selector: 'lib-tree-view', template: "<!-- <div class=\"flex flex-1 connectionSettings\">\n <button mat-raised-button color=\"accent\" (click)=\"newConnection()\">\n <mat-icon>{{app_strings.build}}</mat-icon>\n </button>\n</div> -->\n\n<div *ngIf=\"list && list.length > 0\" class=\"flex heightFix overflow-container\" id=\"treeViewContainer\">\n <ng-container *ngFor=\"let column of list; let i = index;\">\n <div class=\"flex-1 flex-col col-container containers{{list.length}}\" id=\"box{{i+1}}Container\">\n <div class=\"category-heading-sticky\">\n <div class=\"category-heading-container\">\n <div class='category-header'>\n <div class=\"category-header-items w-full flex padding-remove\" id=\"box{{i}}Header\">\n <span class=\"flex gap-1 mat-body-1\">\n <ng-container *ngIf=\"column?.config?.iconEnabled\">\n <mat-icon [ngStyle]=\"{'color':column.config.color}\">{{column.config.icon}}</mat-icon>\n </ng-container>\n <!-- {{column.name}} -->\n {{column?.config?.categoryDisplayName || column.name }}\n <ng-container *ngIf=\"i != 0 && categoryList?.length > 0; else firstColumn\">\n <ng-container *ngIf=\"column.index !== 1\">\n <span class=\"count\">({{getCount(column.code)}})</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.levelNameEdit\">\n <button mat-icon-button type=\"button\" class=\"edit-btn flex\" (click)=\"editCategoryName(column, i)\">\n <mat-icon>edit</mat-icon>\n </button>\n </ng-container>\n </span>\n <ng-template #firstColumn>\n <span *ngIf=\"i == 0\" id=\"box{{i+1}}count\" class=\"count\">({{column.children.length}})</span>\n </ng-template>\n <ng-container class=\"\" *ngIf=\"column?.config?.createBtnEnabled && !column?.config?.addOrgEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" [ngClass]=\"{'button-enabled': configCodeBtn== column?.code, 'button-disabled': configCodeBtn!== column?.code}\"\n (click)=\"openCreateTermDialog(column, i)\" type=\"button\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <ng-container *ngIf=\"column?.config?.addOrgEnabled && !column?.config?.createBtnEnabled\">\n <button mat-button class=\"add-btn margin-left-auto\" (click)=\"openOrganizationDialog(column, i, 'add')\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </ng-container>\n <div class=\"arrow\" id=\"box{{i+1}}count\"></div>\n </div>\n </div>\n <!-- <div>\n Put search button here in future\n </div> -->\n </div>\n </div>\n <div class=\"padding-x2 cat-columns container-box\" id=\"box{{i+1}}\">\n <ng-container *ngIf=\"column?.children && column?.children.length > 0\">\n <lib-tree-column-view *ngIf=\"loaded[column.code]\" #selectedTaxonomyTerm [column]=\"column\"\n [containerId]=\"'box'+(i+1)\" (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, 'add')\" type=\"button\" \n [ngClass]=\"{'button-enabled': isCurrentOrNextTerm(column, i), 'button-disabled': !isCurrentOrNextTerm(column, i)}\">\n <span>Add</span>\n <mat-icon class=\"margin-remove\">\n {{app_strings.add}}\n </mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showActionBar\" [actionType]=\"isApprovalView\" [configType]=\"workFlowStatus\"\n (sendApproval)=\"sendForApproval()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar>\n</div>\n<div *ngIf=\"!(list && list.length > 0 ) && isFraworkLoading\" class=\"flex heightFix \">\n <h1 i18n>{{app_strings.loading}}</h1>\n</div>", styles: [".connectionSettings{flex-direction:row-reverse;z-index:40;position:fixed;padding:0 4px 4px 0;bottom:0;right:0}.flex{display:flex}.w-full{width:100%;align-items:center;display:flex}.w-full.addCardButton{padding:.25em .8em;text-align:left;border:2px dotted #b1b1b1;color:#666;border-radius:8px}.w-full.addCardButton .mat-icon{position:absolute;top:0%;right:3%;height:100%;display:flex;align-items:center}.w-full .button-enabled{opacity:1;pointer-events:auto}.w-full .button-disabled{opacity:.5;pointer-events:none}.w-full.addCardButtonNew{padding:8px 12px;text-align:center;border-radius:24px;height:24px;background:#1b4ca1;color:#fff!important}.w-full.addCardButtonNew .mat-icon-custom{font-size:21px}.w-full.addCardButtonNew:disabled{opacity:.6}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100%;width:100%;justify-content:space-around;position:relative}.cat-columns{position:relative;height:inherit}.col-container{display:flex;flex-direction:column;height:inherit;min-width:350px;max-width:300px}.category-heading-sticky{position:sticky;top:0;z-index:10;width:100%;background-color:#fff;margin-bottom:16px}.category-heading-container{box-sizing:content-box;position:relative;display:block;padding:2px 2.5em}.category-heading-container .category-header{display:flex;align-items:center}.category-heading-container .category-header-items{display:flex;align-items:center;padding:0 10px}.category-heading-container .category-header h4{padding:0 10px;color:#00000080}.category-heading-container .category-header .count{padding:0 2px}.category-heading-container .category-header .category-header-items{font-size:12px;font-weight:600;font-family:Lato;color:#7c7c7c}.cat-columns:hover{overflow-y:scroll}.container-box{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;height:calc(100% - 70px)}.container-box::-webkit-scrollbar{width:0;height:0}.spinner{position:fixed;display:flex;top:50%;left:50%}.arrow{left:30px;position:relative}@media only screen and (max-width: 1024px){::ng-deep mat-checkbox .mat-checkbox-inner-container{height:.8em;width:.8em}}@media only screen and (max-width: 1024px){.containers4{max-width:250px;font-size:10px}.containers5{max-width:230px}.containers6{max-width:150px}.containers7{max-width:100px}.w-full{height:3.5em}.w-full.mat-stroked-button{font-size:8px}.padding-x2,.category-heading-container{padding:0 2em}mat-icon{font-size:12px;width:1.25em;height:1.25em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}@media only screen and (max-width: 992px){.containers4{max-width:220px;font-size:9px}.padding-x2,.category-heading-container{padding:0 1.5em}}@media only screen and (max-width: 768px){.containers4{max-width:165px;font-size:8px}.w-full{height:2.5em}.padding-x2,.category-heading-container{padding:0 1em}mat-icon{font-size:8px;width:1em;height:1em}.connectionSettings .mat-raised-button{min-width:auto;padding:0 .3em;line-height:1.5em}}.add-btn{height:24px;background:#1b4ca1;color:#fff!important;display:flex;flex-direction:row-reverse;justify-content:space-between;border-radius:12px}.overflow-container{width:100%;max-width:calc(100vw - 340px);overflow-x:auto;overflow-y:hidden;white-space:nowrap}.svg-border-wrapper{position:relative;width:100%;height:95%;min-height:100px}.svg-border-wrapper .content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.content label{max-width:90%;margin:10px 0;font-size:16px;line-height:1.4;color:#000000b3;white-space:normal;word-wrap:break-word;font-weight:700}.icon-container{background:#0000000a;position:relative;width:40px;height:40px;border-radius:5px}.icon-container mat-icon{width:30px;height:30px;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.edit-btn{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;position:relative}.edit-btn mat-icon{font-size:16px;position:absolute;top:50%;height:16px;left:50%;width:16px;transform:translate(-50%,-50%)}\n"] }]
|
|
11804
|
+
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: i1$3.MatLegacyDialog }, { type: ApprovalService }, { type: i3$1.MatLegacySnackBar }, { type: ConnectorService }, { type: i0.ChangeDetectorRef }, { type: TreeHierarchyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { approvalList: [{
|
|
11735
11805
|
type: Input
|
|
11736
11806
|
}], isApprovalView: [{
|
|
11737
11807
|
type: Input
|
|
@@ -11797,13 +11867,13 @@ class ApproveViewComponent {
|
|
|
11797
11867
|
ngOnDestroy() {
|
|
11798
11868
|
this.frameworkService.removeOldLine();
|
|
11799
11869
|
}
|
|
11800
|
-
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:
|
|
11870
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ApprovalService }, { token: FrameworkService }, { token: i3$1.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11801
11871
|
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"] }] }); }
|
|
11802
11872
|
}
|
|
11803
11873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, decorators: [{
|
|
11804
11874
|
type: Component,
|
|
11805
11875
|
args: [{ selector: 'lib-approve-view', template: "<!-- <div class=\"approve-view__container\" *ngIf=\"listItems && listItems.length > 0 \">\n <ng-container *ngFor=\"let column of categories let i = index;\">\n <div class=\"approve-view__columns\">\n <h4 class=\"approve-view__columns-title\">{{column}}</h4> \n <section>\n <ng-container *ngFor=\"let term of listItems\">\n <div *ngIf=\"column === term.category\" >\n <lib-term-card\n [data]=\"{'children': term, 'selected' : false, 'category':column, cardSubType: 'minimal', isViewOnly:true}\">\n </lib-term-card>\n </div>\n \n </ng-container>\n </section>\n </div>\n </ng-container>\n <lib-action-bar *ngIf=\"showAction\" [configType]=\"workflowDetails.currentStatus\" [actionType]=\"'approve'\" (sendApproval)=\"approvalRequest()\" (closeAction)=\"closeActionBar($event)\"></lib-action-bar> \n</div> -->\n<ng-container *ngIf=\"listItems\">\n <lib-tree-view \n [isApprovalView]=\"true\" \n [approvalList]=\"listItems\" \n [workFlowStatus]=\"workflowDetails?.currentStatus\"\n (sentForApprove)=\"approvalRequest($event)\">\n </lib-tree-view>\n</ng-container>\n", styles: [".approve-view__container{display:flex;justify-content:center;flex-direction:row}.approve-view__columns{flex:1;padding:30px}.approve-view__columns-title{text-transform:capitalize;font-size:20px}\n"] }]
|
|
11806
|
-
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: ApprovalService }, { type: FrameworkService }, { type:
|
|
11876
|
+
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: ApprovalService }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
|
|
11807
11877
|
|
|
11808
11878
|
class CategoriesPreviewComponent {
|
|
11809
11879
|
constructor() {
|
|
@@ -11901,7 +11971,7 @@ class CreateCategoriesComponent {
|
|
|
11901
11971
|
}
|
|
11902
11972
|
}
|
|
11903
11973
|
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 }); }
|
|
11904
|
-
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$
|
|
11974
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateCategoriesComponent, selector: "lib-create-categories", inputs: { taxonomyInfo: "taxonomyInfo" }, outputs: { updateCategory: "updateCategory", removeCategories: "removeCategories", changePosition: "changePosition" }, ngImport: i0, template: "\n<div class=\"form-wrap\">\n <h1>{{app_strings.createCategories}}</h1>\n <form [formGroup]=\"createCategoriesForm\" (ngSubmit)=\"saveForm()\" novalidate>\n <div class=\"form-field\">\n <div class=\"form-field__wrap\" formArrayName=\"categories\" cdkDropListGroup>\n <div cdkDropList [cdkDropListData]=\"categories().controls\" (cdkDropListDropped)=\"drop($event)\">\n <div class=\"form__category\" *ngFor=\"let cat of categories().controls; let i = index\" >\n <mat-form-field appearance=\"outline\" [formGroupName]=\"i\" cdkDrag>\n <mat-label>{{app_strings.category}} {{i}}</mat-label>\n <input matInput placeholder=\"{{app_strings.categoryName}}\" formControlName=\"name\" (blur)=\"emitCategory($event)\"> \n <div class=\"drag-Handle\" cdkDragHandle>\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n </svg>\n </div>\n </mat-form-field>\n <mat-icon (click)=\"removeCategory(i)\">{{app_strings.removeCircleOutline}}</mat-icon>\n \n </div>\n </div>\n </div>\n </div>\n <footer>\n <button type=\"button\" mat-raised-button (click)=\"addCategory()\" color=\"primary\">\n {{app_strings.add | titlecase}}\n </button>\n </footer>\n </form>\n</div>\n", styles: [".form-wrap{display:flex;flex-direction:column;justify-content:center;padding:15px}.form-wrap h1{font-size:24px;color:#666;font-weight:500}.form-field{display:flex;flex-direction:row;justify-content:start}.form-field__wrap{display:flex;flex-direction:column}.form-field__wrap .mat-form-field{width:350px}.form__btns{display:flex;flex-direction:column;justify-content:end;padding-bottom:15px;margin-left:15px}.form__category{display:flex;flex-direction:row;justify-content:center;align-items:center}.form__category .mat-form-field .mat-form-field-appearance-outline{margin-bottom:0}.form__category .mat-icon{margin-left:20px;height:20px;padding:5px 5px 25px;color:#b60909;cursor:pointer}.drag-Handle{position:absolute;top:8px;right:0;color:#9b9b9b;cursor:grabbing}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}footer{display:flex;flex-direction:row;justify-content:start}footer .mat-raised-button{padding:0 40px}@media only screen and (max-width: 1024px){.form-wrap h1{font-size:20px}.form-wrap-field__wrap .mat-form-field{width:250px}.form-wrap ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{top:10px;bottom:4px}.form-wrap ::ng-deep .mat-form-field-wrapper{padding-bottom:.3em}.form-wrap ::ng-deep .mat-input-element{font-size:10px}.form-wrap ::ng-deep .mat-raised-button{min-width:auto;padding:0 .5em;line-height:2em}}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
11905
11975
|
}
|
|
11906
11976
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
|
|
11907
11977
|
type: Component,
|