@csmart/ngc-smart-victim 0.1.3 → 0.1.7

package/fesm2015/csmart-ngc-smart-victim.js

@@ -7,6 +7,7 @@ import { DOCUMENT, DatePipe, Location, CommonModule } from '@angular/common';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog, MatSnackBar, MatPaginator, MatSort, MatDialogRef, MatInput, MatSelect, MatRadioGroup, MatButtonModule, MatCardModule, MatCheckboxModule, MatToolbarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatDialogModule, MatTabsModule, MatListModule, MatInputModule, MatStepperModule, MatGridListModule, MatProgressSpinnerModule, MatTableModule, MatSidenavModule, MatRadioModule, MatSliderModule, MatChipsModule, MatSortModule, MatPaginatorModule, MatExpansionModule, MatRippleModule, MatTableDataSource as MatTableDataSource$1, MAT_DIALOG_DATA as MAT_DIALOG_DATA$1, MatSlideToggleModule, MatIconModule as MatIconModule$1, MatButtonToggleModule, MatMenuModule, MatProgressBarModule } from '@angular/material';
+import { AccessType, SmartAuthService, LoginStaffResolverService, SelectedOffenderResolverService, SmartErrorComponent, NgcSmartCoreModule } from '@csmart/ngc-smart-core';
 import { FormControl, Validators, FormBuilder, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CdkTableModule } from '@angular/cdk/table';
 import { LayoutModule } from '@angular/cdk/layout';
@@ -17,7 +18,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MsalGuard } from '@azure/msal-angular';
-import { SmartAuthService, LoginStaffResolverService, SelectedOffenderResolverService, SmartErrorComponent } from '@csmart/ngc-smart-core';
 
 /**
  * @fileoverview added by tsickle
@@ -1633,10 +1633,12 @@ class NgcSmartVictimComponent {
         this.intakeService = intakeService;
         this.smartWarrantUrl = smartWarrantUrl;
         this.document = document;
+        this.appModuleId = '';
+        this.activatedRoute = null;
         this.victims = [];
         this.victimDetail = (/** @type {?} */ ({}));
         this.showDetail = false;
-        this.victimListFilter = new VictimListFilter;
+        this.victimListFilter = new VictimListFilter();
         this.victimListDataSource = new MatTableDataSource();
         this.doSpin = false;
         this.showListFlag = false;
@@ -1669,7 +1671,7 @@ class NgcSmartVictimComponent {
      * @return {?}
      */
     editVictimDetail(record) {
-        console.log('victim edit record');
+        console.log("victim edit record");
         console.log(record);
         console.log(record.victimId);
         this.victimDetail = record;
@@ -1700,6 +1702,29 @@ class NgcSmartVictimComponent {
         this.victimListDataSource.paginator = this.paginator;
         this.victimListDataSource.sort = this.sort;
     }
+    /**
+     * @return {?}
+     */
+    ngOnChanges() {
+        this.updateAccessControlConfig = {
+            accessType: AccessType.UPDATE,
+            appModuleId: this.appModuleId,
+            roleId: null,
+            route: this.activatedRoute.snapshot,
+        };
+        this.createAccessControlConfig = {
+            accessType: AccessType.CREATE,
+            appModuleId: this.appModuleId,
+            roleId: null,
+            route: this.activatedRoute.snapshot,
+        };
+        this.deleteAccessControlConfig = {
+            accessType: AccessType.DELETE,
+            appModuleId: this.appModuleId,
+            roleId: null,
+            route: this.activatedRoute.snapshot,
+        };
+    }
     /**
      * @return {?}
      */
@@ -1708,47 +1733,53 @@ class NgcSmartVictimComponent {
         var data = this.route.snapshot.data;
         /** @type {?} */
         var myPath = this.router.url.slice(-10);
-        console.log('smart-victim ngOnInit');
+        console.log("smart-victim ngOnInit");
         console.log(this.intakeFlag);
         console.log(myPath);
-        if (this.intakeFlag || myPath == 'victimHome') {
+        if (this.intakeFlag || myPath == "victimHome") {
             this.isIntake = true;
         }
-        this.displayedColumns = ['lastName', 'firstName'];
-        if (this.showRelationshipColumn == true || myPath == 'victimList' || myPath == 'victimHome') {
+        this.displayedColumns = ["lastName", "firstName"];
+        if (this.showRelationshipColumn == true ||
+            myPath == "victimList" ||
+            myPath == "victimHome") {
             this.displayedColumns.push("relationship");
         }
         if (this.showOffenderNameColumn == true) {
             this.displayedColumns.push("offenderName");
         }
-        if (this.showOffenderPhoneColumn == true || myPath == 'victimList' || myPath == 'victimHome') {
+        if (this.showOffenderPhoneColumn == true ||
+            myPath == "victimList" ||
+            myPath == "victimHome") {
             this.displayedColumns.push("homePhone");
         }
         this.displayedColumns.push("victimId");
         if (this.showSearchForm == true) {
             this.showListFlag = false;
         }
-        console.log('this.showSearchForm');
+        console.log("this.showSearchForm");
         console.log(this.showSearchForm);
-        console.log('myPath');
+        console.log("myPath");
         console.log(myPath);
-        if (this.showSearchForm == false || myPath == 'victimList' || myPath == 'victimHome') {
+        if (this.showSearchForm == false ||
+            myPath == "victimList" ||
+            myPath == "victimHome") {
             /** @type {?} */
             var myOffenderId;
             if (this.offenderId) {
                 myOffenderId = this.offenderId;
             }
             else {
-                console.log('back from previous page');
+                console.log("back from previous page");
                 this.showAdd = true;
                 this.showRelationshipColumn = true;
                 //this.displayedColumns.push("relationship");
                 this.showOffenderPhoneColumn = true;
                 // this.displayedColumns.push("homePhone");
-                this.accessByModule = 'true';
-                this.showEdit = 'true';
-                this.showCaseNote = 'true';
-                this.showSafetyPlan = 'true';
+                this.accessByModule = "true";
+                this.showEdit = "true";
+                this.showCaseNote = "true";
+                this.showSafetyPlan = "true";
                 myOffenderId = data.selectedOffender.offenderId;
             }
             /** @type {?} */
@@ -1757,11 +1788,13 @@ class NgcSmartVictimComponent {
                 lastName: null,
                 firstName: null,
                 pdid: null,
-                birthDate: null
+                birthDate: null,
             };
-            console.log('victimListFilter in smar-victim componenet');
+            console.log("victimListFilter in smar-victim componenet");
             console.log(victimListFilter);
-            this.victimService.getVictimListByFilter(victimListFilter).subscribe((/**
+            this.victimService
+                .getVictimListByFilter(victimListFilter)
+                .subscribe((/**
              * @param {?} data
              * @return {?}
              */
@@ -1772,7 +1805,7 @@ class NgcSmartVictimComponent {
                  * @param {?} d
                  * @return {?}
                  */
-                d => {
+                (d) => {
                     if (d.homePhone == null || d.homePhone == "") {
                         d.homePhone = d.cellPhone;
                     }
@@ -1780,9 +1813,9 @@ class NgcSmartVictimComponent {
                         d.homePhone = d.workPhone;
                     }
                 }));
-                console.log('victim data at line 179');
+                console.log("victim data at line 179");
                 console.log(this.victims);
-                console.log('showListFlag');
+                console.log("showListFlag");
                 console.log(this.showListFlag);
                 this.showListFlag = true;
                 if (data.length == 0) {
@@ -1791,18 +1824,20 @@ class NgcSmartVictimComponent {
             }));
         }
         else {
-            console.log('find filter');
+            console.log("find filter");
             console.log(this.victimListFilter);
             if (this.showListFlag === true) {
                 if (this.victimListFilter != null) {
-                    this.victimService.getVictimListByFilter(this.victimListFilter).subscribe((/**
+                    this.victimService
+                        .getVictimListByFilter(this.victimListFilter)
+                        .subscribe((/**
                      * @param {?} data
                      * @return {?}
                      */
                     (data) => {
                         this.victimListDataSource.data = data;
                         this.victims = data;
-                        console.log('victim data at line 201');
+                        console.log("victim data at line 201");
                         console.log(data);
                     }));
                 }
@@ -1815,15 +1850,15 @@ class NgcSmartVictimComponent {
      */
     formatPhoneNumber(phoneNumberString) {
         if (!phoneNumberString)
-            return '';
+            return "";
         /** @type {?} */
-        var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
+        var cleaned = ("" + phoneNumberString).replace(/\D/g, "");
         /** @type {?} */
         var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
         if (match) {
-            return '(' + match[1] + ') ' + match[2] + '-' + match[3];
+            return "(" + match[1] + ") " + match[2] + "-" + match[3];
         }
-        return '';
+        return "";
     }
     /**
      * @return {?}
@@ -1845,8 +1880,8 @@ class NgcSmartVictimComponent {
          * @return {?}
          */
         (res) => {
-            console.log('save intake step.');
-            this.snackBar.open('Status Saved.', '', {
+            console.log("save intake step.");
+            this.snackBar.open("Status Saved.", "", {
                 duration: 3000,
             });
             //this.router.navigate(['/warrant '], { queryParams: { intake: 1 } });
@@ -1858,14 +1893,14 @@ class NgcSmartVictimComponent {
      * @return {?}
      */
     goToCaseNote(victimId) {
-        this.router.navigate(['casenote', victimId]);
+        this.router.navigate(["casenote", victimId]);
     }
     /**
      * @param {?} victimId
      * @return {?}
      */
     goToSaftyPlan(victimId) {
-        this.router.navigate(['saftyPlan', victimId]);
+        this.router.navigate(["saftyPlan", victimId]);
     }
     /**
      * @param {?} filter
@@ -1873,7 +1908,7 @@ class NgcSmartVictimComponent {
      */
     getVictimList(filter) {
         this.victimListFilter = filter;
-        console.log('this.victimListFilter inside getVictimList');
+        console.log("this.victimListFilter inside getVictimList");
         console.log(this.victimListFilter);
         this.doSpin = true;
         this.victimService.getVictimListByFilter(filter).subscribe((/**
@@ -1893,15 +1928,15 @@ class NgcSmartVictimComponent {
          * @param {?} err
          * @return {?}
          */
-        err => {
+        (err) => {
             this.doSpin = !this.doSpin;
         }));
     }
 }
 NgcSmartVictimComponent.decorators = [
     { type: Component, args: [{
-                selector: 'csmart-victim',
-                template: "<div *ngIf=\"showSearchForm\">\r\n    <app-victim-search-form\r\n    (onSearch)=\"getVictimList($event)\">\r\n    </app-victim-search-form>\r\n</div>\r\n\r\n<div *ngIf=\"showDetail\">\r\n  <csmart-victim-detail [victimDetail]=\"victimDetail\" \r\n                        [staffId]=\"staffId\"\r\n                        [offenderId] =\"offenderId\"\r\n                        [isIntake]=\"isIntake\"\r\n                        (onSave)=\"save($event)\" \r\n                        (onCancel)=\"cancel()\" >\r\n</csmart-victim-detail>\r\n</div>\r\n<div class=\"main-container\">\r\n    \r\n    <div class=\"add-action\" *ngIf=\"showAdd\">\r\n        <button mat-raised-button color=\"primary\" (click)=\"addRecord()\">\r\n          <mat-icon>add</mat-icon>\r\n          Add Victim\r\n        </button>\r\n        &nbsp;&nbsp;\r\n\r\n    <div *ngIf=\"isIntake\">\r\n        <button \r\n        mat-raised-button \r\n        color=\"primary\"         \r\n        (click)=\"saveIntake()\">\r\n        Continue\r\n        </button> \r\n    </div>\r\n\r\n    </div>\r\n   <div *ngIf=\"showListFlag\">\r\n    <mat-card id=\"divVictim\" >\r\n          <mat-card-content >\r\n            <mat-table #table [dataSource]=\"victimListDataSource\" >\r\n\r\n                <ng-container matColumnDef=\"lastName\">\r\n                    <mat-header-cell *matHeaderCellDef>Victim Last Name</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" > {{row.lastName}}  </mat-cell>\r\n                </ng-container>\r\n\r\n\r\n                <ng-container matColumnDef=\"firstName\">\r\n                        <mat-header-cell *matHeaderCellDef >Victim First Name</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" > {{row.firstName}} </mat-cell>\r\n                </ng-container>\r\n               \r\n                <div  *ngIf=\"showRelationshipColumn\">\r\n                    <ng-container matColumnDef=\"relationship\">\r\n                        <mat-header-cell *matHeaderCellDef >Relationship to Offender</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" > {{row.relationship}} </mat-cell>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div  *ngIf=\"showOffenderPhoneColumn\">\r\n                    <ng-container matColumnDef=\"homePhone\">\r\n                        <mat-header-cell *matHeaderCellDef >Phone Number</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" > {{formatPhoneNumber(row.homePhone)}} </mat-cell>\r\n                    </ng-container>\r\n                </div>\r\n                \r\n                <div  *ngIf=\"showOffenderNameColumn\">\r\n                    <ng-container matColumnDef=\"offenderName\">\r\n                            <mat-header-cell *matHeaderCellDef>Offender Name</mat-header-cell>\r\n                            <mat-cell *matCellDef=\"let row\" > {{row.offenderName}} </mat-cell>\r\n                    </ng-container>\r\n                </div>\r\n               \r\n               <ng-container matColumnDef=\"victimId\">\r\n                  <mat-header-cell *matHeaderCellDef ></mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" >\r\n                        \r\n                        <!-- <div  *ngIf=\"accessByModule\">\r\n                            <mat-checkbox></mat-checkbox>\r\n                        </div> -->\r\n                        \r\n                        <div  *ngIf=\"showEdit\">\r\n                            <button class=\"edit-btn\"  mat-icon-button color=\"primary\"  matTooltip=\"View/Edit Victim\" (click)=\"editVictimDetail(row)\">\r\n                                <i class=\"material-icons\">mode_edit</i>\r\n                            </button>\r\n                        </div>\r\n\r\n                        \r\n\r\n                        &nbsp;&nbsp; \r\n\r\n                        <div  *ngIf=\"showCaseNote\">\r\n                            <button type=\"button\" matTooltip=\"CaseNote\"  mat-raised-button color=\"primary\" (click)=\"goToCaseNote(row.victimId)\">                        \r\n                                        <span class=\"glyphicon glyphicon-pencil\" ></span>&nbsp;Case Note\r\n                            </button> \r\n                        </div>\r\n                         &nbsp;&nbsp;\r\n                       \r\n                         <div  *ngIf=\"showSafetyPlan\">\r\n                        <button type=\"button\"  matTooltip=\"safety plan\" mat-raised-button color=\"primary\" (click)=\"goToSaftyPlan(row.victimId)\">                        \r\n                                <span class=\"glyphicon glyphicon-pencil\" ></span>&nbsp;Safety Plan\r\n                        </button>\r\n                        </div>\r\n                        &nbsp;&nbsp;\r\n   \r\n                    </mat-cell>\r\n                </ng-container>\r\n\r\n                <mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"example-header-row\"></mat-header-row>\r\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\" class=\"example-row\"></mat-row>\r\n                </mat-table>\r\n\r\n              <mat-paginator #paginator [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator> \r\n          </mat-card-content>\r\n    </mat-card>\r\n    </div>\r\n\r\n    <div>\r\n        <b>{{msg}}</b>\r\n    </div>\r\n</div>",
+                selector: "csmart-victim",
+                template: "<div *ngIf=\"showSearchForm\">\r\n    <app-victim-search-form\r\n    (onSearch)=\"getVictimList($event)\">\r\n    </app-victim-search-form>\r\n</div>\r\n\r\n<div *ngIf=\"showDetail\">\r\n  <csmart-victim-detail [victimDetail]=\"victimDetail\" \r\n                        [staffId]=\"staffId\"\r\n                        [offenderId] =\"offenderId\"\r\n                        [isIntake]=\"isIntake\"\r\n                        (onSave)=\"save($event)\" \r\n                        (onCancel)=\"cancel()\" >\r\n</csmart-victim-detail>\r\n</div>\r\n<div class=\"main-container\">\r\n    \r\n    <div class=\"add-action\" *ngIf=\"showAdd\">\r\n        <button mat-raised-button color=\"primary\" \r\n           accessControl\r\n          [accessControlConfig]=\"createAccessControlConfig\"  \r\n          (click)=\"addRecord()\">\r\n          <mat-icon>add</mat-icon>\r\n          Add Victim\r\n        </button>\r\n        &nbsp;&nbsp;\r\n\r\n    <div *ngIf=\"isIntake\">\r\n        <button \r\n        mat-raised-button \r\n        color=\"primary\" \r\n        accessControl\r\n        [accessControlConfig]=\"updateAccessControlConfig\"          \r\n        (click)=\"saveIntake()\">\r\n        Continue\r\n        </button> \r\n    </div>\r\n\r\n    </div>\r\n   <div *ngIf=\"showListFlag\">\r\n    <mat-card id=\"divVictim\" >\r\n          <mat-card-content >\r\n            <mat-table #table [dataSource]=\"victimListDataSource\" >\r\n\r\n                <ng-container matColumnDef=\"lastName\">\r\n                    <mat-header-cell *matHeaderCellDef>Victim Last Name</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" > {{row.lastName}}  </mat-cell>\r\n                </ng-container>\r\n\r\n\r\n                <ng-container matColumnDef=\"firstName\">\r\n                        <mat-header-cell *matHeaderCellDef >Victim First Name</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" > {{row.firstName}} </mat-cell>\r\n                </ng-container>\r\n               \r\n                <div  *ngIf=\"showRelationshipColumn\">\r\n                    <ng-container matColumnDef=\"relationship\">\r\n                        <mat-header-cell *matHeaderCellDef >Relationship to Offender</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" > {{row.relationship}} </mat-cell>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div  *ngIf=\"showOffenderPhoneColumn\">\r\n                    <ng-container matColumnDef=\"homePhone\">\r\n                        <mat-header-cell *matHeaderCellDef >Phone Number</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" > {{formatPhoneNumber(row.homePhone)}} </mat-cell>\r\n                    </ng-container>\r\n                </div>\r\n                \r\n                <div  *ngIf=\"showOffenderNameColumn\">\r\n                    <ng-container matColumnDef=\"offenderName\">\r\n                            <mat-header-cell *matHeaderCellDef>Offender Name</mat-header-cell>\r\n                            <mat-cell *matCellDef=\"let row\" > {{row.offenderName}} </mat-cell>\r\n                    </ng-container>\r\n                </div>\r\n               \r\n               <ng-container matColumnDef=\"victimId\">\r\n                  <mat-header-cell *matHeaderCellDef ></mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" >\r\n                        \r\n                        <!-- <div  *ngIf=\"accessByModule\">\r\n                            <mat-checkbox></mat-checkbox>\r\n                        </div> -->\r\n                        \r\n                        <div  *ngIf=\"showEdit\">\r\n                            <button class=\"edit-btn\"  mat-icon-button color=\"primary\"  matTooltip=\"View/Edit Victim\"\r\n                                accessControl\r\n                                [accessControlConfig]=\"updateAccessControlConfig\"  \r\n                                (click)=\"editVictimDetail(row)\">\r\n                                <i class=\"material-icons\">mode_edit</i>\r\n                            </button>\r\n                        </div>\r\n\r\n                        \r\n\r\n                        &nbsp;&nbsp; \r\n\r\n                        <div  *ngIf=\"showCaseNote\">\r\n                            <button type=\"button\" matTooltip=\"CaseNote\"  mat-raised-button color=\"primary\" \r\n                            accessControl\r\n                            [accessControlConfig]=\"updateAccessControlConfig\"  \r\n                            (click)=\"goToCaseNote(row.victimId)\">                        \r\n                                        <span class=\"glyphicon glyphicon-pencil\" ></span>&nbsp;Case Note\r\n                            </button> \r\n                        </div>\r\n                         &nbsp;&nbsp;\r\n                       \r\n                         <div  *ngIf=\"showSafetyPlan\">\r\n                        <button type=\"button\"  matTooltip=\"safety plan\" mat-raised-button color=\"primary\"\r\n                         accessControl\r\n                         [accessControlConfig]=\"updateAccessControlConfig\"  \r\n                         (click)=\"goToSaftyPlan(row.victimId)\">                        \r\n                                <span class=\"glyphicon glyphicon-pencil\" ></span>&nbsp;Safety Plan\r\n                        </button>\r\n                        </div>\r\n                        &nbsp;&nbsp;\r\n   \r\n                    </mat-cell>\r\n                </ng-container>\r\n\r\n                <mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"example-header-row\"></mat-header-row>\r\n                <mat-row *matRowDef=\"let row; columns: displayedColumns\" class=\"example-row\"></mat-row>\r\n                </mat-table>\r\n\r\n              <mat-paginator #paginator [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 100]\"></mat-paginator> \r\n          </mat-card-content>\r\n    </mat-card>\r\n    </div>\r\n\r\n    <div>\r\n        <b>{{msg}}</b>\r\n    </div>\r\n</div>",
                 styles: ["div.services{max-width:500px;margin:auto;border:3px solid #73ad21}.rTable{display:block;width:100%}.rTableBody,.rTableFoot,.rTableHeading,.rTableRow{clear:both}.rTableFoot,.rTableHead{background-color:#ddd;font-weight:700}.rTableCell,.rTableHead{border:0;float:left;padding:1px;width:28%}.rTable:after{visibility:hidden;display:block;font-size:0;content:\" \";clear:both;height:0}.victimSearch{display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;grid-column-gap:10px}.edit-btn{margin-right:4px}.main-container{display:flex;margin-top:8px}.add-action{display:flex;justify-content:flex-end;margin-bottom:8px}.example-headers-align .mat-expansion-panel-header-description,.example-headers-align .mat-expansion-panel-header-title{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:space-between;align-items:center}mat-form-field{margin-right:12px}.actions{display:flex;justify-content:space-around}.Row{display:table;width:100%;table-layout:fixed}.Column{display:table-cell}.sp-form textarea{float:left;margin-top:20px;margin-bottom:10px;width:462px;height:70px;overflow:auto;box-sizing:border-box}.mat-column-firstName,.mat-column-homePhone,.mat-column-lastName,.mat-column-offenderName,.mat-column-relationship{word-wrap:break-word!important;white-space:unset!important;flex:0 0 15%!important;width:15%!important;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mat-column-victimId{word-wrap:break-word!important;white-space:unset!important;flex:0 0 25%!important;width:25%!important;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}"]
             }] }
 ];
@@ -1930,6 +1965,8 @@ NgcSmartVictimComponent.propDecorators = {
     showSearchForm: [{ type: Input }],
     accessByModule: [{ type: Input }],
     intakeFlag: [{ type: Input }],
+    appModuleId: [{ type: Input }],
+    activatedRoute: [{ type: Input }],
     paginator: [{ type: ViewChild, args: [MatPaginator,] }],
     sort: [{ type: ViewChild, args: [MatSort,] }]
 };
@@ -1961,6 +1998,10 @@ if (false) {
     /** @type {?} */
     NgcSmartVictimComponent.prototype.intakeFlag;
     /** @type {?} */
+    NgcSmartVictimComponent.prototype.appModuleId;
+    /** @type {?} */
+    NgcSmartVictimComponent.prototype.activatedRoute;
+    /** @type {?} */
     NgcSmartVictimComponent.prototype.paginator;
     /** @type {?} */
     NgcSmartVictimComponent.prototype.sort;
@@ -1984,6 +2025,12 @@ if (false) {
     NgcSmartVictimComponent.prototype.msg;
     /** @type {?} */
     NgcSmartVictimComponent.prototype.isIntake;
+    /** @type {?} */
+    NgcSmartVictimComponent.prototype.updateAccessControlConfig;
+    /** @type {?} */
+    NgcSmartVictimComponent.prototype.createAccessControlConfig;
+    /** @type {?} */
+    NgcSmartVictimComponent.prototype.deleteAccessControlConfig;
     /**
      * @type {?}
      * @private
@@ -2281,14 +2328,8 @@ class SmartVictimDetailComponent {
             email: new FormControl('', Validators.compose([Validators.pattern(this.emailPattern)])),
             minorFlag: new FormControl('', Validators.compose([Validators.required])),
             victimAdvocateFlag: new FormControl('', Validators.compose([Validators.required])),
-            guardianLastName: new FormControl('', conditionalValidator((/**
-             * @return {?}
-             */
-            () => this.victimForm.get('minorFlag').value), Validators.required, 'illuminatiError')),
-            guardianFirstName: new FormControl('', conditionalValidator((/**
-             * @return {?}
-             */
-            () => this.victimForm.get('minorFlag').value), Validators.required, 'illuminatiError')),
+            guardianLastName: new FormControl(''),
+            guardianFirstName: new FormControl(''),
             guardianPrefixId: new FormControl(''),
             guardianSuffixId: new FormControl(''),
             //guardianGender:new FormControl('', ),
@@ -2645,8 +2686,8 @@ class SmartVictimDetailComponent {
          * @return {?}
          */
         value => {
-            this.victimForm.get('guardianFirstName').updateValueAndValidity();
-            this.victimForm.get('guardianLastName').updateValueAndValidity();
+            // this.victimForm.get('guardianFirstName').updateValueAndValidity();
+            // this.victimForm.get('guardianLastName').updateValueAndValidity();
             this.victimForm.get('guardianWorkPhone').updateValueAndValidity();
             this.victimForm.get('guardianHomePhone').updateValueAndValidity();
             this.victimForm.get('guardianCellPhone').updateValueAndValidity();
@@ -2668,7 +2709,8 @@ class SmartVictimDetailComponent {
      * @return {?}
      */
     back() {
-        this.onSave.emit(this.victimDetail);
+        //this.onSave.emit(this.victimDetail);
+        this.router.navigate(['victimList']);
     }
     /**
      * @return {?}
@@ -2703,23 +2745,21 @@ class SmartVictimDetailComponent {
      * @return {?}
      */
     radioMinorChange($event) {
-        /** @type {?} */
-        const guardianLastNameControl = this.victimForm.get('guardianLastName');
-        /** @type {?} */
-        const guardianFirstNameControl = this.victimForm.get('guardianFirstName');
+        // const guardianLastNameControl = this.victimForm.get('guardianLastName');
+        //const guardianFirstNameControl = this.victimForm.get('guardianFirstName');
         if ($event.value === true) {
             this.guardianTabFlag = true;
-            guardianLastNameControl.setValidators(Validators.required);
-            guardianFirstNameControl.setValidators(Validators.required);
+            // guardianLastNameControl.setValidators(Validators.required);
+            // guardianFirstNameControl.setValidators(Validators.required);
             //this.victimForm.value.guardianNoPhoneFlag =  true;
         }
         else {
             this.guardianTabFlag = false;
-            guardianLastNameControl.clearValidators();
-            guardianFirstNameControl.clearValidators();
+            // guardianLastNameControl.clearValidators();
+            // guardianFirstNameControl.clearValidators();
         }
-        guardianLastNameControl.updateValueAndValidity();
-        guardianFirstNameControl.updateValueAndValidity();
+        //guardianLastNameControl.updateValueAndValidity();
+        // guardianFirstNameControl.updateValueAndValidity();
     }
     /**
      * @param {?} $event
@@ -2837,13 +2877,11 @@ class SmartVictimDetailComponent {
             /** @type {?} */
             const minorControl = this.victimForm.get('minorFlag');
             minorControl.setValue(true);
-            /** @type {?} */
-            const guardianLastNameControl = this.victimForm.get('guardianLastName');
-            /** @type {?} */
-            const guardianFirstNameControl = this.victimForm.get('guardianFirstName');
+            //  const guardianLastNameControl = this.victimForm.get('guardianLastName');
+            // const guardianFirstNameControl = this.victimForm.get('guardianFirstName');
             this.guardianTabFlag = true;
-            guardianLastNameControl.setValidators(Validators.required);
-            guardianFirstNameControl.setValidators(Validators.required);
+            // guardianLastNameControl.setValidators(Validators.required);
+            //  guardianFirstNameControl.setValidators(Validators.required);
         }
     }
     /**
@@ -3170,8 +3208,6 @@ class SmartVictimDetailComponent {
             }
             else {
                 //update victim
-                console.log(' this.victimForm.value.victimOffenderRelationshipTypeId');
-                console.log(this.victimForm.value.victimOffenderRelationshipTypeId);
                 this.victimDetail.underSupervisionFlag = this.victimForm.value.underSupervisionFlag;
                 this.victimDetail.victimOffenderRelationshipTypeId = this.victimForm.value.victimOffenderRelationshipTypeId;
                 this.victimDetail.lastName = this.victimForm.value.lastName;
@@ -3198,7 +3234,7 @@ class SmartVictimDetailComponent {
                 this.victimDetail.drugUseFlag = this.victimForm.value.drugUseFlag;
                 this.victimDetail.alcoholUseFlag = this.victimForm.value.alcoholUseFlag;
                 this.victimDetail.accessRisk = this.victimForm.value.accessRisk;
-                this.victimDetail.addressId = this.victimForm.value.addressId;
+                this.victimDetail.addressId = this.addressId;
                 this.victimDetail.allowCsosaContactFlag = this.victimForm.value.allowCsosaContactFlag;
                 this.victimDetail.victimSupports = [];
                 this.victimForm.value.victimSupports.forEach((/**
@@ -3293,17 +3329,23 @@ class SmartVictimDetailComponent {
                     this.victimAdvocate.cellPhone = this.victimForm.value.advocateCellPhone ? this.victimForm.value.advocateCellPhone : null;
                     this.victimAdvocate.email = this.victimForm.value.advocateEmail ? this.victimForm.value.advocateEmail : null;
                     this.victimAdvocate.modifiedBy = this.staffId;
-                    if (this.victimDetail.victimAdvocateFlag == 'YS' && this.victimDetail.advocateFirstName != null) {
-                        this.victimService.putVictimAdvocate(this.victimDetail.victimId, this.victimAdvocate).subscribe((/**
-                         * @param {?} resp
-                         * @return {?}
-                         */
-                        resp => {
-                        }));
-                    }
-                    else {
-                        console.log('add advocate');
-                        this.victimService.postVictimAdvocate(this.victimDetail.victimId, this.victimAdvocate).subscribe();
+                    console.log('work on advocate part');
+                    if (this.victimDetail.victimAdvocateFlag == 'YS') {
+                        console.log('work on advocate flag is YS ');
+                        if (this.victimDetail.advocateFirstName != null) {
+                            console.log('check advocate fisrt name ');
+                            console.log(this.victimDetail.advocateFirstName);
+                            this.victimService.putVictimAdvocate(this.victimDetail.victimId, this.victimAdvocate).subscribe((/**
+                             * @param {?} resp
+                             * @return {?}
+                             */
+                            resp => { }));
+                        }
+                        else {
+                            console.log('add advocate');
+                            console.log(this.victimAdvocate);
+                            this.victimService.postVictimAdvocate(this.victimDetail.victimId, this.victimAdvocate).subscribe();
+                        }
                     }
                     // guardian section
                     this.victimGuardian.victimGuardianId = this.victimDetail.victimId;
@@ -3318,20 +3360,25 @@ class SmartVictimDetailComponent {
                     this.victimGuardian.cellPhone = this.victimForm.value.guardianCellPhone ? this.victimForm.value.guardianCellPhone : null;
                     this.victimGuardian.email = this.victimForm.value.guardianEmail ? this.victimForm.value.guardianEmail : null;
                     this.victimGuardian.modifiedBy = this.staffId;
-                    if (this.victimDetail.minorFlag == true && this.victimDetail.guardianFirstName != null) {
-                        this.victimService.putVictimGuardian(this.victimDetail.victimId, this.victimGuardian).subscribe((/**
-                         * @param {?} resp
-                         * @return {?}
-                         */
-                        resp => {
-                        }));
-                    }
-                    else {
-                        this.victimService.postVictimGuardian(this.victimDetail.victimId, this.victimGuardian).subscribe();
+                    if (this.victimDetail.minorFlag == true) {
+                        if (this.victimDetail.guardianFirstName != null)
+                            this.victimService.putVictimGuardian(this.victimDetail.victimId, this.victimGuardian).subscribe((/**
+                             * @param {?} resp
+                             * @return {?}
+                             */
+                            resp => {
+                            }));
+                        else {
+                            console.log('add gurdian');
+                            console.log(this.victimGuardian);
+                            this.victimService.postVictimGuardian(this.victimDetail.victimId, this.victimGuardian).subscribe();
+                        }
                     }
                 }));
             }
         } //end of this.phoneValidationFlag = false
+        console.log('this.victimDetail');
+        console.log(this.victimDetail);
         this.onSave.emit(this.victimDetail);
     }
     //#endregion "save victim"
@@ -3352,7 +3399,7 @@ class SmartVictimDetailComponent {
 SmartVictimDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'csmart-victim-detail',
-                template: "<mat-card>\r\n  <mat-card-content>\r\n\r\n        <div  [formGroup]=\"victimForm\">\r\n\r\n          <mat-tab-group dynamicHeight  mat-stretch-tabs>\r\n            <mat-tab label=\"Victim Detail\" >\r\n              <div class='container'>\r\n\r\n                    <mat-form-field>\r\n                      <mat-label>Is victim a minor?<font color=\"red\">* </font></mat-label>\r\n                      <br>\r\n                      <mat-radio-group  formControlName=\"minorFlag\"  (change)=\"radioMinorChange($event)\" [(ngModel)]=\"editVictim.minorFlag\" >\r\n                      <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                      <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                    </mat-radio-group>\r\n                    <input matInput placeholder=\"\" style=\"display: none\">\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('minorFlag').errors \r\n                    && (victimForm.get('minorFlag').dirty || victimForm.get('minorFlag').touched)\">\r\n                    <mat-error>If victim a minor field is <strong>required</strong></mat-error>\r\n                    </div> \r\n\r\n                  </mat-form-field>\r\n                 \r\n                  <mat-form-field>\r\n                    <mat-label>Does the Victim have a Victim Advocate or Social Worker with <br>whom CSOSA should maintain contact?<font color=\"red\">* </font></mat-label>\r\n                    <br>\r\n                    <br>\r\n                    <mat-radio-group class = \"tp-radio-group\"  formControlName=\"victimAdvocateFlag\"  (change)=\"radioAdvocateChange($event)\" [(ngModel)]=\"editVictim.victimAdvocateFlag\">\r\n                      <mat-radio-button  color=\"primary\" *ngFor=\"let item of flagOption\" [value]=\"item.flagOptionYesNoUnknownId\">{{item.name}} </mat-radio-button>&nbsp;\r\n                    </mat-radio-group>\r\n                    <input matInput placeholder=\"\" style=\"display: none\">\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('victimAdvocateFlag').errors \r\n                    && (victimForm.get('victimAdvocateFlag').dirty || victimForm.get('victimAdvocateFlag').touched)\">\r\n                    <mat-error>If victim has advocate field is <strong>required</strong></mat-error>\r\n                    </div> \r\n                  </mat-form-field>\r\n              \r\n \r\n               <mat-form-field>\r\n                  <mat-label>Victim Currently Under Supervision:</mat-label>\r\n                    <mat-select  formControlName=\"underSupervisionFlag\" name=\"supervision\" [(ngModel)]=\"editVictim.underSupervisionFlag\" >\r\n                      <mat-option *ngFor=\"let item of flagOption\" [value]=\"item.flagOptionYesNoUnknownId\" >\r\n                        {{item.name}}</mat-option>\r\n                    </mat-select>\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('underSupervisionFlag').errors \r\n                    && (victimForm.get('underSupervisionFlag').dirty || victimForm.get('underSupervisionFlag').touched)\">\r\n                    <mat-error>under supervision field is <strong>required</strong></mat-error>\r\n                    </div> \r\n                </mat-form-field>\r\n               \r\n             \r\n               <mat-form-field>\r\n                  <mat-label>Relationship to Offender:</mat-label>\r\n                    <mat-select formControlName=\"victimOffenderRelationshipTypeId\" [(ngModel)]=\"editVictim.victimOffenderRelationshipTypeId\"  >\r\n                      <mat-option *ngFor=\"let item of relationshipTypes\" [value]=\"item.relationshipTypeId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('victimOffenderRelationshipTypeId').errors \r\n                    && (victimForm.get('victimOffenderRelationshipTypeId').dirty || victimForm.get('victimOffenderRelationshipTypeId').touched)\">\r\n                    <mat-error>relationship is <strong>required</strong></mat-error>\r\n                    </div> \r\n                </mat-form-field>\r\n             \r\n                 \r\n                <mat-form-field>\r\n                  <mat-label>Victim Last Name:</mat-label>\r\n                  <input matInput formControlName=\"lastName\"  [(ngModel)]=\"editVictim.lastName\" >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('lastName').errors \r\n                  && (victimForm.get('lastName').dirty || victimForm.get('lastName').touched)\">\r\n                  <mat-error>victim last name is <strong>required</strong></mat-error>\r\n                  </div> \r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim First Name: </mat-label>\r\n                  <input matInput  formControlName=\"firstName\" [(ngModel)]=\"editVictim.firstName\"  >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('firstName').errors \r\n                  && (victimForm.get('firstName').dirty || victimForm.get('firstName').touched)\">\r\n                  <mat-error>victim first name is <strong>required</strong></mat-error>\r\n                 </div> \r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim Middle Name:</mat-label>\r\n                    <input matInput  formControlName=\"middleName\" [(ngModel)]=\"editVictim.middleName\">\r\n                </mat-form-field>\r\n                             \r\n                <mat-form-field>\r\n                  <mat-label>Victim Prefix:</mat-label>\r\n                    <mat-select  formControlName=\"prefixId\" [(ngModel)]=\"editVictim.prefixId\">\r\n                      <mat-option *ngFor=\"let item of prefixes\" [value]=\"item.prefixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim Suffix:</mat-label>\r\n                    <mat-select  formControlName=\"suffixId\"  [(ngModel)]=\"editVictim.suffixId\">\r\n                      <mat-option *ngFor=\"let item of suffixes\" [value]=\"item.suffixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n  \r\n                <mat-form-field>\r\n                  <mat-label>Victim Gender:</mat-label>\r\n                  <mat-select  formControlName=\"genderCode\" [(ngModel)]=\"editVictim.genderCode\">\r\n                    <mat-option *ngFor=\"let item of genders\" [value]=\"item.genderCode\">{{item.name}}</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n                             \r\n                <mat-form-field>\r\n                  <mat-label>Date of Birth:</mat-label>\r\n                   <input matInput \r\n                   [matDatepicker]=\"victimBirthRef\" \r\n                   formControlName=\"birthDate\"\r\n                  [(ngModel)]=\"editVictim.birthDate\"\r\n                  (click)=\"victimBirthRef.open()\"\r\n                  (dateChange)=\"handleDOBChange($event)\"  \r\n                    >\r\n                  <mat-datepicker-toggle [for]=\"victimBirthRef\" matSuffix></mat-datepicker-toggle>\r\n                  <mat-datepicker #victimBirthRef></mat-datepicker>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim Home Phone:</mat-label>\r\n                    <input \r\n                    matInput \r\n                    formControlName=\"homePhone\" \r\n                    [(ngModel)]=\"editVictim.homePhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\"/>\r\n\r\n\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('homePhone').errors\r\n                  && (victimForm.get('homePhone').dirty || victimForm.get('homePhone').touched)\">\r\n\r\n\r\n                  <mat-error><strong>Home phone number format is not correct.</strong></mat-error>\r\n                  </div>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Victim Cell Phone:</mat-label>\r\n                  <input matInput  formControlName=\"cellPhone\" [(ngModel)]=\"editVictim.cellPhone\" >\r\n                      <div class=\"help-block\" *ngIf=\"victimForm.get('cellPhone').errors \r\n                  && (victimForm.get('cellPhone').dirty || victimForm.get('cellPhone').touched)\">\r\n                   <mat-error><strong>Cell phone number format is not correct.</strong></mat-error>\r\n              </div>\r\n                </mat-form-field>\r\n\r\n               \r\n                <mat-form-field >\r\n                  <mat-label>Victim Work Phone:</mat-label>\r\n                  <input matInput  formControlName=\"workPhone\"  [(ngModel)]=\"editVictim.workPhone\" >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('workPhone').errors \r\n                  && (victimForm.get('workPhone').dirty || victimForm.get('workPhone').touched)\">\r\n                  <mat-error><strong>Work phone number format is not correct.</strong></mat-error>\r\n                  </div>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Victim Email:</mat-label>\r\n                   <input matInput  formControlName=\"email\" [(ngModel)]=\"editVictim.email\" >\r\n                   <div class=\"help-block\" *ngIf=\"victimForm.get('email').errors \r\n                  && (victimForm.get('email').dirty || victimForm.get('email').touched)\">\r\n                  <mat-error><strong>victim email format is not correct.</strong></mat-error>\r\n              </div>\r\n                </mat-form-field>\r\n  \r\n                <div></div>\r\n              \r\n                <app-smart-address \r\n                [showPsa]=\"true\" \r\n                [modifiedBy]=\"staffId\" \r\n                [id]=\"addressId\"\r\n                (addressIdChange)=\"onAddressChange($event)\"\r\n                [outline]=\"true\" \r\n                readonly=\"false\"\r\n                [rowHeight]=\"80\" \r\n                (isValid)=\"false\" \r\n                [addressValidators]=\"addressValidators\"\r\n                #addressComponent\r\n                >\r\n                </app-smart-address>\r\n          \r\n               \r\n                  <!-- Docket: \r\n                  <div>\r\n                    <div  *ngFor=\"let docket of docketlist; let i=index\">\r\n                      <mat-checkbox >{{docket.docketNumber}}</mat-checkbox>\r\n                    </div>\r\n                  </div> -->\r\n\r\n                  <mat-checkbox  color=\"primary\" formControlName=\"allowCsosaContactFlag\" name=\"allowCsosaContactFlag\" [(ngModel)]=\"editVictim.allowCsosaContactFlag\">victim wants to be contacted by CSOSA</mat-checkbox>\r\n                                   \r\n                </div> \r\n\r\n                <mat-card>\r\n                      <mat-form-field>\r\n                        <mat-label> Children in Common</mat-label>\r\n                        <br>\r\n                        <mat-radio-group formControlName=\"commonChildrenFlag\" [(ngModel)]=\"editVictim.commonChildrenFlag\"  (change)=\"radioCicChange($event)\">\r\n                            <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                            <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                          </mat-radio-group>\r\n                          <input matInput placeholder=\"\" style=\"display: none\">\r\n                        </mat-form-field>\r\n\r\n                       <div  *ngIf=\"commonChildrenDivFlag\">\r\n                   \r\n                          <mat-form-field >\r\n                            <mat-label>\r\n                              Children number\r\n                             </mat-label>\r\n                              <input matInput  formControlName=\"commonChildrenNumber\" [(ngModel)]=\"editVictim.commonChildrenNumber\" >\r\n                            </mat-form-field>\r\n                   \r\n                  </div>\r\n   \r\n                      <mat-form-field>\r\n                        <mat-label>CPO: </mat-label>\r\n                        <br>\r\n                          <mat-radio-group formControlName=\"cpoExpirationFlag\"  [(ngModel)]=\"editVictim.cpoExpirationFlag\" (change)=\"radioCpoChange($event)\">\r\n                              <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                              <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                            </mat-radio-group>\r\n                            <input matInput placeholder=\"\" style=\"display: none\">\r\n                          </mat-form-field>\r\n                      \r\n                      <div *ngIf=\"cpoExpirationDivFlag\"> \r\n                          <mat-form-field>\r\n                            <mat-label>Expiration Date: </mat-label>\r\n                               <input matInput \r\n                               [matDatepicker]=\"cpoDateRef\" \r\n                               formControlName=\"cpoExpirationDate\" \r\n                              (click)=\"cpoDateRef.open()\"  \r\n                              [(ngModel)]=\"editVictim.cpoExpirationDate\"  >\r\n                              <mat-datepicker-toggle [for]=\"cpoDateRef\" matSuffix></mat-datepicker-toggle>\r\n                              <mat-datepicker #cpoDateRef></mat-datepicker>\r\n                            </mat-form-field>\r\n\r\n                      </div>\r\n                    \r\n                    <br>\r\n                    <br>\r\n     \r\n                          <mat-form-field>\r\n                            <mat-label>Victim has a Support System in Place? </mat-label>\r\n                             <br>\r\n                            <mat-radio-group formControlName=\"supportInPlaceFlag\" [(ngModel)]=\"editVictim.supportInPlaceFlag\"  (change)=\"radioSupportChange($event)\">\r\n                                <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                              </mat-radio-group>\r\n                              <input matInput placeholder=\"\" style=\"display: none\">\r\n                            </mat-form-field>\r\n                     \r\n                        <div *ngIf=\"supportInPlaceDivFlag\"> \r\n                            <mat-form-field>\r\n                              <mat-label>Support type? </mat-label>\r\n                                <mat-select #supportSel formControlName=\"victimSupports\" [(ngModel)]=\"editVictim.victimSupports\" multiple>\r\n                                  <div (mouseleave)=\"supportSel.close()\">\r\n                                    <mat-option color=\"primary\" *ngFor=\"let item of victimSupportTypes\" [value]=\"item.victimSupportTypeId\">\r\n                                      {{item.name}}\r\n                                    </mat-option>\r\n                                 </div>\r\n                                </mat-select>\r\n                                <input matInput placeholder=\"\" style=\"display: none\">\r\n                              </mat-form-field>\r\n\r\n                        </div>\r\n                      \r\n                      <br>\r\n                      <br>\r\n\r\n                            <mat-form-field>\r\n                              <mat-label>Weapons Involved?</mat-label>\r\n                              <br>\r\n                              <mat-radio-group formControlName=\"weaponInvolvedFlag\" (change)=\"radioWeaponChange($event)\" [(ngModel)]=\"editVictim.weaponInvolvedFlag\" >\r\n                                  <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                  <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                                </mat-radio-group>\r\n                                <input matInput placeholder=\"\" style=\"display: none\">\r\n                            </mat-form-field>\r\n                            \r\n                       \r\n                          <div *ngIf=\"weaponInvolvedDivFlag\"> \r\n                              <mat-form-field>\r\n                                <mat-label>Weapon Type</mat-label>\r\n                                  <mat-select  #weaponSel formControlName=\"victimWeaponUses\" multiple [(ngModel)]=\"editVictim.victimWeaponUses\" (selectionChange)=\"checkOtherWeapon($event.value)\" >\r\n                                    <div (mouseleave)=\"weaponSel.close()\">\r\n                                      <mat-option color=\"primary\" *ngFor=\"let item of weaponTypes\" [value]=\"item.weaponTypeId\">\r\n                                        {{item.name}}\r\n                                      </mat-option>\r\n                                    </div>\r\n                                  </mat-select>\r\n                                  <input matInput placeholder=\"\" style=\"display: none\">\r\n                                </mat-form-field>\r\n                          </div>\r\n\r\n                          <div *ngIf=\"otherWeaponFlag\"> \r\n                             <mat-form-field>\r\n                              <mat-label>Other Weapon:* </mat-label>\r\n                              <input matInput  formControlName=\"otherWeapon\" >\r\n                              </mat-form-field>\r\n                              <div class=\"help-block\" *ngIf=\"victimForm.get('otherWeapon').errors \r\n                              && (victimForm.get('otherWeapon').dirty || victimForm.get('otherWeapon').touched)\">\r\n                              <mat-error><strong>Other weapon is required.</strong></mat-error>\r\n                              </div>\r\n                          </div>\r\n\r\n             \r\n                        <br>\r\n                        <br>\r\n \r\n                              <mat-form-field>\r\n                                <mat-label>Was Offender under the influence of alcohol at the time of the offense?</mat-label>\r\n                                <br>\r\n                                <mat-radio-group formControlName=\"alcoholUseFlag\" [(ngModel)]=\"editVictim.alcoholUseFlag\" >\r\n                                    <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                    <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                                  </mat-radio-group>\r\n                                  <input matInput placeholder=\"\" style=\"display: none\">\r\n                                </mat-form-field>\r\n                      \r\n                          <br>\r\n                          <br>\r\n\r\n                                <mat-form-field>\r\n                                  <mat-label>Was Offender under the influence of drugs at the time of the offense?</mat-label>\r\n                                  <br>\r\n                                  <mat-radio-group formControlName=\"drugUseFlag\" (change)=\"radioDrugChange($event)\" [(ngModel)]=\"editVictim.drugUseFlag\"  >\r\n                                      <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                      <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                                    </mat-radio-group>\r\n                                    <input matInput placeholder=\"\" style=\"display: none\">\r\n                                  </mat-form-field>\r\n                            \r\n                              <div *ngIf=\"drugUseDivFlag\"> \r\n                                  <mat-form-field>\r\n                                    <mat-label>Drug:</mat-label>\r\n                                      <mat-select  #drugSel formControlName=\"victimDrugUses\" multiple   (selectionChange)=\"checkOtherDrug($event.value)\" >\r\n                                        <div (mouseleave)=\"drugSel.close()\">\r\n                                            <mat-option color=\"primary\" *ngFor=\"let item of drugs\" [value]=\"item.drugTypeId\">\r\n                                            {{item.name}}\r\n                                          </mat-option>\r\n                                         \r\n                                        </div>\r\n                                      </mat-select>\r\n                                      <input matInput placeholder=\"\" style=\"display: none\">\r\n                                    </mat-form-field>\r\n    \r\n                              </div>\r\n\r\n                              <div *ngIf=\"otherDrugFlag\"> \r\n                                <mat-form-field>\r\n                                 <mat-label>Other Drug:* </mat-label>\r\n                                 <input matInput  formControlName=\"otherDrug\" >\r\n                                 </mat-form-field>\r\n                                 <div class=\"help-block\" *ngIf=\"victimForm.get('otherDrug').errors \r\n                                 && (victimForm.get('otherDrug').dirty || victimForm.get('otherDrug').touched)\">\r\n                                 <mat-error><strong>Other drug is required.</strong></mat-error>\r\n                                 </div>\r\n                             </div>\r\n                            <br>\r\n                            <br>\r\n\r\n                            <div>\r\n                                <div>\r\n                                <mat-label>\r\n                                  Access Risk: 1 thru 10 (10 greatest risk): &nbsp;<b> {{editVictim.accessRisk}}</b>\r\n                                </mat-label>\r\n                                </div>\r\n                                <div>\r\n                               \r\n                                    <mat-slider\r\n                                    formControlName=\"accessRisk\"\r\n                                    thumbLabel=\"true\"\r\n                                    [displayWith]=\"formatLabel\"\r\n                                    min=\"1\"\r\n                                    max=\"10\"\r\n                                    [(ngModel)]=\"editVictim.accessRisk\" \r\n                                    ></mat-slider>\r\n                                  \r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                          </mat-card>  \r\n\r\n \r\n              <br><br><br>           \r\n            </mat-tab>\r\n            \r\n           <mat-tab  *ngIf=\"guardianTabFlag\" label=\"Legal Guardian\">\r\n            <div class='container'>\r\n              <mat-form-field>\r\n                  <mat-label>Guardian Last Name:</mat-label>\r\n                  <input matInput formControlName=\"guardianLastName\" [(ngModel)]=\"editVictim.guardianLastName\" > \r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('guardianLastName').errors \">\r\n                    <mat-error>Guardian last name is <strong>required</strong></mat-error>\r\n                  </div> \r\n                </mat-form-field>\r\n\r\n               <mat-form-field>\r\n                <mat-label>Guardian First Name:</mat-label>\r\n                  <input matInput  formControlName=\"guardianFirstName\" [(ngModel)]=\"editVictim.guardianFirstName\" >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('guardianFirstName').errors \">\r\n                    <mat-error>Guardian first name is <strong>required</strong></mat-error>\r\n                  </div> \r\n                \r\n                </mat-form-field>\r\n                              \r\n              <mat-form-field>\r\n                <mat-label>Guardian Prefix:</mat-label>\r\n                  <mat-select  formControlName=\"guardianPrefixId\" [(ngModel)]=\"editVictim.guardianPrefixId\" >\r\n                    <mat-option *ngFor=\"let item of prefixes\" [value]=\"item.prefixId\">{{item.name}}</mat-option>\r\n                  </mat-select>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field>\r\n                <mat-label>Guardian Suffix:</mat-label>\r\n                  <mat-select  formControlName=\"guardianSuffixId\" [(ngModel)]=\"editVictim.guardianSuffixId\"  >\r\n                    <mat-option *ngFor=\"let item of suffixes\" [value]=\"item.suffixId\">{{item.name}}</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n\r\n              \r\n                <!-- <mat-form-field>\r\n                    <mat-select placeholder=\"Choose\" formControlName=\"guardianGender\" [(ngModel)]=\"editVictim.guardianGender\">\r\n                      <mat-option *ngFor=\"let item of genders\" [value]=\"item.genderCode\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                  </mat-form-field> -->\r\n             \r\n                \r\n                <mat-form-field>\r\n                  <mat-label>Date of Birth:</mat-label>\r\n                     <input matInput \r\n                     [matDatepicker]=\"guardianDateRef\" \r\n                     formControlName=\"guardianBirthDate\"\r\n                     [(ngModel)]=\"editVictim.guardianBirthDate\" \r\n                     (click)=\"guardianDateRef.open()\" \r\n                       >\r\n                    <mat-datepicker-toggle [for]=\"guardianDateRef\" matSuffix></mat-datepicker-toggle>\r\n                    <mat-datepicker #guardianDateRef></mat-datepicker>\r\n                </mat-form-field>\r\n\r\n                <div></div>\r\n                  <mat-form-field >\r\n                  <mat-checkbox \r\n                  color = \"primary\" \r\n                  formControlName=\"guardianNoPhoneFlag\" \r\n                 \r\n                  >\r\n                  No Phone (If there is no phone, the phone fields are no longer required)</mat-checkbox>\r\n                  <input matInput placeholder=\"\" style=\"display: none;\">\r\n                </mat-form-field>\r\n\r\n\r\n                <div></div>\r\n                <mat-card>\r\n                <mat-form-field >\r\n                  <mat-label>Guardian Home Phone:</mat-label>\r\n                    <input matInput   \r\n                    formControlName=\"guardianHomePhone\" \r\n                    [(ngModel)]=\"editVictim.guardianHomePhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\" >\r\n                   \r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianHomePhone').errors \r\n                    && (victimForm.get('guardianHomePhone').dirty || victimForm.get('guardianHomePhone').touched)\">\r\n                    <mat-error><strong>Guardian home phone number format is not correct.</strong></mat-error>\r\n                  </div>\r\n               \r\n\r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Guardian Cell Phone:</mat-label>\r\n                    <input matInput  \r\n                    formControlName=\"guardianCellPhone\" \r\n                    [(ngModel)]=\"editVictim.guardianCellPhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\" \r\n                   >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianCellPhone').errors \r\n                     && (victimForm.get('guardianCellPhone').dirty || victimForm.get('guardianCellPhone').touched)\">\r\n                    <mat-error><strong>Guardian Cell phone number format is not correct.</strong></mat-error>\r\n                    </div>\r\n\r\n                 \r\n\r\n                    \r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Guardian Work Phone:</mat-label>\r\n                    <input matInput  \r\n                    formControlName=\"guardianWorkPhone\" \r\n                    [(ngModel)]=\"editVictim.guardianWorkPhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\" >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianWorkPhone').errors \r\n                       && (victimForm.get('guardianWorkPhone').dirty || victimForm.get('guardianWorkPhone').touched)\">\r\n                       <mat-error><strong>Guardian work phone number format is not correct.</strong></mat-error>\r\n                    </div>\r\n                  \r\n                    \r\n                </mat-form-field>\r\n              </mat-card>\r\n               \r\n              <div></div>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Guardian Email:</mat-label>\r\n                    <input matInput formControlName=\"guardianEmail\" [(ngModel)]=\"editVictim.guardianEmail\"  >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianEmail').errors \r\n                    && (victimForm.get('guardianEmail').dirty || victimForm.get('guardianEmail').touched)\">\r\n                   <mat-error><strong>Guardian email format is not correct.</strong></mat-error>\r\n                   </div>\r\n                </mat-form-field>\r\n\r\n                <div></div>\r\n               \r\n                <div>\r\n                <app-smart-address \r\n\r\n                [showPsa]=\"true\" \r\n                [modifiedBy]=\"staffId\" \r\n                [id]=\"guardianAddressId\"\r\n                (addressIdChange)=\"onGuardianAddressChange($event)\"\r\n                [outline]=\"true\" \r\n                readonly=\"false\"\r\n                [rowHeight]=\"80\" \r\n                (isValid)=\"false\" \r\n                [addressValidators]=\"addressValidators\"\r\n                #guardianAddressComponent\r\n                >\r\n                </app-smart-address>\r\n                </div>\r\n              </div>\r\n                          \r\n              <br><br><br> \r\n            </mat-tab>\r\n                        \r\n            <!--advocate-->\r\n            \r\n              <mat-tab  *ngIf=\"advocateTabFlag\" label=\"Advocate\" > \r\n                <div class='container'>\r\n                \r\n                <mat-form-field>\r\n                  <mat-label>Advocate Last Name:</mat-label>\r\n                    <input matInput  formControlName=\"advocateLastName\" [(ngModel)]=\"editVictim.advocateLastName\"  >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateLastName').errors \">\r\n                      <mat-error>Advocate last name is <strong>required</strong></mat-error>\r\n                    </div> \r\n                 </mat-form-field>\r\n                   \r\n                <mat-form-field>\r\n                  <mat-label>Advocate First Name:</mat-label>\r\n                    <input matInput  formControlName=\"advocateFirstName\" [(ngModel)]=\"editVictim.advocateFirstName\"  >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateFirstName').errors \">\r\n                      <mat-error>Advocate first name is <strong>required</strong></mat-error>\r\n                    </div> \r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Advocate Prefix:</mat-label>\r\n                    <mat-select  formControlName=\"advocatePrefixId\"  [(ngModel)]=\"editVictim.advocatePrefixId\" >\r\n                      <mat-option *ngFor=\"let item of prefixes\" [value]=\"item.prefixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Advocate Suffix:</mat-label>\r\n                    <mat-select  formControlName=\"advocateSuffixId\" [(ngModel)]=\"editVictim.advocateSuffixId\"  >\r\n                      <mat-option *ngFor=\"let item of suffixes\" [value]=\"item.suffixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n               \r\n                <mat-form-field>\r\n                  <mat-checkbox  \r\n                  color = \"primary\" \r\n                  formControlName=\"advocateNoPhoneFlag\" \r\n                 \r\n                  [(ngModel)]=\"editVictim.advocateNoPhoneFlag\" >\r\n                  No Phone (If there is no phone, the phone fields are no longer required)</mat-checkbox>\r\n                  <input matInput placeholder=\"\" style=\"display: none;\">\r\n                </mat-form-field>\r\n\r\n                <div></div> \r\n                <mat-card> \r\n                <mat-form-field >\r\n                  <mat-label>Advocate Home Phone:</mat-label>\r\n                    <input matInput   \r\n                    formControlName=\"advocateHomePhone\" \r\n                    [(ngModel)]=\"editVictim.advocateHomePhone\"\r\n                    phoneMask\r\n                    maxlength=\"14\" >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateHomePhone').errors \r\n                    && (victimForm.get('advocateHomePhone').dirty || victimForm.get('advocateHomePhone').touched)\">\r\n                    <mat-error><strong>Advocate home number format is not correct.</strong></mat-error>\r\n                  </div>\r\n                \r\n                </mat-form-field>\r\n    \r\n                <mat-form-field>\r\n                  <mat-label>Advocate Cell Phone:</mat-label>\r\n                    <input matInput  \r\n                    formControlName=\"advocateCellPhone\" \r\n                    [(ngModel)]=\"editVictim.advocateCellPhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\">\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateCellPhone').errors \r\n                    && (victimForm.get('advocateCellPhone').dirty || victimForm.get('advocateCellPhone').touched)\">\r\n                    <mat-error><strong>Advocate cell number format is not correct.</strong></mat-error>\r\n                  </div>\r\n\r\n                \r\n                </mat-form-field> \r\n\r\n                <mat-form-field>\r\n                  <mat-label>Advocate Work Phone:</mat-label>\r\n                    <input matInput  \r\n                     formControlName=\"advocateWorkPhone\" \r\n                     [(ngModel)]=\"editVictim.advocateWorkPhone\" \r\n                     phoneMask\r\n                     maxlength=\"14\"\r\n                     >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateWorkPhone').errors \r\n                    && (victimForm.get('advocateWorkPhone').dirty || victimForm.get('advocateWorkPhone').touched)\">\r\n                    <mat-error><strong>Advocate work number format is not correct.</strong></mat-error>\r\n                  </div>\r\n               \r\n                </mat-form-field>\r\n                </mat-card>\r\n\r\n                <div></div>\r\n        \r\n                <mat-form-field>\r\n                  <mat-label>Advocate Email:</mat-label>\r\n                    <input matInput formControlName=\"advocateEmail\"  [(ngModel)]=\"editVictim.advocateEmail\" >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateEmail').errors \r\n                    && (victimForm.get('advocateEmail').dirty || victimForm.get('advocateEmail').touched)\">\r\n                    <mat-error><strong>Advocate email format is not correct.</strong></mat-error>\r\n                  </div>\r\n                </mat-form-field>\r\n\r\n                <div></div>\r\n\r\n             \r\n              <div >\r\n              <app-smart-address \r\n              [showPsa]=\"true\" \r\n              [modifiedBy]=\"staffId\" \r\n              [id]=\"advocateAddressId\"\r\n              (addressIdChange)=\"onAdvocateAddressChange($event)\"\r\n              [outline]=\"true\" \r\n              readonly=\"false\"\r\n              [rowHeight]=\"80\" \r\n              (isValid)=\"false\" \r\n              [addressValidators]=\"addressValidators\"\r\n              #advocateAddressComponent >\r\n              </app-smart-address>\r\n              </div>\r\n              </div>\r\n              <br><br><br> \r\n            </mat-tab>\r\n           \r\n            \r\n             <mat-tab  label=\"Emergency Contact\">\r\n                <div class='container'>\r\n            \r\n                        <mat-form-field>\r\n                          <mat-label>Emergency Contact Name:</mat-label>\r\n                            <input matInput  formControlName=\"emergencyContact\" [(ngModel)]=\"editVictim.emergencyContact\"  >\r\n                          </mat-form-field>\r\n\r\n                          <mat-form-field>\r\n                            <mat-label>Emergency Phone Number:</mat-label>\r\n                              <input matInput   formControlName=\"emergencyContactPhone\"  [(ngModel)]=\"editVictim.emergencyContactPhone\" >\r\n                              <div class=\"help-block\" *ngIf=\"victimForm.get('emergencyContactPhone').errors \r\n                              && (victimForm.get('emergencyContactPhone').dirty || victimForm.get('emergencyContactPhone').touched)\">\r\n                              <mat-error><strong>Emergency contact number format is not correct.</strong></mat-error>\r\n                            </div>\r\n                            </mat-form-field>\r\n\r\n                </div>\r\n                <br><br><br>    \r\n            </mat-tab> \r\n          \r\n          </mat-tab-group>\r\n          <div class='outer'>\r\n            <div>\r\n               All buttons apply to all tabs. If save button is grey, please check each tab to make sure the required field is filled.<br><br>\r\n\r\n               <div class=\"help-block\" *ngIf=\"victimForm.get('minorFlag').errors \r\n                    && (victimForm.get('minorFlag').dirty || victimForm.get('minorFlag').touched)\">\r\n                    <mat-error>If victim a minor field is <strong>required</strong></mat-error>\r\n              </div>\r\n              \r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('victimAdvocateFlag').errors \r\n              && (victimForm.get('victimAdvocateFlag').dirty || victimForm.get('victimAdvocateFlag').touched)\">\r\n              <mat-error>If victim has advocate field is <strong>required</strong></mat-error>\r\n              </div> \r\n              \r\n               <div class=\"help-block\" *ngIf=\"victimForm.get('underSupervisionFlag').errors \r\n              && (victimForm.get('underSupervisionFlag').dirty || victimForm.get('underSupervisionFlag').touched)\">\r\n              <mat-error>Under supervision field is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('victimOffenderRelationshipTypeId').errors \r\n              && (victimForm.get('victimOffenderRelationshipTypeId').dirty || victimForm.get('victimOffenderRelationshipTypeId').touched)\">\r\n              <mat-error>Relationship is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('lastName').errors \r\n              && (victimForm.get('lastName').dirty || victimForm.get('lastName').touched)\">\r\n              <mat-error>Victim last name is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('firstName').errors \r\n              && (victimForm.get('firstName').dirty || victimForm.get('firstName').touched)\">\r\n              <mat-error>victim first name is <strong>required</strong></mat-error>\r\n             </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('guardianFirstName').errors \r\n              && (victimForm.get('guardianFirstName').dirty || victimForm.get('guardianFirstName').touched)\">\r\n                <mat-error>Guardian first name is <strong>required</strong></mat-error>\r\n              </div>\r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('guardianLastName').errors\r\n             && (victimForm.get('guardianLastName').dirty || victimForm.get('guardianLastName').touched)\" >\r\n              <mat-error>Guardian last name is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('advocateLastName').errors\r\n                && (victimForm.get('advocateLastName').dirty || victimForm.get('advocateLastName').touched)\" >\r\n                  <mat-error>Advocate last name is <strong>required</strong></mat-error>\r\n                  </div> \r\n    \r\n                <div class=\"help-block\" *ngIf=\"victimForm.get('advocateFirstName').errors\r\n                && (victimForm.get('advocateFirstName').dirty || victimForm.get('advocateFirstName').touched)\">\r\n                  <mat-error>Advocate first name is <strong>required</strong></mat-error>\r\n                </div>\r\n\r\n              \r\n                <div class=\"help-block\" *ngIf=\"victimForm.get('otherWeapon').errors \r\n                    && (victimForm.get('otherWeapon').dirty || victimForm.get('otherWeapon').touched)\">\r\n                    <mat-error>Other weapon field is <strong>required</strong></mat-error>\r\n              </div>\r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('otherDrug').errors \r\n              && (victimForm.get('otherDrug').dirty || victimForm.get('otherDrug').touched)\">\r\n              <mat-error>Other drug field is <strong>required</strong></mat-error>\r\n             </div>\r\n\r\n\r\n            </div>\r\n              \r\n                  <div class=\"inner\">\r\n                     <button  mat-raised-button color=\"primary\" (click)=\"saveVictim()\" [disabled]=\"!victimForm.valid\"  >Save </button> \r\n                  </div>\r\n                  &nbsp;&nbsp;\r\n                  <div *ngIf=\"showDelete\" class=\"inner\">\r\n                  <button  mat-raised-button color=\"primary\" (click)=\"deleteVictim()\">Delete </button>\r\n                 </div>\r\n                  &nbsp;&nbsp; \r\n                  <div class=\"inner\">\r\n                  <button  mat-raised-button color=\"primary\" (click)=\"cancel()\">Clear </button>\r\n                </div>\r\n                  &nbsp;&nbsp; \r\n                  <button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n\r\n            </div>\r\n\r\n        </div>\r\n        <br>\r\n        <br>\r\n\r\n        <div align=\"right\">\r\n          <button mat-raised-button color=\"primary\"  (click)=\"addContact()\"  >Add victim contact</button>\r\n        </div>\r\n        \r\n        <div>\r\n\r\n          <mat-table #table [dataSource]=\"contactDataSource\" class=\"example-table\">\r\n            <ng-container matColumnDef=\"contactDate\">\r\n                <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Date</mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.contactDate | date}} </mat-cell>\r\n            </ng-container>\r\n\r\n\r\n            <ng-container matColumnDef=\"victimContactMethod\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Method</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.victimContactMethod}} </mat-cell>\r\n            </ng-container>\r\n\r\n            <ng-container matColumnDef=\"nextContactDate\">\r\n              <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Next Contact Date</mat-header-cell>\r\n              <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.nextContactDate | date}} </mat-cell>\r\n            </ng-container>\r\n            \r\n        \r\n            <ng-container matColumnDef=\"staff\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact By</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.staff}} </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"comment\">\r\n                            <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Comment</mat-header-cell>\r\n                            <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.comment}} </mat-cell>\r\n                    </ng-container>\r\n\r\n            <ng-container matColumnDef=\"contactId\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\"></mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"example-cell\">\r\n                  \r\n                </mat-cell>\r\n            </ng-container>\r\n\r\n            <mat-header-row *matHeaderRowDef=\"['contactDate', 'victimContactMethod','nextContactDate', 'staff', 'comment', 'contactId']\" class=\"example-header-row\"></mat-header-row>\r\n            <mat-row *matRowDef=\"let row; columns:['contactDate', 'victimContactMethod','nextContactDate', 'staff', 'comment', 'contactId'];\" class=\"example-row\"></mat-row>\r\n            </mat-table>\r\n\r\n\r\n        </div>\r\n  \r\n  </mat-card-content>\r\n</mat-card>\r\n",
+                template: "<mat-card>\r\n  <mat-card-content>\r\n\r\n        <div  [formGroup]=\"victimForm\">\r\n\r\n          <mat-tab-group dynamicHeight  mat-stretch-tabs>\r\n            <mat-tab label=\"Victim Detail\" >\r\n              <div class='container'>\r\n\r\n                    <mat-form-field>\r\n                      <mat-label>Is victim a minor?<font color=\"red\">* </font></mat-label>\r\n                      <br>\r\n                      <mat-radio-group  formControlName=\"minorFlag\"  (change)=\"radioMinorChange($event)\" [(ngModel)]=\"editVictim.minorFlag\" >\r\n                      <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                      <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                    </mat-radio-group>\r\n                    <input matInput placeholder=\"\" style=\"display: none\">\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('minorFlag').errors \r\n                    && (victimForm.get('minorFlag').dirty || victimForm.get('minorFlag').touched)\">\r\n                    <mat-error>If victim a minor field is <strong>required</strong></mat-error>\r\n                    </div> \r\n\r\n                  </mat-form-field>\r\n                 \r\n                  <mat-form-field>\r\n                    <mat-label>Does the Victim have a Victim Advocate or Social Worker with <br>whom CSOSA should maintain contact?<font color=\"red\">* </font></mat-label>\r\n                    <br>\r\n                    <br>\r\n                    <mat-radio-group class = \"tp-radio-group\"  formControlName=\"victimAdvocateFlag\"  (change)=\"radioAdvocateChange($event)\" [(ngModel)]=\"editVictim.victimAdvocateFlag\">\r\n                      <mat-radio-button  color=\"primary\" *ngFor=\"let item of flagOption\" [value]=\"item.flagOptionYesNoUnknownId\">{{item.name}} </mat-radio-button>&nbsp;\r\n                    </mat-radio-group>\r\n                    <input matInput placeholder=\"\" style=\"display: none\">\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('victimAdvocateFlag').errors \r\n                    && (victimForm.get('victimAdvocateFlag').dirty || victimForm.get('victimAdvocateFlag').touched)\">\r\n                    <mat-error>If victim has advocate field is <strong>required</strong></mat-error>\r\n                    </div> \r\n                  </mat-form-field>\r\n              \r\n \r\n               <mat-form-field>\r\n                  <mat-label>Victim Currently Under Supervision:</mat-label>\r\n                    <mat-select  formControlName=\"underSupervisionFlag\" name=\"supervision\" [(ngModel)]=\"editVictim.underSupervisionFlag\" >\r\n                      <mat-option *ngFor=\"let item of flagOption\" [value]=\"item.flagOptionYesNoUnknownId\" >\r\n                        {{item.name}}</mat-option>\r\n                    </mat-select>\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('underSupervisionFlag').errors \r\n                    && (victimForm.get('underSupervisionFlag').dirty || victimForm.get('underSupervisionFlag').touched)\">\r\n                    <mat-error>under supervision field is <strong>required</strong></mat-error>\r\n                    </div> \r\n                </mat-form-field>\r\n               \r\n             \r\n               <mat-form-field>\r\n                  <mat-label>Relationship to Offender:</mat-label>\r\n                    <mat-select formControlName=\"victimOffenderRelationshipTypeId\" [(ngModel)]=\"editVictim.victimOffenderRelationshipTypeId\"  >\r\n                      <mat-option *ngFor=\"let item of relationshipTypes\" [value]=\"item.relationshipTypeId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('victimOffenderRelationshipTypeId').errors \r\n                    && (victimForm.get('victimOffenderRelationshipTypeId').dirty || victimForm.get('victimOffenderRelationshipTypeId').touched)\">\r\n                    <mat-error>relationship is <strong>required</strong></mat-error>\r\n                    </div> \r\n                </mat-form-field>\r\n             \r\n                 \r\n                <mat-form-field>\r\n                  <mat-label>Victim Last Name:</mat-label>\r\n                  <input matInput formControlName=\"lastName\"  [(ngModel)]=\"editVictim.lastName\" >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('lastName').errors \r\n                  && (victimForm.get('lastName').dirty || victimForm.get('lastName').touched)\">\r\n                  <mat-error>victim last name is <strong>required</strong></mat-error>\r\n                  </div> \r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim First Name: </mat-label>\r\n                  <input matInput  formControlName=\"firstName\" [(ngModel)]=\"editVictim.firstName\"  >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('firstName').errors \r\n                  && (victimForm.get('firstName').dirty || victimForm.get('firstName').touched)\">\r\n                  <mat-error>victim first name is <strong>required</strong></mat-error>\r\n                 </div> \r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim Middle Name:</mat-label>\r\n                    <input matInput  formControlName=\"middleName\" [(ngModel)]=\"editVictim.middleName\">\r\n                </mat-form-field>\r\n                             \r\n                <mat-form-field>\r\n                  <mat-label>Victim Prefix:</mat-label>\r\n                    <mat-select  formControlName=\"prefixId\" [(ngModel)]=\"editVictim.prefixId\">\r\n                      <mat-option *ngFor=\"let item of prefixes\" [value]=\"item.prefixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim Suffix:</mat-label>\r\n                    <mat-select  formControlName=\"suffixId\"  [(ngModel)]=\"editVictim.suffixId\">\r\n                      <mat-option *ngFor=\"let item of suffixes\" [value]=\"item.suffixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n  \r\n                <mat-form-field>\r\n                  <mat-label>Victim Gender:</mat-label>\r\n                  <mat-select  formControlName=\"genderCode\" [(ngModel)]=\"editVictim.genderCode\">\r\n                    <mat-option *ngFor=\"let item of genders\" [value]=\"item.genderCode\">{{item.name}}</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n                             \r\n                <mat-form-field>\r\n                  <mat-label>Date of Birth:</mat-label>\r\n                   <input matInput \r\n                   [matDatepicker]=\"victimBirthRef\" \r\n                   formControlName=\"birthDate\"\r\n                  [(ngModel)]=\"editVictim.birthDate\"\r\n                  (click)=\"victimBirthRef.open()\"\r\n                  (dateChange)=\"handleDOBChange($event)\"  \r\n                    >\r\n                  <mat-datepicker-toggle [for]=\"victimBirthRef\" matSuffix></mat-datepicker-toggle>\r\n                  <mat-datepicker #victimBirthRef></mat-datepicker>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Victim Home Phone:</mat-label>\r\n                    <input \r\n                    matInput \r\n                    formControlName=\"homePhone\" \r\n                    [(ngModel)]=\"editVictim.homePhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\"/>\r\n\r\n\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('homePhone').errors\r\n                  && (victimForm.get('homePhone').dirty || victimForm.get('homePhone').touched)\">\r\n\r\n\r\n                  <mat-error><strong>Home phone number format is not correct.</strong></mat-error>\r\n                  </div>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Victim Cell Phone:</mat-label>\r\n                  <input matInput  formControlName=\"cellPhone\" [(ngModel)]=\"editVictim.cellPhone\" >\r\n                      <div class=\"help-block\" *ngIf=\"victimForm.get('cellPhone').errors \r\n                  && (victimForm.get('cellPhone').dirty || victimForm.get('cellPhone').touched)\">\r\n                   <mat-error><strong>Cell phone number format is not correct.</strong></mat-error>\r\n              </div>\r\n                </mat-form-field>\r\n\r\n               \r\n                <mat-form-field >\r\n                  <mat-label>Victim Work Phone:</mat-label>\r\n                  <input matInput  formControlName=\"workPhone\"  [(ngModel)]=\"editVictim.workPhone\" >\r\n                  <div class=\"help-block\" *ngIf=\"victimForm.get('workPhone').errors \r\n                  && (victimForm.get('workPhone').dirty || victimForm.get('workPhone').touched)\">\r\n                  <mat-error><strong>Work phone number format is not correct.</strong></mat-error>\r\n                  </div>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Victim Email:</mat-label>\r\n                   <input matInput  formControlName=\"email\" [(ngModel)]=\"editVictim.email\" >\r\n                   <div class=\"help-block\" *ngIf=\"victimForm.get('email').errors \r\n                  && (victimForm.get('email').dirty || victimForm.get('email').touched)\">\r\n                  <mat-error><strong>victim email format is not correct.</strong></mat-error>\r\n              </div>\r\n                </mat-form-field>\r\n  \r\n                <div></div>\r\n              \r\n                <!-- <app-smart-address \r\n                [showPsa]=\"true\" \r\n                [modifiedBy]=\"staffId\" \r\n                [id]=\"addressId\"\r\n                (addressIdChange)=\"onAddressChange($event)\"\r\n                [outline]=\"true\" \r\n                readonly=\"false\"\r\n                [rowHeight]=\"80\" \r\n                (isValid)=\"false\" \r\n                [addressValidators]=\"addressValidators\"\r\n                #addressComponent\r\n                > -->\r\n\r\n\r\n                <app-smart-address\r\n                [modifiedBy]=\"staffId\"\r\n                [id]=\"addressId\"\r\n                [outline]=\"true\"\r\n                [showPsa]=\"true\"\r\n                [addressValidators]=\"addressValidators\"\r\n                [readonly]=\"false\"\r\n                (addressIdChange)=\"onAddressChange($event)\"\r\n                #addressComponent\r\n              >\r\n\r\n                </app-smart-address>\r\n          \r\n               \r\n                  <!-- Docket: \r\n                  <div>\r\n                    <div  *ngFor=\"let docket of docketlist; let i=index\">\r\n                      <mat-checkbox >{{docket.docketNumber}}</mat-checkbox>\r\n                    </div>\r\n                  </div> -->\r\n\r\n                  <mat-checkbox  color=\"primary\" formControlName=\"allowCsosaContactFlag\" name=\"allowCsosaContactFlag\" [(ngModel)]=\"editVictim.allowCsosaContactFlag\">victim wants to be contacted by CSOSA</mat-checkbox>\r\n                                   \r\n                </div> \r\n\r\n                <mat-card>\r\n                      <mat-form-field>\r\n                        <mat-label> Children in Common</mat-label>\r\n                        <br>\r\n                        <mat-radio-group formControlName=\"commonChildrenFlag\" [(ngModel)]=\"editVictim.commonChildrenFlag\"  (change)=\"radioCicChange($event)\">\r\n                            <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                            <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                          </mat-radio-group>\r\n                          <input matInput placeholder=\"\" style=\"display: none\">\r\n                        </mat-form-field>\r\n\r\n                       <div  *ngIf=\"commonChildrenDivFlag\">\r\n                   \r\n                          <mat-form-field >\r\n                            <mat-label>\r\n                              Children number\r\n                             </mat-label>\r\n                              <input matInput  formControlName=\"commonChildrenNumber\" [(ngModel)]=\"editVictim.commonChildrenNumber\" >\r\n                            </mat-form-field>\r\n                   \r\n                  </div>\r\n   \r\n                      <mat-form-field>\r\n                        <mat-label>CPO: </mat-label>\r\n                        <br>\r\n                          <mat-radio-group formControlName=\"cpoExpirationFlag\"  [(ngModel)]=\"editVictim.cpoExpirationFlag\" (change)=\"radioCpoChange($event)\">\r\n                              <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                              <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                            </mat-radio-group>\r\n                            <input matInput placeholder=\"\" style=\"display: none\">\r\n                          </mat-form-field>\r\n                      \r\n                      <div *ngIf=\"cpoExpirationDivFlag\"> \r\n                          <mat-form-field>\r\n                            <mat-label>Expiration Date: </mat-label>\r\n                               <input matInput \r\n                               [matDatepicker]=\"cpoDateRef\" \r\n                               formControlName=\"cpoExpirationDate\" \r\n                              (click)=\"cpoDateRef.open()\"  \r\n                              [(ngModel)]=\"editVictim.cpoExpirationDate\"  >\r\n                              <mat-datepicker-toggle [for]=\"cpoDateRef\" matSuffix></mat-datepicker-toggle>\r\n                              <mat-datepicker #cpoDateRef></mat-datepicker>\r\n                            </mat-form-field>\r\n\r\n                      </div>\r\n                    \r\n                    <br>\r\n                    <br>\r\n     \r\n                          <mat-form-field>\r\n                            <mat-label>Victim has a Support System in Place? </mat-label>\r\n                             <br>\r\n                            <mat-radio-group formControlName=\"supportInPlaceFlag\" [(ngModel)]=\"editVictim.supportInPlaceFlag\"  (change)=\"radioSupportChange($event)\">\r\n                                <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                              </mat-radio-group>\r\n                              <input matInput placeholder=\"\" style=\"display: none\">\r\n                            </mat-form-field>\r\n                     \r\n                        <div *ngIf=\"supportInPlaceDivFlag\"> \r\n                            <mat-form-field>\r\n                              <mat-label>Support type? </mat-label>\r\n                                <mat-select #supportSel formControlName=\"victimSupports\" [(ngModel)]=\"editVictim.victimSupports\" multiple>\r\n                                  <div (mouseleave)=\"supportSel.close()\">\r\n                                    <mat-option color=\"primary\" *ngFor=\"let item of victimSupportTypes\" [value]=\"item.victimSupportTypeId\">\r\n                                      {{item.name}}\r\n                                    </mat-option>\r\n                                 </div>\r\n                                </mat-select>\r\n                                <input matInput placeholder=\"\" style=\"display: none\">\r\n                              </mat-form-field>\r\n\r\n                        </div>\r\n                      \r\n                      <br>\r\n                      <br>\r\n\r\n                            <mat-form-field>\r\n                              <mat-label>Weapons Involved?</mat-label>\r\n                              <br>\r\n                              <mat-radio-group formControlName=\"weaponInvolvedFlag\" (change)=\"radioWeaponChange($event)\" [(ngModel)]=\"editVictim.weaponInvolvedFlag\" >\r\n                                  <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                  <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                                </mat-radio-group>\r\n                                <input matInput placeholder=\"\" style=\"display: none\">\r\n                            </mat-form-field>\r\n                            \r\n                       \r\n                          <div *ngIf=\"weaponInvolvedDivFlag\"> \r\n                              <mat-form-field>\r\n                                <mat-label>Weapon Type</mat-label>\r\n                                  <mat-select  #weaponSel formControlName=\"victimWeaponUses\" multiple [(ngModel)]=\"editVictim.victimWeaponUses\" (selectionChange)=\"checkOtherWeapon($event.value)\" >\r\n                                    <div (mouseleave)=\"weaponSel.close()\">\r\n                                      <mat-option color=\"primary\" *ngFor=\"let item of weaponTypes\" [value]=\"item.weaponTypeId\">\r\n                                        {{item.name}}\r\n                                      </mat-option>\r\n                                    </div>\r\n                                  </mat-select>\r\n                                  <input matInput placeholder=\"\" style=\"display: none\">\r\n                                </mat-form-field>\r\n                          </div>\r\n\r\n                          <div *ngIf=\"otherWeaponFlag\"> \r\n                             <mat-form-field>\r\n                              <mat-label>Other Weapon:* </mat-label>\r\n                              <input matInput  formControlName=\"otherWeapon\" >\r\n                              </mat-form-field>\r\n                              <div class=\"help-block\" *ngIf=\"victimForm.get('otherWeapon').errors \r\n                              && (victimForm.get('otherWeapon').dirty || victimForm.get('otherWeapon').touched)\">\r\n                              <mat-error><strong>Other weapon is required.</strong></mat-error>\r\n                              </div>\r\n                          </div>\r\n\r\n             \r\n                        <br>\r\n                        <br>\r\n \r\n                              <mat-form-field>\r\n                                <mat-label>Was Offender under the influence of alcohol at the time of the offense?</mat-label>\r\n                                <br>\r\n                                <mat-radio-group formControlName=\"alcoholUseFlag\" [(ngModel)]=\"editVictim.alcoholUseFlag\" >\r\n                                    <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                    <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                                  </mat-radio-group>\r\n                                  <input matInput placeholder=\"\" style=\"display: none\">\r\n                                </mat-form-field>\r\n                      \r\n                          <br>\r\n                          <br>\r\n\r\n                                <mat-form-field>\r\n                                  <mat-label>Was Offender under the influence of drugs at the time of the offense?</mat-label>\r\n                                  <br>\r\n                                  <mat-radio-group formControlName=\"drugUseFlag\" (change)=\"radioDrugChange($event)\" [(ngModel)]=\"editVictim.drugUseFlag\"  >\r\n                                      <mat-radio-button color=\"primary\" [value]=\"true\">Yes</mat-radio-button>&nbsp;\r\n                                      <mat-radio-button color=\"primary\" [value]=\"false\">No</mat-radio-button>\r\n                                    </mat-radio-group>\r\n                                    <input matInput placeholder=\"\" style=\"display: none\">\r\n                                  </mat-form-field>\r\n                            \r\n                              <div *ngIf=\"drugUseDivFlag\"> \r\n                                  <mat-form-field>\r\n                                    <mat-label>Drug:</mat-label>\r\n                                      <mat-select  #drugSel formControlName=\"victimDrugUses\" multiple   (selectionChange)=\"checkOtherDrug($event.value)\" >\r\n                                        <div (mouseleave)=\"drugSel.close()\">\r\n                                            <mat-option color=\"primary\" *ngFor=\"let item of drugs\" [value]=\"item.drugTypeId\">\r\n                                            {{item.name}}\r\n                                          </mat-option>\r\n                                         \r\n                                        </div>\r\n                                      </mat-select>\r\n                                      <input matInput placeholder=\"\" style=\"display: none\">\r\n                                    </mat-form-field>\r\n    \r\n                              </div>\r\n\r\n                              <div *ngIf=\"otherDrugFlag\"> \r\n                                <mat-form-field>\r\n                                 <mat-label>Other Drug:* </mat-label>\r\n                                 <input matInput  formControlName=\"otherDrug\" >\r\n                                 </mat-form-field>\r\n                                 <div class=\"help-block\" *ngIf=\"victimForm.get('otherDrug').errors \r\n                                 && (victimForm.get('otherDrug').dirty || victimForm.get('otherDrug').touched)\">\r\n                                 <mat-error><strong>Other drug is required.</strong></mat-error>\r\n                                 </div>\r\n                             </div>\r\n                            <br>\r\n                            <br>\r\n\r\n                            <div>\r\n                                <div>\r\n                                <mat-label>\r\n                                  Access Risk: 1 thru 10 (10 greatest risk): &nbsp;<b> {{editVictim.accessRisk}}</b>\r\n                                </mat-label>\r\n                                </div>\r\n                                <div>\r\n                               \r\n                                    <mat-slider\r\n                                    formControlName=\"accessRisk\"\r\n                                    thumbLabel=\"true\"\r\n                                    [displayWith]=\"formatLabel\"\r\n                                    min=\"1\"\r\n                                    max=\"10\"\r\n                                    [(ngModel)]=\"editVictim.accessRisk\" \r\n                                    ></mat-slider>\r\n                                  \r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                          </mat-card>  \r\n\r\n \r\n              <br><br><br>           \r\n            </mat-tab>\r\n            \r\n           <mat-tab  *ngIf=\"guardianTabFlag\" label=\"Legal Guardian\">\r\n            <div class='container'>\r\n              <mat-form-field>\r\n                  <mat-label>Guardian Last Name:</mat-label>\r\n                  <input matInput formControlName=\"guardianLastName\" [(ngModel)]=\"editVictim.guardianLastName\" > \r\n                  <!-- <div class=\"help-block\" *ngIf=\"victimForm.get('guardianLastName').errors \">\r\n                    <mat-error>Guardian last name is <strong>required</strong></mat-error>\r\n                  </div>  -->\r\n                </mat-form-field>\r\n\r\n               <mat-form-field>\r\n                <mat-label>Guardian First Name:</mat-label>\r\n                  <input matInput  formControlName=\"guardianFirstName\" [(ngModel)]=\"editVictim.guardianFirstName\" >\r\n                  <!-- <div class=\"help-block\" *ngIf=\"victimForm.get('guardianFirstName').errors \">\r\n                    <mat-error>Guardian first name is <strong>required</strong></mat-error>\r\n                  </div>  -->\r\n                \r\n                </mat-form-field>\r\n                              \r\n              <mat-form-field>\r\n                <mat-label>Guardian Prefix:</mat-label>\r\n                  <mat-select  formControlName=\"guardianPrefixId\" [(ngModel)]=\"editVictim.guardianPrefixId\" >\r\n                    <mat-option *ngFor=\"let item of prefixes\" [value]=\"item.prefixId\">{{item.name}}</mat-option>\r\n                  </mat-select>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field>\r\n                <mat-label>Guardian Suffix:</mat-label>\r\n                  <mat-select  formControlName=\"guardianSuffixId\" [(ngModel)]=\"editVictim.guardianSuffixId\"  >\r\n                    <mat-option *ngFor=\"let item of suffixes\" [value]=\"item.suffixId\">{{item.name}}</mat-option>\r\n                  </mat-select>\r\n                </mat-form-field>\r\n\r\n              \r\n                <!-- <mat-form-field>\r\n                    <mat-select placeholder=\"Choose\" formControlName=\"guardianGender\" [(ngModel)]=\"editVictim.guardianGender\">\r\n                      <mat-option *ngFor=\"let item of genders\" [value]=\"item.genderCode\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                  </mat-form-field> -->\r\n             \r\n                \r\n                <mat-form-field>\r\n                  <mat-label>Date of Birth:</mat-label>\r\n                     <input matInput \r\n                     [matDatepicker]=\"guardianDateRef\" \r\n                     formControlName=\"guardianBirthDate\"\r\n                     [(ngModel)]=\"editVictim.guardianBirthDate\" \r\n                     (click)=\"guardianDateRef.open()\" \r\n                       >\r\n                    <mat-datepicker-toggle [for]=\"guardianDateRef\" matSuffix></mat-datepicker-toggle>\r\n                    <mat-datepicker #guardianDateRef></mat-datepicker>\r\n                </mat-form-field>\r\n\r\n                <div></div>\r\n                  <mat-form-field >\r\n                  <mat-checkbox \r\n                  color = \"primary\" \r\n                  formControlName=\"guardianNoPhoneFlag\" \r\n                 \r\n                  >\r\n                  No Phone (If there is no phone, the phone fields are no longer required)</mat-checkbox>\r\n                  <input matInput placeholder=\"\" style=\"display: none;\">\r\n                </mat-form-field>\r\n\r\n\r\n                <div></div>\r\n                <mat-card>\r\n                <mat-form-field >\r\n                  <mat-label>Guardian Home Phone:</mat-label>\r\n                    <input matInput   \r\n                    formControlName=\"guardianHomePhone\" \r\n                    [(ngModel)]=\"editVictim.guardianHomePhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\" >\r\n                   \r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianHomePhone').errors \r\n                    && (victimForm.get('guardianHomePhone').dirty || victimForm.get('guardianHomePhone').touched)\">\r\n                    <mat-error><strong>Guardian home phone number format is not correct.</strong></mat-error>\r\n                  </div>\r\n               \r\n\r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Guardian Cell Phone:</mat-label>\r\n                    <input matInput  \r\n                    formControlName=\"guardianCellPhone\" \r\n                    [(ngModel)]=\"editVictim.guardianCellPhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\" \r\n                   >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianCellPhone').errors \r\n                     && (victimForm.get('guardianCellPhone').dirty || victimForm.get('guardianCellPhone').touched)\">\r\n                    <mat-error><strong>Guardian Cell phone number format is not correct.</strong></mat-error>\r\n                    </div>\r\n\r\n                 \r\n\r\n                    \r\n                </mat-form-field>\r\n\r\n                <mat-form-field >\r\n                  <mat-label>Guardian Work Phone:</mat-label>\r\n                    <input matInput  \r\n                    formControlName=\"guardianWorkPhone\" \r\n                    [(ngModel)]=\"editVictim.guardianWorkPhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\" >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianWorkPhone').errors \r\n                       && (victimForm.get('guardianWorkPhone').dirty || victimForm.get('guardianWorkPhone').touched)\">\r\n                       <mat-error><strong>Guardian work phone number format is not correct.</strong></mat-error>\r\n                    </div>\r\n                  \r\n                    \r\n                </mat-form-field>\r\n              </mat-card>\r\n               \r\n              <div></div>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Guardian Email:</mat-label>\r\n                    <input matInput formControlName=\"guardianEmail\" [(ngModel)]=\"editVictim.guardianEmail\"  >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('guardianEmail').errors \r\n                    && (victimForm.get('guardianEmail').dirty || victimForm.get('guardianEmail').touched)\">\r\n                   <mat-error><strong>Guardian email format is not correct.</strong></mat-error>\r\n                   </div>\r\n                </mat-form-field>\r\n\r\n                <div></div>\r\n               \r\n                <div>\r\n                <app-smart-address \r\n\r\n                [showPsa]=\"true\" \r\n                [modifiedBy]=\"staffId\" \r\n                [id]=\"guardianAddressId\"\r\n                (addressIdChange)=\"onGuardianAddressChange($event)\"\r\n                [outline]=\"true\" \r\n                readonly=\"false\"\r\n                [rowHeight]=\"80\" \r\n                (isValid)=\"false\" \r\n                [addressValidators]=\"addressValidators\"\r\n                #guardianAddressComponent\r\n                >\r\n                </app-smart-address>\r\n                </div>\r\n              </div>\r\n                          \r\n              <br><br><br> \r\n            </mat-tab>\r\n                        \r\n            <!--advocate-->\r\n            \r\n              <mat-tab  *ngIf=\"advocateTabFlag\" label=\"Advocate\" > \r\n                <div class='container'>\r\n                \r\n                <mat-form-field>\r\n                  <mat-label>Advocate Last Name:</mat-label>\r\n                    <input matInput  formControlName=\"advocateLastName\" [(ngModel)]=\"editVictim.advocateLastName\"  >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateLastName').errors \">\r\n                      <mat-error>Advocate last name is <strong>required</strong></mat-error>\r\n                    </div> \r\n                 </mat-form-field>\r\n                   \r\n                <mat-form-field>\r\n                  <mat-label>Advocate First Name:</mat-label>\r\n                    <input matInput  formControlName=\"advocateFirstName\" [(ngModel)]=\"editVictim.advocateFirstName\"  >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateFirstName').errors \">\r\n                      <mat-error>Advocate first name is <strong>required</strong></mat-error>\r\n                    </div> \r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Advocate Prefix:</mat-label>\r\n                    <mat-select  formControlName=\"advocatePrefixId\"  [(ngModel)]=\"editVictim.advocatePrefixId\" >\r\n                      <mat-option *ngFor=\"let item of prefixes\" [value]=\"item.prefixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n                <mat-form-field>\r\n                  <mat-label>Advocate Suffix:</mat-label>\r\n                    <mat-select  formControlName=\"advocateSuffixId\" [(ngModel)]=\"editVictim.advocateSuffixId\"  >\r\n                      <mat-option *ngFor=\"let item of suffixes\" [value]=\"item.suffixId\">{{item.name}}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n\r\n               \r\n                <mat-form-field>\r\n                  <mat-checkbox  \r\n                  color = \"primary\" \r\n                  formControlName=\"advocateNoPhoneFlag\" \r\n                 \r\n                  [(ngModel)]=\"editVictim.advocateNoPhoneFlag\" >\r\n                  No Phone (If there is no phone, the phone fields are no longer required)</mat-checkbox>\r\n                  <input matInput placeholder=\"\" style=\"display: none;\">\r\n                </mat-form-field>\r\n\r\n                <div></div> \r\n                <mat-card> \r\n                <mat-form-field >\r\n                  <mat-label>Advocate Home Phone:</mat-label>\r\n                    <input matInput   \r\n                    formControlName=\"advocateHomePhone\" \r\n                    [(ngModel)]=\"editVictim.advocateHomePhone\"\r\n                    phoneMask\r\n                    maxlength=\"14\" >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateHomePhone').errors \r\n                    && (victimForm.get('advocateHomePhone').dirty || victimForm.get('advocateHomePhone').touched)\">\r\n                    <mat-error><strong>Advocate home number format is not correct.</strong></mat-error>\r\n                  </div>\r\n                \r\n                </mat-form-field>\r\n    \r\n                <mat-form-field>\r\n                  <mat-label>Advocate Cell Phone:</mat-label>\r\n                    <input matInput  \r\n                    formControlName=\"advocateCellPhone\" \r\n                    [(ngModel)]=\"editVictim.advocateCellPhone\" \r\n                    phoneMask\r\n                    maxlength=\"14\">\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateCellPhone').errors \r\n                    && (victimForm.get('advocateCellPhone').dirty || victimForm.get('advocateCellPhone').touched)\">\r\n                    <mat-error><strong>Advocate cell number format is not correct.</strong></mat-error>\r\n                  </div>\r\n\r\n                \r\n                </mat-form-field> \r\n\r\n                <mat-form-field>\r\n                  <mat-label>Advocate Work Phone:</mat-label>\r\n                    <input matInput  \r\n                     formControlName=\"advocateWorkPhone\" \r\n                     [(ngModel)]=\"editVictim.advocateWorkPhone\" \r\n                     phoneMask\r\n                     maxlength=\"14\"\r\n                     >\r\n\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateWorkPhone').errors \r\n                    && (victimForm.get('advocateWorkPhone').dirty || victimForm.get('advocateWorkPhone').touched)\">\r\n                    <mat-error><strong>Advocate work number format is not correct.</strong></mat-error>\r\n                  </div>\r\n               \r\n                </mat-form-field>\r\n                </mat-card>\r\n\r\n                <div></div>\r\n        \r\n                <mat-form-field>\r\n                  <mat-label>Advocate Email:</mat-label>\r\n                    <input matInput formControlName=\"advocateEmail\"  [(ngModel)]=\"editVictim.advocateEmail\" >\r\n                    <div class=\"help-block\" *ngIf=\"victimForm.get('advocateEmail').errors \r\n                    && (victimForm.get('advocateEmail').dirty || victimForm.get('advocateEmail').touched)\">\r\n                    <mat-error><strong>Advocate email format is not correct.</strong></mat-error>\r\n                  </div>\r\n                </mat-form-field>\r\n\r\n                <div></div>\r\n\r\n             \r\n              <div >\r\n              <app-smart-address \r\n              [showPsa]=\"true\" \r\n              [modifiedBy]=\"staffId\" \r\n              [id]=\"advocateAddressId\"\r\n              (addressIdChange)=\"onAdvocateAddressChange($event)\"\r\n              [outline]=\"true\" \r\n              readonly=\"false\"\r\n              [rowHeight]=\"80\" \r\n              (isValid)=\"false\" \r\n              [addressValidators]=\"addressValidators\"\r\n              #advocateAddressComponent >\r\n              </app-smart-address>\r\n              </div>\r\n              </div>\r\n              <br><br><br> \r\n            </mat-tab>\r\n           \r\n            \r\n             <mat-tab  label=\"Emergency Contact\">\r\n                <div class='container'>\r\n            \r\n                        <mat-form-field>\r\n                          <mat-label>Emergency Contact Name:</mat-label>\r\n                            <input matInput  formControlName=\"emergencyContact\" [(ngModel)]=\"editVictim.emergencyContact\"  >\r\n                          </mat-form-field>\r\n\r\n                          <mat-form-field>\r\n                            <mat-label>Emergency Phone Number:</mat-label>\r\n                              <input matInput   formControlName=\"emergencyContactPhone\"  [(ngModel)]=\"editVictim.emergencyContactPhone\" >\r\n                              <div class=\"help-block\" *ngIf=\"victimForm.get('emergencyContactPhone').errors \r\n                              && (victimForm.get('emergencyContactPhone').dirty || victimForm.get('emergencyContactPhone').touched)\">\r\n                              <mat-error><strong>Emergency contact number format is not correct.</strong></mat-error>\r\n                            </div>\r\n                            </mat-form-field>\r\n\r\n                </div>\r\n                <br><br><br>    \r\n            </mat-tab> \r\n          \r\n          </mat-tab-group>\r\n          <div class='outer'>\r\n            <div>\r\n               All buttons apply to all tabs. If save button is grey, please check each tab to make sure the required field is filled.<br><br>\r\n\r\n               <div class=\"help-block\" *ngIf=\"victimForm.get('minorFlag').errors \r\n                    && (victimForm.get('minorFlag').dirty || victimForm.get('minorFlag').touched)\">\r\n                    <mat-error>If victim a minor field is <strong>required</strong></mat-error>\r\n              </div>\r\n              \r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('victimAdvocateFlag').errors \r\n              && (victimForm.get('victimAdvocateFlag').dirty || victimForm.get('victimAdvocateFlag').touched)\">\r\n              <mat-error>If victim has advocate field is <strong>required</strong></mat-error>\r\n              </div> \r\n              \r\n               <div class=\"help-block\" *ngIf=\"victimForm.get('underSupervisionFlag').errors \r\n              && (victimForm.get('underSupervisionFlag').dirty || victimForm.get('underSupervisionFlag').touched)\">\r\n              <mat-error>Under supervision field is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('victimOffenderRelationshipTypeId').errors \r\n              && (victimForm.get('victimOffenderRelationshipTypeId').dirty || victimForm.get('victimOffenderRelationshipTypeId').touched)\">\r\n              <mat-error>Relationship is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('lastName').errors \r\n              && (victimForm.get('lastName').dirty || victimForm.get('lastName').touched)\">\r\n              <mat-error>Victim last name is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('firstName').errors \r\n              && (victimForm.get('firstName').dirty || victimForm.get('firstName').touched)\">\r\n              <mat-error>victim first name is <strong>required</strong></mat-error>\r\n             </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('guardianFirstName').errors \r\n              && (victimForm.get('guardianFirstName').dirty || victimForm.get('guardianFirstName').touched)\">\r\n                <mat-error>Guardian first name is <strong>required</strong></mat-error>\r\n              </div>\r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('guardianLastName').errors\r\n             && (victimForm.get('guardianLastName').dirty || victimForm.get('guardianLastName').touched)\" >\r\n              <mat-error>Guardian last name is <strong>required</strong></mat-error>\r\n              </div> \r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('advocateLastName').errors\r\n                && (victimForm.get('advocateLastName').dirty || victimForm.get('advocateLastName').touched)\" >\r\n                  <mat-error>Advocate last name is <strong>required</strong></mat-error>\r\n                  </div> \r\n    \r\n                <div class=\"help-block\" *ngIf=\"victimForm.get('advocateFirstName').errors\r\n                && (victimForm.get('advocateFirstName').dirty || victimForm.get('advocateFirstName').touched)\">\r\n                  <mat-error>Advocate first name is <strong>required</strong></mat-error>\r\n                </div>\r\n\r\n              \r\n                <div class=\"help-block\" *ngIf=\"victimForm.get('otherWeapon').errors \r\n                    && (victimForm.get('otherWeapon').dirty || victimForm.get('otherWeapon').touched)\">\r\n                    <mat-error>Other weapon field is <strong>required</strong></mat-error>\r\n              </div>\r\n\r\n              <div class=\"help-block\" *ngIf=\"victimForm.get('otherDrug').errors \r\n              && (victimForm.get('otherDrug').dirty || victimForm.get('otherDrug').touched)\">\r\n              <mat-error>Other drug field is <strong>required</strong></mat-error>\r\n             </div>\r\n\r\n\r\n            </div>\r\n              \r\n                  <div class=\"inner\">\r\n                     <button  mat-raised-button color=\"primary\" (click)=\"saveVictim()\" [disabled]=\"!victimForm.valid\"  >Save </button> \r\n                  </div>\r\n                  &nbsp;&nbsp;\r\n                  <div *ngIf=\"showDelete\" class=\"inner\">\r\n                  <button  mat-raised-button color=\"primary\" (click)=\"deleteVictim()\">Delete </button>\r\n                 </div>\r\n                  &nbsp;&nbsp; \r\n                  <div class=\"inner\">\r\n                  <button  mat-raised-button color=\"primary\" (click)=\"cancel()\">Clear </button>\r\n                </div>\r\n                  &nbsp;&nbsp; \r\n                  <button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n\r\n            </div>\r\n\r\n        </div>\r\n        <br>\r\n        <br>\r\n\r\n        <div align=\"right\">\r\n          <button mat-raised-button color=\"primary\"  (click)=\"addContact()\"  >Add victim contact</button>\r\n        </div>\r\n        \r\n        <div>\r\n\r\n          <mat-table #table [dataSource]=\"contactDataSource\" class=\"example-table\">\r\n            <ng-container matColumnDef=\"contactDate\">\r\n                <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Date</mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.contactDate | date}} </mat-cell>\r\n            </ng-container>\r\n\r\n\r\n            <ng-container matColumnDef=\"victimContactMethod\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Method</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.victimContactMethod}} </mat-cell>\r\n            </ng-container>\r\n\r\n            <ng-container matColumnDef=\"nextContactDate\">\r\n              <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Next Contact Date</mat-header-cell>\r\n              <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.nextContactDate | date}} </mat-cell>\r\n            </ng-container>\r\n            \r\n        \r\n            <ng-container matColumnDef=\"staff\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact By</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.staff}} </mat-cell>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"comment\">\r\n                            <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Comment</mat-header-cell>\r\n                            <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.comment}} </mat-cell>\r\n                    </ng-container>\r\n\r\n            <ng-container matColumnDef=\"contactId\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\"></mat-header-cell>\r\n                <mat-cell *matCellDef=\"let row\" class=\"example-cell\">\r\n                  \r\n                </mat-cell>\r\n            </ng-container>\r\n\r\n            <mat-header-row *matHeaderRowDef=\"['contactDate', 'victimContactMethod','nextContactDate', 'staff', 'comment', 'contactId']\" class=\"example-header-row\"></mat-header-row>\r\n            <mat-row *matRowDef=\"let row; columns:['contactDate', 'victimContactMethod','nextContactDate', 'staff', 'comment', 'contactId'];\" class=\"example-row\"></mat-row>\r\n            </mat-table>\r\n\r\n\r\n        </div>\r\n  \r\n  </mat-card-content>\r\n</mat-card>\r\n",
                 providers: [CommonDialogService],
                 styles: ["mat-form-field{width:100%}.container{margin:16px;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr);grid-gap:10px;grid-auto-rows:minmax(50px,auto);justify-items:stretch}@media only screen and (max-width:1120px){.container{display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-row-gap:15px}}@media only screen and (max-width:675px){.container{display:flex;flex-direction:column}}#outer{width:100%;text-align:center}.inner{display:inline-block}.tp-radio-group{display:flex;justify-content:space-between}"]
             }] }
@@ -4168,7 +4215,10 @@ class ContactComponent {
         this.editContact = (/** @type {?} */ ({}));
         this.staff = {};
         this.contactForm = new FormGroup({
-            contactDate: new FormControl(),
+            //contactDate: new FormControl(),
+            contactDate: new FormControl('', Validators.compose([
+                dateValidator()
+            ])),
             contactMethod: new FormControl(),
             contactBy: new FormControl(),
             comment: new FormControl(),
@@ -4298,7 +4348,7 @@ class ContactComponent {
 }
 ContactComponent.decorators = [
     { type: Component, args: [{
-                template: "\r\n <mat-card>\r\n        <mat-card-header>\r\n\r\n        </mat-card-header>\r\n         <mat-card-content>\r\n                \r\n                        <mat-toolbar  color=\"primary\">\r\n                                        <h4 class=\"card-header\" >Contact detail</h4>\r\n                        </mat-toolbar>\r\n                        <br>\r\n       \r\n\r\n                       \r\n                                        <mat-card >\r\n                                        <div class='container'>       \r\n                                        <form [formGroup]=\"contactForm\" #caseNoteDetailForm=\"ngForm\" >\r\n                                                    \r\n                                               \r\n\r\n                                                <div>      \r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Contact Date:</mat-label>\r\n                                                                 <input matInput formControlName=\"contactDate\"   \r\n                                                                 (click)=\"contactDate.open()\" \r\n                                                                 [matDatepicker]=\"contactDate\" \r\n                                                                 placeholder=\"Choose a contact date\" \r\n                                                                 [(ngModel)]=\"editContact.contactDate\" required>\r\n                                                                <mat-datepicker-toggle matSuffix [for]=\"contactDate\"></mat-datepicker-toggle>\r\n                                                                <mat-datepicker #contactDate></mat-datepicker>\r\n                                                        </mat-form-field>\r\n                                                </div>  \r\n                                                                \r\n                                                       \r\n\r\n                                                <div>\r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Contact Method:</mat-label>\r\n                                                                <mat-select  placeholder=\"contactMethod\" formControlName=\"contactMethod\"  required   [(ngModel)]=\"editContact.victimContactMethodId\">\r\n                                                                        <mat-option *ngFor=\" let contactMethod of contactMethods\" [value]=\"contactMethod.victimContactMethodId\" >{{contactMethod.name}}</mat-option>\r\n                                                                </mat-select>\r\n                                                        </mat-form-field>\r\n                                                </div>\r\n                                                                      \r\n                                                 <div>                    \r\n                                                        <mat-form-field class=\"mat-select-content\">\r\n                                                                <mat-label>Contact By:</mat-label>\r\n                                                                <mat-select  formControlName=\"contactBy\"   required [(ngModel)]=\"editContact.contactedBy\" class=\"mat-select-inner\">\r\n                                                                        <mat-option *ngFor=\" let item of staff\" [value]=\"item.staffId\" >{{ item.fullName}}</mat-option>\r\n                                                                </mat-select>\r\n                                                        </mat-form-field>\r\n                                                </div>  \r\n                                                \r\n                                                <div>\r\n\r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Comments </mat-label>\r\n                                                                <textarea \r\n                                                                matInput \r\n                                                                placeholder=\"\" \r\n                                                                required formControlName=\"comment\" \r\n                                                                [(ngModel)]=\"editContact.comment\"\r\n                                                                cdkTextareaAutosize\r\n                                                                #autosize=\"cdkTextareaAutosize\"\r\n                                                                cdkAutosizeMinRows=\"1\"\r\n                                                                cdkAutosizeMaxRows=\"5\">\r\n                                                                </textarea> \r\n                                                        </mat-form-field>\r\n                                                </div>\r\n\r\n                                                <div>      \r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Next Contact Date: </mat-label>\r\n                                                                 <input matInput formControlName=\"nextContactDate\"   \r\n                                                                 (click)=\"nextContactDate.open()\" \r\n                                                                 [matDatepicker]=\"nextContactDate\" \r\n                                                                 placeholder=\"Choose a next contact date\" \r\n                                                                 [(ngModel)]=\"editContact.nextContactDate\" required>\r\n                                                                <mat-datepicker-toggle matSuffix [for]=\"nextContactDate\"></mat-datepicker-toggle>\r\n                                                                <mat-datepicker #nextContactDate></mat-datepicker>\r\n                                                        </mat-form-field>\r\n                                                </div> \r\n                                                \r\n                                                <div>\r\n                                                        <!-- <button  mat-raised-button color=\"primary\" (click)=\"saveContact()\"  [disabled]=\"!contactForm.form.valid\" >Save</button> -->\r\n                                                        <button  mat-raised-button color=\"primary\" (click)=\"saveContact()\"  >Save</button>\r\n                                                        &nbsp;&nbsp;<button  mat-raised-button color=\"primary\"  >Cancel</button>\r\n                                                        &nbsp;&nbsp;<button  mat-raised-button color=\"primary\" (click)=\"back()\"  >Back</button>\r\n                                                </div>\r\n\r\n                                              </form>\r\n                                              </div>\r\n                                                </mat-card>\r\n                                        \r\n                                       \r\n                        <br>\r\n                       \r\n\r\n\r\n\r\n</mat-card-content>\r\n</mat-card>",
+                template: "\r\n <mat-card>\r\n        <mat-card-header>\r\n\r\n        </mat-card-header>\r\n         <mat-card-content>\r\n                \r\n                        <mat-toolbar  color=\"primary\">\r\n                                        <h4 class=\"card-header\" >Contact detail</h4>\r\n                        </mat-toolbar>\r\n                        <br>\r\n       \r\n\r\n                       \r\n                                        <mat-card >\r\n                                        <div class='container'>       \r\n                                        <form [formGroup]=\"contactForm\" #contactDetailForm=\"ngForm\" >\r\n                                                    \r\n                                               \r\n\r\n                                                <div>      \r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Contact Date:</mat-label>\r\n                                                                 <input matInput formControlName=\"contactDate\"   \r\n                                                                 (click)=\"contactDate.open()\" \r\n                                                                 [matDatepicker]=\"contactDate\" \r\n                                                                 placeholder=\"Choose a contact date\" \r\n                                                                 [(ngModel)]=\"editContact.contactDate\" required>\r\n                                                                <mat-datepicker-toggle matSuffix [for]=\"contactDate\"></mat-datepicker-toggle>\r\n                                                                <mat-datepicker #contactDate></mat-datepicker>\r\n                                                        </mat-form-field>\r\n\r\n                                                        <div class=\"validation-errors\">\r\n                                                                <div\r\n                                                                  class=\"help-block\"\r\n                                                                  *ngIf=\"\r\n                                                                  contactForm\r\n                                                                      .get('contactDate')\r\n                                                                      .hasError('required') &&\r\n                                                                    (contactForm.get('contactDate').dirty ||\r\n                                                                    contactForm.get('contactDate').touched)\">\r\n                                                                  <mat-error>Contact date is\r\n                                                                    <strong>required</strong></mat-error>\r\n                                                                </div>\r\n                                                                <div\r\n                                                                  class=\"help-block\"\r\n                                                                  *ngIf=\"\r\n                                                                  contactForm.get('contactDate').hasError('date') &&\r\n                                                                    (contactForm.get('contactDate').dirty ||\r\n                                                                    contactForm.get('contactDate').touched)\">\r\n                                                                  <mat-error >future Date is <strong>not allowed</strong> for contact date</mat-error>\r\n                                                                </div>\r\n                                                              </div>\r\n                                                </div>  \r\n                                                                \r\n                                                       \r\n\r\n                                                <div>\r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Contact Method:</mat-label>\r\n                                                                <mat-select  placeholder=\"contactMethod\" formControlName=\"contactMethod\"  required   [(ngModel)]=\"editContact.victimContactMethodId\">\r\n                                                                        <mat-option *ngFor=\" let contactMethod of contactMethods\" [value]=\"contactMethod.victimContactMethodId\" >{{contactMethod.name}}</mat-option>\r\n                                                                </mat-select>\r\n                                                        </mat-form-field>\r\n                                                </div>\r\n                                                                      \r\n                                                 <div>                    \r\n                                                        <mat-form-field class=\"mat-select-content\">\r\n                                                                <mat-label>Contact By:</mat-label>\r\n                                                                <mat-select  formControlName=\"contactBy\"   required [(ngModel)]=\"editContact.contactedBy\" class=\"mat-select-inner\">\r\n                                                                        <mat-option *ngFor=\" let item of staff\" [value]=\"item.staffId\" >{{ item.fullName}}</mat-option>\r\n                                                                </mat-select>\r\n                                                        </mat-form-field>\r\n                                                </div>  \r\n                                                \r\n                                                <div>\r\n\r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Comments </mat-label>\r\n                                                                <textarea \r\n                                                                matInput \r\n                                                                placeholder=\"\" \r\n                                                                required formControlName=\"comment\" \r\n                                                                [(ngModel)]=\"editContact.comment\"\r\n                                                                cdkTextareaAutosize\r\n                                                                #autosize=\"cdkTextareaAutosize\"\r\n                                                                cdkAutosizeMinRows=\"1\"\r\n                                                                cdkAutosizeMaxRows=\"5\">\r\n                                                                </textarea> \r\n                                                        </mat-form-field>\r\n                                                </div>\r\n\r\n                                                <div>      \r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Next Contact Date: </mat-label>\r\n                                                                 <input matInput formControlName=\"nextContactDate\"   \r\n                                                                 (click)=\"nextContactDate.open()\" \r\n                                                                 [matDatepicker]=\"nextContactDate\" \r\n                                                                 placeholder=\"Choose a next contact date\" \r\n                                                                 [(ngModel)]=\"editContact.nextContactDate\" required>\r\n                                                                <mat-datepicker-toggle matSuffix [for]=\"nextContactDate\"></mat-datepicker-toggle>\r\n                                                                <mat-datepicker #nextContactDate></mat-datepicker>\r\n                                                        </mat-form-field>\r\n                                                </div> \r\n                                                \r\n                                                <div>\r\n                                                        <!-- <button  mat-raised-button color=\"primary\" (click)=\"saveContact()\"  [disabled]=\"!contactForm.form.valid\" >Save</button> -->\r\n                                                        <button  mat-raised-button color=\"primary\" (click)=\"saveContact()\" [disabled]=\"!contactForm.valid\" >Save</button>\r\n                                                        &nbsp;&nbsp;<button  mat-raised-button color=\"primary\"  >Cancel</button>\r\n                                                        &nbsp;&nbsp;<button  mat-raised-button color=\"primary\" (click)=\"back()\"  >Back</button>\r\n                                                </div>\r\n\r\n                                              </form>\r\n                                              </div>\r\n                                                </mat-card>\r\n                                        \r\n                                       \r\n                        <br>\r\n                       \r\n\r\n\r\n\r\n</mat-card-content>\r\n</mat-card>",
                 styles: ["mat-form-field{width:50%}.container{margin:16px;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr);grid-gap:10px;grid-auto-rows:minmax(50px,auto);justify-items:stretch}.mat-select-content{width:300px}.mat-select-inner{width:290px}"]
             }] }
 ];
@@ -5585,7 +5635,7 @@ const BASE_MODULES = [
     ReactiveFormsModule
 ];
 /** @type {?} */
-const CORE_MODULES = [SmartAddressModule];
+const CORE_MODULES = [NgcSmartCoreModule, SmartAddressModule];
 /** @type {?} */
 const MATERIAL_MODULES = [
     MatButtonModule, MatCheckboxModule, MatRadioModule, MatSliderModule,