@sunbird-cb/tree-hierarchy 0.0.12-cbrelease-4.8.26 → 0.0.14-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 +67 -51
- package/esm2022/lib/components/term-card/term-card.component.mjs +3 -3
- package/esm2022/lib/components/tree-column-view/tree-column-view.component.mjs +3 -3
- package/esm2022/lib/components/tree-view/tree-view.component.mjs +78 -11
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs +163 -79
- package/fesm2022/sunbird-cb-tree-hierarchy.mjs.map +1 -1
- package/lib/components/org-hierarchy-add-modal/org-hierarchy-add-modal.component.d.ts +8 -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,28 +9844,39 @@ 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) => {
|
|
9867
9873
|
this.filterOptions(value);
|
|
9868
9874
|
});
|
|
9875
|
+
this.parentSearchControl.valueChanges
|
|
9876
|
+
.pipe(takeUntil(this.destroy$))
|
|
9877
|
+
.subscribe((value) => {
|
|
9878
|
+
this.filterParentOptions(value);
|
|
9879
|
+
});
|
|
9869
9880
|
}
|
|
9870
9881
|
ngOnDestroy() {
|
|
9871
9882
|
this.destroy$.next();
|
|
@@ -9906,6 +9917,15 @@ class OrgHierarchyAddModalComponent {
|
|
|
9906
9917
|
event.stopPropagation();
|
|
9907
9918
|
this.searchControl.setValue('');
|
|
9908
9919
|
}
|
|
9920
|
+
filterParentOptions(searchValue) {
|
|
9921
|
+
const originalOptions = this.frameworkData?.categories?.find((v) => v.code === this.data?.previous[this.data.previous.length - 2]?.category)?.terms || [];
|
|
9922
|
+
if (!searchValue) {
|
|
9923
|
+
this.parentFilteredOptions = [...originalOptions];
|
|
9924
|
+
return;
|
|
9925
|
+
}
|
|
9926
|
+
const filterValue = searchValue.toLowerCase();
|
|
9927
|
+
this.parentFilteredOptions = originalOptions.filter((option) => option.name.toLowerCase().includes(filterValue));
|
|
9928
|
+
}
|
|
9909
9929
|
toggleSelectAll(event) {
|
|
9910
9930
|
event.stopPropagation();
|
|
9911
9931
|
if (this.isAllSelected()) {
|
|
@@ -9925,6 +9945,10 @@ class OrgHierarchyAddModalComponent {
|
|
|
9925
9945
|
const selectedIds = this.selectedOrgsControl.value || [];
|
|
9926
9946
|
return this.orgOptions.filter((option) => selectedIds.includes(option.identifier));
|
|
9927
9947
|
}
|
|
9948
|
+
getParentSelectedOptions() {
|
|
9949
|
+
const selectedId = this.parentSelectedOrgControl.value;
|
|
9950
|
+
return this.parentFilteredOptions.find((option) => option.code === selectedId);
|
|
9951
|
+
}
|
|
9928
9952
|
removeSelected(id) {
|
|
9929
9953
|
const currentSelection = this.selectedOrgsControl.value || [];
|
|
9930
9954
|
this.selectedOrgsControl.setValue(currentSelection.filter((value) => value !== id));
|
|
@@ -9933,40 +9957,30 @@ class OrgHierarchyAddModalComponent {
|
|
|
9933
9957
|
this.dialogRef.close();
|
|
9934
9958
|
}
|
|
9935
9959
|
onSave() {
|
|
9960
|
+
if (this.data && this.data.type === 'update' && this.selectedOrgsControl?.value?.find((v) => v === this.parentSelectedOrgControl.value)) {
|
|
9961
|
+
this.snackbar.open('You cannot select the parent organization as a child organization');
|
|
9962
|
+
return;
|
|
9963
|
+
}
|
|
9964
|
+
if (this.data && this.data.type === 'update' && this.selectedOrgsControl?.value?.length === 0 && !this.parentSelectedOrgControl.value) {
|
|
9965
|
+
this.snackbar.open('Please select at least one organization or parent organization');
|
|
9966
|
+
return;
|
|
9967
|
+
}
|
|
9968
|
+
if (this.data && this.data.type === 'add' && this.selectedOrgsControl?.value?.length === 0) {
|
|
9969
|
+
this.snackbar.open('Please select at least one organization');
|
|
9970
|
+
return;
|
|
9971
|
+
}
|
|
9936
9972
|
const selectedOrgs = this.getSelectedOptions();
|
|
9937
|
-
this.
|
|
9973
|
+
const parentSelectedOrg = this.getParentSelectedOptions();
|
|
9974
|
+
this.dialogRef.close({
|
|
9975
|
+
selectedOrg: selectedOrgs,
|
|
9976
|
+
paparentSelectedOrg: parentSelectedOrg,
|
|
9977
|
+
currentTerm: this.data?.previous[this.data.previous.length - 1],
|
|
9978
|
+
type: this.data.type,
|
|
9979
|
+
});
|
|
9938
9980
|
}
|
|
9939
9981
|
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) {
|
|
9982
|
+
const orgListData = this.frameworkService.additionalData || [];
|
|
9983
|
+
if (orgListData && orgListData.length > 0) {
|
|
9970
9984
|
const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
9971
9985
|
let orgIdsAdded = [];
|
|
9972
9986
|
if (framworkData && framworkData.categories && framworkData.categories.length > 0) {
|
|
@@ -9982,7 +9996,7 @@ class OrgHierarchyAddModalComponent {
|
|
|
9982
9996
|
}
|
|
9983
9997
|
});
|
|
9984
9998
|
}
|
|
9985
|
-
const filteredOrgList = orgListData.
|
|
9999
|
+
const filteredOrgList = orgListData.filter((org) => !orgIdsAdded.includes(org.identifier));
|
|
9986
10000
|
this.orgOptions = filteredOrgList || [];
|
|
9987
10001
|
this.filteredOptions = [...this.orgOptions];
|
|
9988
10002
|
}
|
|
@@ -10022,16 +10036,19 @@ class OrgHierarchyAddModalComponent {
|
|
|
10022
10036
|
const updatedValues = currentValues.filter(item => item !== itemToRemove);
|
|
10023
10037
|
this.selectedOrgsControl.setValue(updatedValues);
|
|
10024
10038
|
}
|
|
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]" }] }); }
|
|
10039
|
+
getParentTerms(item) {
|
|
10040
|
+
this.parentFilteredOptions = this.frameworkData.categories.find((v) => v.code === item.category).terms;
|
|
10041
|
+
}
|
|
10042
|
+
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 }); }
|
|
10043
|
+
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
10044
|
}
|
|
10028
10045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrgHierarchyAddModalComponent, decorators: [{
|
|
10029
10046
|
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"] }]
|
|
10047
|
+
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
10048
|
}], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
|
|
10032
10049
|
type: Inject,
|
|
10033
10050
|
args: [MAT_LEGACY_DIALOG_DATA]
|
|
10034
|
-
}] }, { type:
|
|
10051
|
+
}] }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
|
|
10035
10052
|
|
|
10036
10053
|
class CategoryEditModuleComponent {
|
|
10037
10054
|
constructor(fb, dialogRef, data) {
|
|
@@ -10067,7 +10084,7 @@ class CategoryEditModuleComponent {
|
|
|
10067
10084
|
}
|
|
10068
10085
|
}
|
|
10069
10086
|
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:
|
|
10087
|
+
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
10088
|
}
|
|
10072
10089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CategoryEditModuleComponent, decorators: [{
|
|
10073
10090
|
type: Component,
|
|
@@ -10664,11 +10681,11 @@ class TermCardComponent {
|
|
|
10664
10681
|
this.dialog.closeAll();
|
|
10665
10682
|
}
|
|
10666
10683
|
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"] }] }); }
|
|
10684
|
+
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 flex-middle\">\n <div class=\"card-title\">{{data.children.name}}\n <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard mt-2\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> \n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn small-btn\" (click)=\"openDialog()\">\n <mat-icon class=\"small-icon\">info</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard px-4\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> -->\n <!-- <span>++{{data.children.selected}}+++</span>\n <span>=={{data.children.status}}==</span> -->\n <div class=\"flex flex-between flex-middle mt-4\">\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n </div>\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{getuserCount(data)}} Users</span>\n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn small-btn\">\n <mat-icon class=\"small-icon\">more_vert</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n <!-- (click)=\"$event.stopPropagation();\" -->\n <!-- <div class=\"term-card-checkbox\">\n <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n <mat-icon color=\"primary\" class=\"approve-flag\"\n *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #cardStandard>\n <div>\n {{data.children.name}} \n </div>\n <div>\n {{data.children.description}} s\n </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n <div>\n {{data.children.name}}\n </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <!-- <div > -->\n <button *ngIf=\"data.columnInfo.config.enableView\" (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>View</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data, data.children,data.index, cardRef)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon>\n <span>Edit</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Add</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\" (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>close</mat-icon>\n <span>Remove Connection</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>settings</mat-icon>\n <span>Manage Organisation</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n <div class=\"flex flex-col flex-middle\">\n <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n <p class=\"color-primary modal-text margin-top-s\">Select a organisation to add or see further connections.</p>\n <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{font-family:Lato;font-size:14px;font-weight:400;line-height:16px}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}.small-btn{width:16px!important;height:16px!important;line-height:16px!important;padding:0!important}.small-btn ::ng-deep .mat-mdc-button-touch-target{width:16px!important;height:16px!important}.small-icon{font-size:16px;width:16px;height:16px;line-height:16px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] }); }
|
|
10668
10685
|
}
|
|
10669
10686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermCardComponent, decorators: [{
|
|
10670
10687
|
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"] }]
|
|
10688
|
+
args: [{ selector: 'lib-term-card', template: "<ng-container [ngSwitch]=\"( (data && data?.cardSubType) || 'cardMinimal')\">\n <ng-container *ngSwitchCase=\"'standard'\" [ngTemplateOutlet]=\"cardStandard\"></ng-container>\n <ng-container *ngSwitchCase=\"'space-saving'\" [ngTemplateOutlet]=\"cardSpaceSaving\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardMinimal\"></ng-container>\n</ng-container>\n\n<ng-template #cardMinimal>\n <div #cardRef class=\"term-card clickable {{data.index}}\" (click)=\"cardClicked(data, cardRef)\"\n [ngClass]=\"[data.children.selected?'selected':'', data.children.approvalStatus === 'Draft'? 'inDraft':'',\n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || data.children.highlight && isApprovalRequired ? 'inAssociationDraft':'']\"\n id=\"{{data.children.name}}\"\n [ngStyle]=\"{'background-color':getColor(data.index,cardRef,'bgColor',data)}\">\n <!-- (click)=\"data.selected=!data.selected\" --> \n <div class=\"term-card-parent\">\n <!-- <Below element is to show id on top left of the card> -->\n <!-- <div class=\"id\" [hidden]=\"true\">{{data.children.code}}</div> -->\n \n <div class=\"term-card-content w-full\">\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"ribbon\">{{data?.children?.refId}}</div>\n </ng-container> -->\n\n <ng-container *ngIf=\"data?.children?.additionalProperties?.competencyArea?.name\">\n <div class=\"mb-2\">\n <span class=\"comp-area {{data?.children?.additionalProperties?.competencyArea?.name?.toLowerCase()}}\">{{data?.children?.additionalProperties?.competencyArea?.name}}</span>\n </div>\n </ng-container>\n <div class=\"flex flex-between flex-middle\">\n <div class=\"card-title\">{{data.children.name}}\n <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard mt-2\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> \n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableInfoIcon\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"info items\" class=\"action-btn small-btn\" (click)=\"openDialog()\">\n <mat-icon class=\"small-icon\">info</mat-icon>\n </button>\n </ng-container>\n </div>\n <!-- <ng-container *ngIf=\"data?.children?.refId\">\n <div class=\"refIdCard px-4\">\n <span>{{data?.children?.refId}} </span>\n </div>\n </ng-container> -->\n <!-- <span>++{{data.children.selected}}+++</span>\n <span>=={{data.children.status}}==</span> -->\n <div class=\"flex flex-between flex-middle mt-4\">\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{(data.children.children) ? data.children.children?.length : 0}} Child Org</span>\n </div>\n <div class=\"card-description flex flex-middle gap-1\">\n <mat-icon svgIcon=\"frac\"></mat-icon> \n <span>{{getuserCount(data)}} Users</span>\n </div>\n <ng-container *ngIf=\"data?.columnInfo?.config?.enableThreeDot\" >\n <button type=\"button\" mat-icon-button i18n-aria-label aria-label=\"action items\"\n [matMenuTriggerFor]=\"orgMenu\" [matMenuTriggerData]=\"{'data':data, 'cardRef': cardRef}\" class=\"action-btn small-btn\">\n <mat-icon class=\"small-icon\">more_vert</mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- <p>{{data.children.approvalStatus}}, {{data.children.associationProperties?.approvalStatus}}</p> -->\n <!-- *ngIf=\"!data.isViewOnly && data.children.approvalStatus === 'Draft' && isApprovalRequired\" -->\n <!-- (click)=\"$event.stopPropagation();\" -->\n <!-- <div class=\"term-card-checkbox\">\n <mat-checkbox color=\"primary\" *ngIf=\"data.children.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length || \n data.children.associationProperties?.approvalStatus === 'Draft' && isApprovalRequired && !approvalList.length ||\n data.children.highlight && isApprovalRequired\" [checked]=\"data.children.highlight\" class=\"termSelection\"\n (change)=\"handleProductClick(data.children, $event)\" (click)=\"$event.stopPropagation()\"></mat-checkbox>\n <mat-icon color=\"primary\" class=\"approve-flag\"\n *ngIf=\"data.children.highlight && isApprovalRequired\">{{app_strings.flag}}</mat-icon>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #cardStandard>\n <div>\n {{data.children.name}} \n </div>\n <div>\n {{data.children.description}} s\n </div>\n</ng-template>\n\n<ng-template #cardSpaceSaving>\n <div>\n {{data.children.name}}\n </div>\n</ng-template>\n\n<mat-menu #cardMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <!-- <div > -->\n <button *ngIf=\"data.columnInfo.config.enableView\" (click)=\"view(data, data.children, data.index)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"ws-mat-primary-text\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>visibility</mat-icon> <span>View</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleEdit\" (click)=\"edit(data, data.children,data.index, cardRef)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon>\n <span>Edit</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableAdd\" (click)=\"create(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>add</mat-icon>\n <span>Add</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableDelete\" (click)=\"delete(data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"ws-mat-primary-text\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>delete</mat-icon>\n <span>Delete</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<mat-menu #orgMenu=\"matMenu\" class=\"menu-sec\">\n <ng-template matMenuContent let-rowData=\"data\" let-cardRef=\"cardRef\">\n <button *ngIf=\"data.columnInfo.config.enableUpdateHierarchy && data.index > 1\" (click)=\"menuAction('update-hierarchy', data)\" mat-menu-item name=\"channel-analytics-button\"\n class=\"action-btn\" i18n-aria-label aria-label=\"Analytics\">\n <mat-icon>edit</mat-icon> <span>Update Hierarchy</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enabaleRemoveConnection\" (click)=\"menuAction('remove-term', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>close</mat-icon>\n <span>Remove Connection</span>\n </button>\n <button *ngIf=\"data.columnInfo.config.enableManageOrganization\" (click)=\"menuAction('manage-org', data)\"\n mat-menu-item name=\"channel-analytics-button\" class=\"action-btn\" i18n-aria-label\n aria-label=\"Analytics\">\n <mat-icon>settings</mat-icon>\n <span>Manage Organisation</span>\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- Add this template to your component -->\n<ng-template #dialogTemplate>\n <div class=\"flex flex-col flex-middle\">\n <mat-icon class=\"large-icon color-secondary\">error_outline</mat-icon>\n <p class=\"color-primary modal-text margin-top-s\">Select a organisation to add or see further connections.</p>\n <button mat-button type=\"button\" (click)=\"closeModal()\" class=\"btn-common btn-primary modal-btn\">Close</button>\n </div>\n</ng-template>\n\n", styles: [".term-card{border:1px solid rgba(0,0,0,.08);padding:.9rem;margin:0 5px 1em;background-color:#fff;border-radius:8px;overflow:hidden;position:relative;z-index:45;display:flex;align-items:center;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;word-break:break-word}.term-card .termSelection{position:absolute;right:10px;top:10px}.term-card .term-card-parent{display:flex;flex:1 1 0%}.term-card .term-card-parent .term-card-content{white-space:initial}.term-card .term-card-parent .term-card-content .card-title{font-family:Lato;font-size:14px;font-weight:400;line-height:16px}.term-card .term-card-parent .term-card-content .card-description{color:#000;font-size:12px!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.term-card .term-card-parent .term-card-content .card-description mat-icon{width:16px;height:16px;color:#1b4ca1}.term-card .term-card-checkbox{width:10%}.term-card.selected{color:#000;border-style:none}.term-card.selected .card-description{color:#000!important}.term-card.selected .card-description mat-icon{color:#000!important}.term-card.clickable{cursor:pointer}.approve-flag{position:absolute;right:5px;top:35px;font-size:24px}::ng-deep .menu-sec{min-height:0px!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}::ng-deep .mat-mdc-menu-content,::ng-deep .mat-mdc-menu-item{background-color:#fff!important}.menu-sec{background:#fff!important}.refIdCard{border-radius:12px;width:fit-content;border:1px solid #bbb;padding:0 8px;font-size:8px!important;display:flex;align-items:center}.comp-area{font-family:Inter;font-size:12px;font-weight:600;line-height:16px;text-align:left;padding:8px;border-radius:12px}.comp-area.functional{background:#e24577;color:#fff}.comp-area.domain{background:#7b47a4;color:#fff}.comp-area.behavioural{background:#f9bf71}.ribbon{font-size:8px;font-weight:700;color:#fff}.ribbon{--f: .5em;--r: .8em;position:absolute;top:8px;right:calc(-1 * var(--f));padding-inline:.25em;padding-right:8px;line-height:1.8;background:#fa6900;border-bottom:var(--f) solid rgba(0,0,0,.3333333333);border-left:var(--r) solid rgba(0,0,0,0);clip-path:polygon(var(--r) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--r) calc(100% - var(--f)),0 calc(50% - var(--f) / 2))}.refId-card{font-size:10px}.action-btn{color:#0009}.modal-text{font-size:16px}.large-icon{font-size:46px;width:46px;height:46px}.color-secondary{color:#f3962f}.color-primary{color:#1b4ca1}.modal-btn{width:87px}.small-btn{width:16px!important;height:16px!important;line-height:16px!important;padding:0!important}.small-btn ::ng-deep .mat-mdc-button-touch-target{width:16px!important;height:16px!important}.small-icon{font-size:16px;width:16px;height:16px;line-height:16px}\n"] }]
|
|
10672
10689
|
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: LocalConnectionService }, { type: ApprovalService }, { type: i1$3.MatLegacyDialog }]; }, propDecorators: { dialogTemplate: [{
|
|
10673
10690
|
type: ViewChild,
|
|
10674
10691
|
args: ['dialogTemplate']
|
|
@@ -11002,11 +11019,11 @@ class TreeColumnViewComponent {
|
|
|
11002
11019
|
}
|
|
11003
11020
|
}
|
|
11004
11021
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, deps: [{ token: FrameworkService }, { token: ConnectorService }, { token: ApprovalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11005
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: { column: "column", containerId: "containerId" }, outputs: { updateTaxonomyTerm: "updateTaxonomyTerm", updateTermList: "updateTermList", cardsCount: "cardsCount", cardAction: "cardAction" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n <div class=\"w-full sticky\">\n <div class=\"search mb-
|
|
11022
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeColumnViewComponent, selector: "lib-tree-column-view", inputs: { column: "column", containerId: "containerId" }, outputs: { updateTaxonomyTerm: "updateTaxonomyTerm", updateTermList: "updateTermList", cardsCount: "cardsCount", cardAction: "cardAction" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n <div class=\"w-full sticky\">\n <div class=\"search mb-5\">\n <div class=\"rsearch\">\n <div class=\"sinput mat-field-rounded flex flex-middle\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n <mat-icon>clear</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n <ng-container *ngFor=\"let child of columnItems; let j = index\">\n <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n <lib-term-card\n [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n </lib-term-card>\n </div>\n </ng-container>\n</ng-container>\n<ng-template #noDataTemplate>\n <div>No Data found</div>\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TermCardComponent, selector: "lib-term-card", inputs: ["data"], outputs: ["isSelected", "selectedCard", "cardAction"] }] }); }
|
|
11006
11023
|
}
|
|
11007
11024
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeColumnViewComponent, decorators: [{
|
|
11008
11025
|
type: Component,
|
|
11009
|
-
args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n <div class=\"w-full sticky\">\n <div class=\"search mb-
|
|
11026
|
+
args: [{ selector: 'lib-tree-column-view', template: "<ng-container *ngIf=\"column?.config?.showSearch\">\n <div class=\"w-full sticky\">\n <div class=\"search mb-5\">\n <div class=\"rsearch\">\n <div class=\"sinput mat-field-rounded flex flex-middle\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input type=\"search\" [formControl]=\"searchValue\" placeholder=\"Search\" #search>\n <button *ngIf=\"search.value\" class=\"clear-btn flex\" (click)=\"clearSearch()\">\n <mat-icon>clear</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<ng-container *ngIf=\"columnItems && columnItems.length > 0; else noDataTemplate;\">\n <ng-container *ngFor=\"let child of columnItems; let j = index\">\n <div #cardEle id=\"{{column.code}}Card{{j+1}}\" >\n <lib-term-card\n [data]=\"{'children': child, 'selected' : false, 'category':column.code, cardSubType: 'minimal', isViewOnly:false,'index':column.index, columnInfo: column}\"\n (isSelected)=\"updateSelection1($event)\" (selectedCard)=\"selectedCard($event)\" (cardAction)=\"cardActionEmit($event)\">\n </lib-term-card>\n </div>\n </ng-container>\n</ng-container>\n<ng-template #noDataTemplate>\n <div>No Data found</div>\n</ng-template>\n\n<div class=\"w-full flex justify-center\" *ngIf=\"!disableLoadButton\">\n <button (click)=\"loadMore()\" class=\"mat-raised-button mat-button-base loadMore\" [ngClass]=\"{'disablBtn': disableLoadButton}\"\n [disabled]=\"disableLoadButton\">Load more...</button>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.mb1{margin-bottom:1em}flex-center{flex-wrap:nowrap;align-items:start;justify-content:center}.flex-1{flex:1}.felx-col{flex-direction:column}.padding-x2{padding:0 2.5em}.heightFix{height:100vh;overflow:hidden}.cat-columns:hover{overflow-y:scroll}.container{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.container::-webkit-scrollbar{width:0;height:0}#this{display:none}#this:target{display:block}.search{width:100%;box-sizing:border-box}.search .search-icon{font-size:20px;width:20px;height:20px}.search .rsearch{display:flex;position:relative;flex:1 1 auto;border:1px solid #e0e0e0;border-radius:20px}.search .sinput{width:100%;padding:4px 8px;box-sizing:border-box}.search .sinput input{border:0!important;outline:none!important;margin-top:2px}input[type=search]::-webkit-search-decoration:hover,input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}input[type=search]::-webkit-search-cancel-button{appearance:none}.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#888;font-size:16px;cursor:pointer;display:none}.sinput:valid~.clear-btn{display:block}.clear-btn:hover{color:#333}.sticky{position:sticky;top:0;z-index:46}.loadMore{background:#1b4ca1!important;color:#fff!important;font-family:Lato;font-size:14px;font-weight:700}.disablBtn{opacity:.6;pointer-events:none}.w-full.sticky{position:sticky;top:0;z-index:100;background-color:#fff}.category-heading-sticky{position:sticky;top:0;z-index:10;background-color:#fff}\n"] }]
|
|
11010
11027
|
}], ctorParameters: function () { return [{ type: FrameworkService }, { type: ConnectorService }, { type: ApprovalService }]; }, propDecorators: { column: [{
|
|
11011
11028
|
type: Input
|
|
11012
11029
|
}], containerId: [{
|
|
@@ -11260,13 +11277,14 @@ class TreeViewComponent {
|
|
|
11260
11277
|
}
|
|
11261
11278
|
}
|
|
11262
11279
|
}
|
|
11263
|
-
openOrganizationDialog(column, _index) {
|
|
11280
|
+
openOrganizationDialog(column, _index, typeSelected) {
|
|
11264
11281
|
const treeListData = this.frameworkService.getPreviousSelectedTerms(column.code);
|
|
11265
11282
|
const dialog = this.dialog.open(OrgHierarchyAddModalComponent, {
|
|
11266
11283
|
data: {
|
|
11267
11284
|
previous: treeListData,
|
|
11268
11285
|
currentData: column,
|
|
11269
11286
|
selectedOrgData: this.orgSelectedData,
|
|
11287
|
+
type: typeSelected
|
|
11270
11288
|
},
|
|
11271
11289
|
autoFocus: true,
|
|
11272
11290
|
restoreFocus: true,
|
|
@@ -11276,10 +11294,25 @@ class TreeViewComponent {
|
|
|
11276
11294
|
panelClass: 'right-side-modal',
|
|
11277
11295
|
maxWidth: '100vw'
|
|
11278
11296
|
});
|
|
11279
|
-
dialog.afterClosed().subscribe((_res) => {
|
|
11280
|
-
if (_res && _res.
|
|
11297
|
+
dialog.afterClosed().subscribe(async (_res) => {
|
|
11298
|
+
if (_res && _res.type === 'add') {
|
|
11281
11299
|
this.treeHierarchySvc.setLoaderState(true);
|
|
11282
|
-
this.createTerms(_res, column);
|
|
11300
|
+
this.createTerms(_res.selectedOrg, column);
|
|
11301
|
+
}
|
|
11302
|
+
else if (_res && _res.type === 'update') {
|
|
11303
|
+
if (_res.paparentSelectedOrg) {
|
|
11304
|
+
await this.updateParentAssociation(_res.paparentSelectedOrg, _res.currentTerm);
|
|
11305
|
+
}
|
|
11306
|
+
if (_res.selectedOrg && _res.selectedOrg.length > 0) {
|
|
11307
|
+
this.treeHierarchySvc.setLoaderState(true);
|
|
11308
|
+
this.createTerms(_res.selectedOrg, column);
|
|
11309
|
+
}
|
|
11310
|
+
else {
|
|
11311
|
+
this.publishFramework({
|
|
11312
|
+
id: this.orgSelectedData.orgHierarchyFrameworkId || '',
|
|
11313
|
+
category: ''
|
|
11314
|
+
});
|
|
11315
|
+
}
|
|
11283
11316
|
}
|
|
11284
11317
|
});
|
|
11285
11318
|
}
|
|
@@ -11473,6 +11506,7 @@ class TreeViewComponent {
|
|
|
11473
11506
|
async updateAssociation(nodeId, frameworkData, column) {
|
|
11474
11507
|
const prev = this.frameworkService.getPreviousCategory(column.code);
|
|
11475
11508
|
let prevTrem = this.frameworkService.getPreviousSelectedTerms(column.code);
|
|
11509
|
+
const tempFrameData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
11476
11510
|
const requestBody = {
|
|
11477
11511
|
request: {
|
|
11478
11512
|
term: {
|
|
@@ -11481,7 +11515,8 @@ class TreeViewComponent {
|
|
|
11481
11515
|
}
|
|
11482
11516
|
};
|
|
11483
11517
|
if (prev && prevTrem) {
|
|
11484
|
-
prevTrem = prevTrem.
|
|
11518
|
+
prevTrem = prevTrem.find((ele) => ele.category === prev.code);
|
|
11519
|
+
prevTrem = tempFrameData.categories.find((ele) => ele.code === prev.code).terms.find((ele) => ele.code === prevTrem.code);
|
|
11485
11520
|
if (prevTrem && prevTrem.associations && prevTrem.associations.length > 0) {
|
|
11486
11521
|
prevTrem.associations.forEach((ele) => {
|
|
11487
11522
|
requestBody.request.term.associations.push({
|
|
@@ -11510,10 +11545,10 @@ class TreeViewComponent {
|
|
|
11510
11545
|
this.treeHierarchySvc.publishFreamework(frameworkData).subscribe((res) => {
|
|
11511
11546
|
if (res && res.result && res.result.publishStatus) {
|
|
11512
11547
|
setTimeout(() => {
|
|
11513
|
-
this._snackBar.open(`Organization
|
|
11548
|
+
this._snackBar.open(`Organization hierarchy updated successfully`);
|
|
11514
11549
|
this.treeHierarchySvc.setLoaderState(false);
|
|
11515
11550
|
this.init();
|
|
11516
|
-
},
|
|
11551
|
+
}, 5000);
|
|
11517
11552
|
}
|
|
11518
11553
|
else {
|
|
11519
11554
|
this._snackBar.open('Error in publishing framework', 'cancel');
|
|
@@ -11622,7 +11657,7 @@ class TreeViewComponent {
|
|
|
11622
11657
|
this.removeConnection(event.data);
|
|
11623
11658
|
break;
|
|
11624
11659
|
case 'update-hierarchy':
|
|
11625
|
-
this.openOrganizationDialog(this.list[this.list.findIndex((item) => item.code === event.data.category) + 1], '');
|
|
11660
|
+
this.openOrganizationDialog(this.list[this.list.findIndex((item) => item.code === event.data.category) + 1], '', 'update');
|
|
11626
11661
|
break;
|
|
11627
11662
|
case 'manage-org':
|
|
11628
11663
|
this.manageOrg.emit(event.data.children);
|
|
@@ -11725,13 +11760,62 @@ class TreeViewComponent {
|
|
|
11725
11760
|
await this.publishFramework(frameworkObj);
|
|
11726
11761
|
}
|
|
11727
11762
|
}
|
|
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"] }] }); }
|
|
11763
|
+
async updateParentAssociation(selectedParent, currentTerm) {
|
|
11764
|
+
const framworkData = ___default.cloneDeep(this.frameworkService.completeResponse);
|
|
11765
|
+
const parentCategoryData = framworkData.categories.find((cat) => cat.code === selectedParent.category);
|
|
11766
|
+
if (parentCategoryData && parentCategoryData.terms && parentCategoryData.terms.length > 0) {
|
|
11767
|
+
const currentParentTerm = parentCategoryData.terms.find((term) => {
|
|
11768
|
+
if (term.associations && term.associations.length > 0) {
|
|
11769
|
+
return term.associations.some((assoc) => assoc.code === currentTerm.code);
|
|
11770
|
+
}
|
|
11771
|
+
});
|
|
11772
|
+
if (currentParentTerm) {
|
|
11773
|
+
const updateOldParentAssociation = {
|
|
11774
|
+
request: {
|
|
11775
|
+
term: {
|
|
11776
|
+
associations: []
|
|
11777
|
+
}
|
|
11778
|
+
}
|
|
11779
|
+
};
|
|
11780
|
+
currentParentTerm.associations.forEach((assoc) => {
|
|
11781
|
+
if (assoc.code !== currentTerm.code) {
|
|
11782
|
+
updateOldParentAssociation.request.term.associations.push({ identifier: assoc.identifier });
|
|
11783
|
+
}
|
|
11784
|
+
});
|
|
11785
|
+
await this.updateHierarchyAssocication(updateOldParentAssociation, framworkData.identifier, currentParentTerm);
|
|
11786
|
+
}
|
|
11787
|
+
selectedParent = parentCategoryData.terms.find((term) => term.code === selectedParent.code);
|
|
11788
|
+
const updateNewParentAssociation = {
|
|
11789
|
+
request: {
|
|
11790
|
+
term: {
|
|
11791
|
+
associations: []
|
|
11792
|
+
}
|
|
11793
|
+
}
|
|
11794
|
+
};
|
|
11795
|
+
if (selectedParent && selectedParent.associations && selectedParent.associations.length > 0) {
|
|
11796
|
+
selectedParent.associations.forEach((assoc) => {
|
|
11797
|
+
updateNewParentAssociation.request.term.associations.push({ identifier: assoc.identifier });
|
|
11798
|
+
});
|
|
11799
|
+
}
|
|
11800
|
+
updateNewParentAssociation.request.term.associations.push({ identifier: currentTerm.identifier });
|
|
11801
|
+
await this.updateHierarchyAssocication(updateNewParentAssociation, framworkData.identifier, selectedParent);
|
|
11802
|
+
}
|
|
11803
|
+
}
|
|
11804
|
+
async updateHierarchyAssocication(requestBody, frameworkId, termData) {
|
|
11805
|
+
this.treeHierarchySvc.setLoaderState(true);
|
|
11806
|
+
await this.treeHierarchySvc.updateFrameworkAssociation(requestBody, { id: frameworkId, category: termData.category }, termData.code).toPromise().catch((err) => {
|
|
11807
|
+
console.error('Error in updating association', err);
|
|
11808
|
+
this.treeHierarchySvc.setLoaderState(false);
|
|
11809
|
+
this._snackBar.open(`Error in updating association`, 'cancel');
|
|
11810
|
+
});
|
|
11811
|
+
}
|
|
11812
|
+
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 }); }
|
|
11813
|
+
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
11814
|
}
|
|
11731
11815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewComponent, decorators: [{
|
|
11732
11816
|
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:
|
|
11817
|
+
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"] }]
|
|
11818
|
+
}], 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
11819
|
type: Input
|
|
11736
11820
|
}], isApprovalView: [{
|
|
11737
11821
|
type: Input
|
|
@@ -11797,13 +11881,13 @@ class ApproveViewComponent {
|
|
|
11797
11881
|
ngOnDestroy() {
|
|
11798
11882
|
this.frameworkService.removeOldLine();
|
|
11799
11883
|
}
|
|
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:
|
|
11884
|
+
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
11885
|
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
11886
|
}
|
|
11803
11887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApproveViewComponent, decorators: [{
|
|
11804
11888
|
type: Component,
|
|
11805
11889
|
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:
|
|
11890
|
+
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: ApprovalService }, { type: FrameworkService }, { type: i3$1.MatLegacySnackBar }]; } });
|
|
11807
11891
|
|
|
11808
11892
|
class CategoriesPreviewComponent {
|
|
11809
11893
|
constructor() {
|
|
@@ -11901,7 +11985,7 @@ class CreateCategoriesComponent {
|
|
|
11901
11985
|
}
|
|
11902
11986
|
}
|
|
11903
11987
|
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$
|
|
11988
|
+
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
11989
|
}
|
|
11906
11990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateCategoriesComponent, decorators: [{
|
|
11907
11991
|
type: Component,
|