@csmart/ngc-smart-victim 0.1.6 → 1.13.1

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

@@ -0,0 +1,3225 @@
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Inject, EventEmitter, Component, ViewEncapsulation, Output, Directive, Input, ViewChild, NgModule } from '@angular/core';
+import { throwError } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import * as i2 from 'apollo-angular';
+import { ApolloModule } from 'apollo-angular';
+import * as i1$4 from '@angular/common';
+import { DatePipe, DOCUMENT, CommonModule } from '@angular/common';
+import * as i11$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i6 from '@csmart/ngc-smart-core';
+import { AccessType, LoginStaffResolverService, SelectedOffenderResolverService, SmartErrorComponent, NgcSmartCoreModule } from '@csmart/ngc-smart-core';
+import * as i12$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i1$3 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i5$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i1$1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i10 from '@angular/material/form-field';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$2 from '@angular/forms';
+import { FormControl, Validators, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i5 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import * as i11 from '@angular/material/radio';
+import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
+import * as i8 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i12 from '@angular/material/select';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
+import * as i9 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i13 from '@angular/material/core';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import * as i14 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i15 from '@csmart/ngc-smart-address';
+import { SmartAddressModule } from '@csmart/ngc-smart-address';
+import * as i16 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i17 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i9$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i14$1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i9$2 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { CdkTableModule } from '@angular/cdk/table';
+import { LayoutModule } from '@angular/cdk/layout';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatChipsModule } from '@angular/material/chips';
+import { MsalGuard } from '@azure/msal-angular';
+import * as i17$1 from '@angular/cdk/text-field';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+const SMART_OFFENDER_SERVICE_URL = new InjectionToken('smart offender service url');
+const SMART_LOOKUP_SERVICE_URL = new InjectionToken('smart lookup service url');
+const SMART_VICTIM_SERVICE_URL = new InjectionToken('smart victim service url');
+const SMART_WARRANT_URL = new InjectionToken('smart warrant web url');
+class VictimListFilter$1 {
+}
+class VictimAdvocate {
+    constructor(victimAdvocateId, lastName, firstName, prefixId, suffixId, addressId, noPhoneFlag, homePhone, workPhone, cellPhone, email, modifiedBy) {
+        this.victimAdvocateId = victimAdvocateId;
+        this.lastName = lastName;
+        this.firstName = firstName;
+        this.prefixId = prefixId;
+        this.suffixId = suffixId;
+        this.addressId = addressId;
+        this.noPhoneFlag = noPhoneFlag;
+        this.homePhone = homePhone;
+        this.workPhone = workPhone;
+        this.cellPhone = cellPhone;
+        this.email = email;
+        this.modifiedBy = modifiedBy;
+    }
+}
+class VictimWeaponUse {
+    constructor(
+    // public victimWeaponUseId: number,
+    victimId, weaponTypeId, otherWeapon, modifiedBy) {
+        this.victimId = victimId;
+        this.weaponTypeId = weaponTypeId;
+        this.otherWeapon = otherWeapon;
+        this.modifiedBy = modifiedBy;
+    }
+}
+class VictimDrugUse {
+    constructor(
+    //public victimDrugUseId: number,
+    victimId, drugTypeId, otherDrug, modifiedBy) {
+        this.victimId = victimId;
+        this.drugTypeId = drugTypeId;
+        this.otherDrug = otherDrug;
+        this.modifiedBy = modifiedBy;
+    }
+}
+class VictimSupport {
+    constructor(
+    // public victimSupportId: number,
+    victimId, victimSupportTypeId, modifiedBy) {
+        this.victimId = victimId;
+        this.victimSupportTypeId = victimSupportTypeId;
+        this.modifiedBy = modifiedBy;
+    }
+}
+class VictimGuardian {
+    constructor(victimGuardianId, lastName, firstName, prefixId, suffixId, birthDate, addressId, noPhoneFlag, homePhone, workPhone, cellPhone, email, modifiedBy) {
+        this.victimGuardianId = victimGuardianId;
+        this.lastName = lastName;
+        this.firstName = firstName;
+        this.prefixId = prefixId;
+        this.suffixId = suffixId;
+        this.birthDate = birthDate;
+        this.addressId = addressId;
+        this.noPhoneFlag = noPhoneFlag;
+        this.homePhone = homePhone;
+        this.workPhone = workPhone;
+        this.cellPhone = cellPhone;
+        this.email = email;
+        this.modifiedBy = modifiedBy;
+    }
+}
+class Victim {
+    constructor(victimId, offenderId, underSupervisionFlag, victimOffenderRelationshipTypeId, lastName, firstName, middleName, prefixId, suffixId, birthDate, genderCode, homePhone, workPhone, cellPhone, email, addressId, minorFlag, victimAdvocateFlag, guardianFirstName, guardianLastName, guardianPrefixId, guardianSuffixId, guardianNoPhoneFlag, guardianHomePhone, guardianWorkPhone, guardianCellPhone, guardianEmail, guardianAddressId, guardianBirthDate, advocateFirstName, advocateLastName, advocatePrefixId, advocateSuffixId, advocateNoPhoneFlag, advocateHomePhone, advocateWorkPhone, advocateCellPhone, advocateEmail, advocateAddressId, emergencyContact, emergencyContactPhone, commonChildrenFlag, commonChildrenNumber, cpoExpirationFlag, cpoExpirationDate, supportInPlaceFlag, weaponInvolvedFlag, drugUseFlag, alcoholUseFlag, accessRisk, modifiedBy, relationship, vVictimAdvocate, vVictimGuardian, victimSupports, victimWeaponUses, victimDrugUses, allowCsosaContactFlag, liveWithOffenderFlag) {
+        this.victimId = victimId;
+        this.offenderId = offenderId;
+        this.underSupervisionFlag = underSupervisionFlag;
+        this.victimOffenderRelationshipTypeId = victimOffenderRelationshipTypeId;
+        this.lastName = lastName;
+        this.firstName = firstName;
+        this.middleName = middleName;
+        this.prefixId = prefixId;
+        this.suffixId = suffixId;
+        this.birthDate = birthDate;
+        this.genderCode = genderCode;
+        this.homePhone = homePhone;
+        this.workPhone = workPhone;
+        this.cellPhone = cellPhone;
+        this.email = email;
+        this.addressId = addressId;
+        this.minorFlag = minorFlag;
+        this.victimAdvocateFlag = victimAdvocateFlag;
+        this.guardianFirstName = guardianFirstName;
+        this.guardianLastName = guardianLastName;
+        this.guardianPrefixId = guardianPrefixId;
+        this.guardianSuffixId = guardianSuffixId;
+        this.guardianNoPhoneFlag = guardianNoPhoneFlag;
+        this.guardianHomePhone = guardianHomePhone;
+        this.guardianWorkPhone = guardianWorkPhone;
+        this.guardianCellPhone = guardianCellPhone;
+        this.guardianEmail = guardianEmail;
+        this.guardianAddressId = guardianAddressId;
+        this.guardianBirthDate = guardianBirthDate;
+        this.advocateFirstName = advocateFirstName;
+        this.advocateLastName = advocateLastName;
+        this.advocatePrefixId = advocatePrefixId;
+        this.advocateSuffixId = advocateSuffixId;
+        this.advocateNoPhoneFlag = advocateNoPhoneFlag;
+        this.advocateHomePhone = advocateHomePhone;
+        this.advocateWorkPhone = advocateWorkPhone;
+        this.advocateCellPhone = advocateCellPhone;
+        this.advocateEmail = advocateEmail;
+        this.advocateAddressId = advocateAddressId;
+        this.emergencyContact = emergencyContact;
+        this.emergencyContactPhone = emergencyContactPhone;
+        this.commonChildrenFlag = commonChildrenFlag;
+        this.commonChildrenNumber = commonChildrenNumber;
+        this.cpoExpirationFlag = cpoExpirationFlag;
+        this.cpoExpirationDate = cpoExpirationDate;
+        this.supportInPlaceFlag = supportInPlaceFlag;
+        this.weaponInvolvedFlag = weaponInvolvedFlag;
+        this.drugUseFlag = drugUseFlag;
+        this.alcoholUseFlag = alcoholUseFlag;
+        this.accessRisk = accessRisk;
+        this.modifiedBy = modifiedBy;
+        this.relationship = relationship;
+        this.vVictimAdvocate = vVictimAdvocate;
+        this.vVictimGuardian = vVictimGuardian;
+        this.victimSupports = victimSupports;
+        this.victimWeaponUses = victimWeaponUses;
+        this.victimDrugUses = victimDrugUses;
+        this.allowCsosaContactFlag = allowCsosaContactFlag;
+        this.liveWithOffenderFlag = liveWithOffenderFlag;
+    }
+}
+
+const headers$1 = new HttpHeaders({ 'Content-Type': 'application/json' });
+const options = { headers: headers$1 };
+class NgcSmartVictimService {
+    constructor(http, smartOffenderServiceUrl, smartLookupServiceUrl, smartVictimServiceUrl, apollo) {
+        this.http = http;
+        this.smartOffenderServiceUrl = smartOffenderServiceUrl;
+        this.smartLookupServiceUrl = smartLookupServiceUrl;
+        this.smartVictimServiceUrl = smartVictimServiceUrl;
+        this.apollo = apollo;
+        this.serviceApiUrl = 'https://smart-service-test.azurewebsites.net/graphql';
+    }
+    // getVictimInsurances(offenderId: any) {
+    //   return this.http.get(this.smartOffenderServiceUrl + '/VictimInsurances/?offenderId=' + offenderId).pipe();
+    // }
+    // getVictimInsurance(id: any) {
+    //   return this.http.get(this.smartOffenderServiceUrl + '/VictimInsurances/?id=' + id).pipe();
+    // } 
+    // postVictimInsurance(val: any) {
+    //   return this.http.post(this.smartOffenderServiceUrl + '/VictimInsurances', val).pipe();
+    // }
+    // putVictimInsurance(id: any, val: any) {
+    //   return this.http.put(this.smartOffenderServiceUrl + '/VictimInsurances/?id=' + id, val).pipe();
+    // }
+    // deleteVictimInsurance(id: any) {
+    //   return this.http.delete(this.smartOffenderServiceUrl + '/VictimInsurances/?id=' + id).pipe();
+    // }
+    // getVictimInsuranceTypes() {
+    //     return this.http.get(this.smartLookupServiceUrl + '/VictimInsuranceTypes').pipe();
+    // }
+    // getVictimInsurancePolicyHolders() {
+    //     return this.http.get(this.smartLookupServiceUrl + '/VictimInsurancePolicyHolders').pipe();
+    // }
+    //   getVictimInsuranceSwitchReasons() {
+    //       return this.http.get(this.smartLookupServiceUrl + '/VictimInsuranceSwitchReasons').pipe();
+    //   }
+    //   getVictimInsuranceProviders() {
+    //       return this.http.get(this.smartLookupServiceUrl + '/VictimInsuranceProvider').pipe();
+    //   }
+    //   getVictimInsuranceProvider(id) {
+    //     return this.http.get(this.smartLookupServiceUrl + '/VictimInsuranceProviders/' + id).pipe();
+    // }
+    //   postProviderInformation(val: any) {
+    //       return this.http.post(this.smartLookupServiceUrl + '/VictimInsuranceProviders', val).pipe();
+    //   }
+    handleError(error) {
+        console.error(error);
+        return throwError(error.json().error || 'Server error');
+    }
+    getDrugsTypes() {
+        return this.http.get(this.smartLookupServiceUrl + 'DrugTypes', options).pipe(map(res => res));
+    }
+    getDocketList(offenderId) {
+        const queryString = `
+  {
+    findDockets(input: { where: { offenderId:${offenderId} } }) {
+      totalCount
+      message
+      data {
+        docketId
+        docketNumber
+      
+      }
+    }
+  }`;
+        return this.http.post(this.serviceApiUrl, { query: queryString }).pipe(map(({ data }) => {
+            console.log('dockets for this offender:', data.findDockets.data);
+            return data.findDockets.data;
+        }));
+    }
+    getSupportTypes() {
+        return this.http.get(this.smartLookupServiceUrl + 'VictimSupportTypes', options).pipe(map(res => res));
+    }
+    getPrefixes() {
+        return this.http.get(this.smartLookupServiceUrl + 'Prefixes', options).pipe(map(res => res));
+    }
+    getSuffixes() {
+        return this.http.get(this.smartLookupServiceUrl + 'Suffixes', options).pipe(map(res => res));
+    }
+    getRelationshipTypes() {
+        return this.http.get(this.smartLookupServiceUrl + 'RelationshipTypes', options).pipe(map(res => res));
+    }
+    getGenders() {
+        return this.http.get(this.smartLookupServiceUrl + 'Genders', options).pipe(map(res => res));
+    }
+    getWeaponTypes() {
+        return this.http.get(this.smartLookupServiceUrl + 'WeaponTypes', options).pipe(map(res => res));
+    }
+    getFlagOptionYesNoUnknowns() {
+        return this.http.get(this.smartLookupServiceUrl + 'FlagOptionYesNoUnknowns', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getContactTypes() {
+        return this.http.get(this.smartLookupServiceUrl + 'ContactTypes', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getContactMethods() {
+        return this.http.get(this.smartLookupServiceUrl + 'VictimContactMethods', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getContactBys() {
+        return this.http.get(this.smartLookupServiceUrl + 'VictimContactPurposes', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getVictimContactPurposes() {
+        return this.http.get(this.smartLookupServiceUrl + 'VictimContactPurposes', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getVictimServiceTypes() {
+        return this.http.get(this.smartLookupServiceUrl + 'VictimServiceTypes', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getVictimServiceStatus() {
+        return this.http.get(this.smartLookupServiceUrl + 'VictimServiceStatus', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getvVictimServiceTypeProgramProviders() {
+        return this.http.get(this.smartLookupServiceUrl + 'vVictimServiceTypeProgramProviders', options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getVictim(val) {
+        return this.http.get(this.smartVictimServiceUrl + 'Victims/' + val, options).pipe(map(res => {
+            console.log('victim return data');
+            console.log(res);
+            return res;
+        }));
+    }
+    getVictimAdvocate(val) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimAdvocates/' + val, options).pipe(map(res => {
+            return res;
+        }));
+    }
+    getVictimGuardian(val) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimGuardians/' + val, options).pipe(map(res => {
+            return res;
+        }));
+    }
+    postVictims(val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.post(this.smartVictimServiceUrl + 'Victims', tempVal, options).pipe(map(res => { return res; }));
+    }
+    putVictims(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.put(this.smartVictimServiceUrl + 'Victims/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    putVictimAdvocate(id, val) {
+        let body;
+        body = JSON.stringify(val);
+        return this.http.put(this.smartVictimServiceUrl + 'VictimAdvocates/' + id, body, options).pipe(map(res => { return res; }));
+    }
+    postVictimAdvocate(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.post(this.smartVictimServiceUrl + 'VictimAdvocates/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    putVictimGuardian(id, val) {
+        console.log('update victim guardian');
+        console.log(val);
+        const tempVal = JSON.stringify(val);
+        return this.http.put(this.smartVictimServiceUrl + 'VictimGuardians/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    postVictimGuardian(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.post(this.smartVictimServiceUrl + 'VictimGuardians/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    getVictimDrugUse(val) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimDrugUses/' + val, options).pipe(map((res) => {
+            return res;
+        }));
+    }
+    putVictimDrugUse(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.put(this.smartVictimServiceUrl + 'VictimDrugUses/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    postVictimDrugUse(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.post(this.smartVictimServiceUrl + 'VictimDrugUses/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    putVictimWeaponUse(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.put(this.smartVictimServiceUrl + 'VictimWeaponUses/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    postVictimWeaponUse(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.post(this.smartVictimServiceUrl + 'VictimWeaponUses/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    putVictimSupport(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.put(this.smartVictimServiceUrl + 'VictimSupports/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    postVictimSupport(id, val) {
+        const tempVal = JSON.stringify(val);
+        return this.http.post(this.smartVictimServiceUrl + 'VictimSupports/' + id, tempVal, options).pipe(map(res => { return res; }));
+    }
+    deleteVictims(val) {
+        return this.http.delete(this.smartVictimServiceUrl + 'Victims/' + val, options).pipe(map(res => { return res; }));
+    }
+    // //==============Victim Serive===================================
+    getVictims(offenderId) {
+        return this.http.get(this.smartVictimServiceUrl + 'Victims/offender/' + offenderId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    getVictimsByFilter(filter) {
+        return this.http
+            .post(this.smartVictimServiceUrl + '/Victims', JSON.stringify(filter), { headers: headers$1 })
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    getVictimListByFilter(filter) {
+        console.log('filer in service');
+        console.log(filter);
+        return this.http
+            .post(this.smartVictimServiceUrl + 'vVictims/Filter', JSON.stringify(filter), options)
+            .pipe();
+    }
+    getCasetNotes(victimId) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimCaseNotes/victim/' + victimId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    addCaseNote(caseNote) {
+        let body;
+        body = JSON.stringify(caseNote);
+        return this.http
+            .post(this.smartVictimServiceUrl + 'VictimCaseNotes/', body, options);
+    }
+    updateCaseNote(caseNote) {
+        let body;
+        body = JSON.stringify(caseNote);
+        return this.http
+            .put(this.smartVictimServiceUrl + 'VictimCaseNotes/' + caseNote.victimCaseNoteId, body, options);
+    }
+    deleteCaseNote(id, staffId) {
+        return this.http.delete(`${this.smartVictimServiceUrl}VictimCaseNotes/${id}?staffId=${staffId}`);
+    }
+    getContacts(victimId) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimContacts/victim/' + victimId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    addContact(contact) {
+        let body;
+        body = JSON.stringify(contact);
+        return this.http
+            .post(this.smartVictimServiceUrl + 'VictimContacts/', body, options);
+    }
+    updateContact(contact) {
+        let body;
+        body = JSON.stringify(contact);
+        return this.http
+            .put(this.smartVictimServiceUrl + 'VictimContacts/' + contact.victimContactId, body, options);
+    }
+    getSafetyPlans(victimId) {
+        return this.http.get(this.smartVictimServiceUrl + 'vVictimServiceLists/victim/' + victimId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    getVictimServices(victimServiceId) {
+        return this.http.get(this.smartVictimServiceUrl + 'vVictimServiceLists/victimServiceId/' + victimServiceId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    getVictimServiceDetail(victimServiceId) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimServiceDetails/' + victimServiceId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    addSafetyPlan(victimSafetyPlan) {
+        let body;
+        body = JSON.stringify(victimSafetyPlan);
+        return this.http
+            .post(this.smartVictimServiceUrl + 'VictimServices/', body, options)
+            .pipe();
+    }
+    updateSafetyPlan(victimSafetyPlan) {
+        let body;
+        body = JSON.stringify(victimSafetyPlan);
+        return this.http
+            .put(this.smartVictimServiceUrl + 'VictimServices/' + victimSafetyPlan.victimServiceId, body, options);
+    }
+    addVictimServiceStatus(victimServiceStatusHistory) {
+        let body;
+        body = JSON.stringify(victimServiceStatusHistory);
+        return this.http
+            .post(this.smartVictimServiceUrl + 'VictimServiceStatusHistories/', body, options);
+    }
+    getServiceStatusHistories(victimServiceId) {
+        return this.http.get(this.smartVictimServiceUrl + 'VictimServiceStatusHistories/victimServiceId/' + victimServiceId)
+            .pipe(map((res) => {
+            return res;
+        }), catchError(this.handleError));
+    }
+    deleteSafetyPlan(victimServiceId, staffId) {
+        return this.http.delete(`${this.smartVictimServiceUrl}VictimServices/${victimServiceId}?staffId=${staffId}`);
+    }
+    addPlanProvider(victimServiceDetail) {
+        let body;
+        body = JSON.stringify(victimServiceDetail);
+        return this.http
+            .post(this.smartVictimServiceUrl + 'VictimServiceDetails/', body, options)
+            .pipe();
+    }
+    deleteProvider(victimProgramProviderId, staffId) {
+        return this.http.delete(`${this.smartVictimServiceUrl}VictimServiceDetails/${victimProgramProviderId}?staffId=${staffId}`);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimService, deps: [{ token: i1.HttpClient }, { token: SMART_OFFENDER_SERVICE_URL }, { token: SMART_LOOKUP_SERVICE_URL }, { token: SMART_VICTIM_SERVICE_URL }, { token: i2.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SMART_OFFENDER_SERVICE_URL]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SMART_LOOKUP_SERVICE_URL]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SMART_VICTIM_SERVICE_URL]
+                    }] }, { type: i2.Apollo }];
+    } });
+
+const headers = new Headers({ 'Content-Type': 'application/json' });
+class IntakeServicesComponent {
+    //serviceData = environment.smartOffenderServiceUrl;
+    constructor(http, smartOffenderServiceUrl) {
+        this.http = http;
+        this.smartOffenderServiceUrl = smartOffenderServiceUrl;
+    }
+    getIntakeByOffender(offenderId) {
+        return this.http
+            .get(this.smartOffenderServiceUrl + 'IntakeBasic/offender/' + offenderId)
+            .pipe();
+    }
+    updateIntakeSteps(offenderId, intakeStepStatus) {
+        return this.http.put(this.smartOffenderServiceUrl + '/IntakeStepStatus/' + offenderId, intakeStepStatus);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ IntakeServicesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IntakeServicesComponent, deps: [{ token: i1.HttpClient }, { token: SMART_OFFENDER_SERVICE_URL }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ IntakeServicesComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IntakeServicesComponent, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: IntakeServicesComponent, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SMART_OFFENDER_SERVICE_URL]
+                    }] }];
+    } });
+class IntakeStep {
+}
+IntakeStep.PhysicalInformation = "PHYSIN";
+IntakeStep.Photo = "PHOTOS";
+IntakeStep.HousingInformation = "HOUSE";
+IntakeStep.DocketInformation = "DOCKET";
+IntakeStep.Alias = "ALIAS";
+IntakeStep.IntakeBasicInformation = "INTKBI";
+IntakeStep.ContactInformation = "CONTCT";
+IntakeStep.DeceasedInformation = "DEATH";
+IntakeStep.DriversLicense = "DRVLIC";
+IntakeStep.EmploymentInformation = "EMPLOY";
+IntakeStep.GangAffiliation = "GANG";
+IntakeStep.HealthInsurance = "HLTHINS";
+IntakeStep.Identification = "IDNTFCTN";
+IntakeStep.InternetIdentifier = "INTERNETID";
+IntakeStep.MilitaryService = "MLTSVC";
+IntakeStep.School = "SCHOOL";
+IntakeStep.SelectiveService = "SLCTVSVC";
+IntakeStep.Vehicle = "VEHICLE";
+IntakeStep.VictimInformation = "VICTIM";
+IntakeStep.WarrantInformation = "WARRNT";
+IntakeStep.RunningRecord = "RUNREC";
+IntakeStep.Signature = "SIGN";
+
+class VictimListFilter {
+}
+
+class VictimSearchFormComponent {
+    constructor() {
+        this.onSearch = new EventEmitter();
+        this.change = new EventEmitter();
+        this.filter = new VictimListFilter();
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        //   var element = <HTMLInputElement> document.getElementById("victimSearchButton");
+        //   element.disabled = true;
+        //   setTimeout(function() {
+        //     element.disabled = false;
+        // }, 10000);
+    }
+    onChange() {
+        console.log('this.filter in serach form.');
+        console.log(this.filter);
+        this.onSearch.emit(this.filter);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ VictimSearchFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VictimSearchFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VictimSearchFormComponent, selector: "app-victim-search-form", outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<form name=\"victimSearchFrom\"  #From=\"ngForm\">\r\n<mat-expansion-panel [expanded]=\"true\">\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Search for Victims\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div class=\"victimSearch\">\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Victim Last Name\"  [(ngModel)]=\"filter.lastName\" name=\"lastName\" id=\"lastName\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Victim First Name\"  [(ngModel)]=\"filter.firstName\" name=\"firstName\" id=\"firstName\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Victim Date of Birth\" type=\"date\"    [(ngModel)]=\"filter.birthDate\" name=\"birthDate\" id=\"birthDate\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Offender PDID\"  [(ngModel)]=\"filter.pdid\" name=\"pdid\" id=\"pdid\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Offender CSOSA #\"[(ngModel)]=\"filter.offenderId\" name=\"offenderId\" id=\"offenderId\">\r\n            </mat-form-field>\r\n           \r\n           \r\n            <section>\r\n                <button  id=\"victimSearchButton\" mat-raised-button color=\"primary\" (click)=\"onChange()\">Search</button>\r\n                <span style=\"padding-right: 5px;\"></span>\r\n                <button   mat-raised-button color=\"primary\"  type=\"reset\" value=\"Reset\">Clear Changes</button>\r\n            </section>\r\n        </div>\r\n    </mat-expansion-panel>\r\n</form>\r\n\r\n\r\n", styles: ["div.services{max-width:500px;margin:auto;border:3px solid #73AD21}.rTable{display:block;width:100%}.rTableHeading,.rTableBody,.rTableFoot,.rTableRow{clear:both}.rTableHead,.rTableFoot{background-color:#ddd;font-weight:700}.rTableCell,.rTableHead{border:0px;float:left;padding:1px;width:28%}.rTable:after{visibility:hidden;display:block;font-size:0;content:\" \";clear:both;height:0}.victimSearch{display:grid;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-title,.example-headers-align .mat-expansion-panel-header-description{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-lastName,.mat-column-firstName,.mat-column-relationship,.mat-column-homePhone,.mat-column-offenderName{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;-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;-webkit-hyphens:auto;hyphens:auto}\n"], components: [{ type: i1$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimSearchFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-victim-search-form', encapsulation: ViewEncapsulation.None, template: "<form name=\"victimSearchFrom\"  #From=\"ngForm\">\r\n<mat-expansion-panel [expanded]=\"true\">\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Search for Victims\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div class=\"victimSearch\">\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Victim Last Name\"  [(ngModel)]=\"filter.lastName\" name=\"lastName\" id=\"lastName\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Victim First Name\"  [(ngModel)]=\"filter.firstName\" name=\"firstName\" id=\"firstName\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Victim Date of Birth\" type=\"date\"    [(ngModel)]=\"filter.birthDate\" name=\"birthDate\" id=\"birthDate\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Offender PDID\"  [(ngModel)]=\"filter.pdid\" name=\"pdid\" id=\"pdid\">\r\n            </mat-form-field>\r\n            <mat-form-field>\r\n                <input matInput placeholder=\"Offender CSOSA #\"[(ngModel)]=\"filter.offenderId\" name=\"offenderId\" id=\"offenderId\">\r\n            </mat-form-field>\r\n           \r\n           \r\n            <section>\r\n                <button  id=\"victimSearchButton\" mat-raised-button color=\"primary\" (click)=\"onChange()\">Search</button>\r\n                <span style=\"padding-right: 5px;\"></span>\r\n                <button   mat-raised-button color=\"primary\"  type=\"reset\" value=\"Reset\">Clear Changes</button>\r\n            </section>\r\n        </div>\r\n    </mat-expansion-panel>\r\n</form>\r\n\r\n\r\n", styles: ["div.services{max-width:500px;margin:auto;border:3px solid #73AD21}.rTable{display:block;width:100%}.rTableHeading,.rTableBody,.rTableFoot,.rTableRow{clear:both}.rTableHead,.rTableFoot{background-color:#ddd;font-weight:700}.rTableCell,.rTableHead{border:0px;float:left;padding:1px;width:28%}.rTable:after{visibility:hidden;display:block;font-size:0;content:\" \";clear:both;height:0}.victimSearch{display:grid;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-title,.example-headers-align .mat-expansion-panel-header-description{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-lastName,.mat-column-firstName,.mat-column-relationship,.mat-column-homePhone,.mat-column-offenderName{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;-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;-webkit-hyphens:auto;hyphens:auto}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { onSearch: [{
+                type: Output
+            }] } });
+
+class CommonDialogComponent {
+    constructor(commondialogRef) {
+        this.commondialogRef = commondialogRef;
+        this.cmdYesTitle = "Yes";
+        this.cmdNoTitle = "No";
+    }
+    ngOnInit() {
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CommonDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogComponent, deps: [{ token: i1$3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ CommonDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CommonDialogComponent, selector: "app-common-dialog", ngImport: i0, template: "\r\n           \r\n            <mat-card class=\"example-card\"> \r\n                <mat-card-content>\r\n           <p>{{ title }}</p>\r\n                   <p>{{ message }}</p>\r\n                   <br>\r\n\r\n                   <div class=\"inner\">\r\n                        <button type=\"button\" mat-raised-button color=\"primary\"\r\n                            (click)=\"commondialogRef.close(true)\">{{cmdYesTitle}}</button>\r\n                    </div>\r\n                        &nbsp;&nbsp;\r\n                        \r\n                    <div *ngIf=\"cmdYesTitle!=='Ok'\" class=\"inner\">\r\n                        <button type=\"button\" mat-raised-button color=\"primary\" \r\n                            (click)=\"commondialogRef.close()\">{{cmdNoTitle}}</button>\r\n                        \r\n                    </div>\r\n                 \r\n                             \r\n               </mat-card-content>\r\n           </mat-card>", styles: [".md-dialog-container{position:fixed;top:0!important;overflow:hidden}.inner{display:inline-block}\n"], components: [{ type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-common-dialog', template: "\r\n           \r\n            <mat-card class=\"example-card\"> \r\n                <mat-card-content>\r\n           <p>{{ title }}</p>\r\n                   <p>{{ message }}</p>\r\n                   <br>\r\n\r\n                   <div class=\"inner\">\r\n                        <button type=\"button\" mat-raised-button color=\"primary\"\r\n                            (click)=\"commondialogRef.close(true)\">{{cmdYesTitle}}</button>\r\n                    </div>\r\n                        &nbsp;&nbsp;\r\n                        \r\n                    <div *ngIf=\"cmdYesTitle!=='Ok'\" class=\"inner\">\r\n                        <button type=\"button\" mat-raised-button color=\"primary\" \r\n                            (click)=\"commondialogRef.close()\">{{cmdNoTitle}}</button>\r\n                        \r\n                    </div>\r\n                 \r\n                             \r\n               </mat-card-content>\r\n           </mat-card>", styles: [".md-dialog-container{position:fixed;top:0!important;overflow:hidden}.inner{display:inline-block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }]; } });
+
+class CommonDialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    confirm(title, message, cmdYesTitle, cmdNoTitle) {
+        let dialogRef;
+        dialogRef = this.dialog.open(CommonDialogComponent);
+        dialogRef.componentInstance.title = title;
+        dialogRef.componentInstance.message = message;
+        dialogRef.componentInstance.cmdYesTitle = cmdYesTitle;
+        dialogRef.componentInstance.cmdNoTitle = cmdNoTitle;
+        return dialogRef.afterClosed();
+    }
+    warning(title, message, cmdOkTitle) {
+        let dialogRef;
+        dialogRef = this.dialog.open(CommonDialogComponent);
+        dialogRef.componentInstance.title = title;
+        dialogRef.componentInstance.message = message;
+        dialogRef.componentInstance.cmdYesTitle = cmdOkTitle;
+        return dialogRef.afterClosed();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CommonDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CommonDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
+
+// import { Subscription } from 'rxjs/Subscription';
+class PhoneMaskDirective {
+    // private sub:ISubscription;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    set phoneControl(control) {
+        this._phoneControl = control;
+    }
+    set preValue(value) {
+        this._preValue = value;
+        this.formatPhoneNumber(value);
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        // this.sub.unsubscribe();
+    }
+    formatPhoneNumber(data) {
+        if (!this._preValue) {
+            this._preValue = "";
+            data = "";
+        }
+        let preInputValue = this._preValue;
+        var lastChar = preInputValue.substr(preInputValue.length - 1);
+        var newVal = data.replace(/\D/g, "");
+        let start = this.renderer.selectRootElement("#tel").selectionStart;
+        let end = this.renderer.selectRootElement("#tel").selectionEnd;
+        if (data.length < preInputValue.length) {
+            if (preInputValue.length < start) {
+                if (lastChar == ")") {
+                    newVal = newVal.substr(0, newVal.length - 1);
+                }
+            }
+            if (newVal.length == 0) {
+                newVal = "";
+            }
+            else if (newVal.length <= 3) {
+                newVal = newVal.replace(/^(\d{0,3})/, "($1");
+            }
+            else if (newVal.length <= 6) {
+                newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, "($1) $2");
+            }
+            else {
+                newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(.*)/, "($1) $2-$3");
+            }
+            this._phoneControl.setValue(newVal, { emitEvent: false });
+            this.renderer.selectRootElement("#tel").setSelectionRange(start, end);
+        }
+        else {
+            var removedD = data.charAt(start);
+            if (newVal.length == 0) {
+                newVal = "";
+            }
+            else if (newVal.length <= 3) {
+                newVal = newVal.replace(/^(\d{0,3})/, "($1)");
+            }
+            else if (newVal.length <= 6) {
+                newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, "($1) $2");
+            }
+            else {
+                newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(.*)/, "($1) $2-$3");
+            }
+            if (preInputValue.length >= start) {
+                if (removedD == "(") {
+                    start = start + 1;
+                    end = end + 1;
+                }
+                if (removedD == ")") {
+                    start = start + 2;
+                    end = end + 2;
+                }
+                if (removedD == "-") {
+                    start = start + 1;
+                    end = end + 1;
+                }
+                if (removedD == " ") {
+                    start = start + 1;
+                    end = end + 1;
+                }
+                if (removedD == "") {
+                    start = start + 1;
+                    end = end + 1;
+                }
+                this._phoneControl.setValue(newVal, { emitEvent: false });
+                this.renderer.selectRootElement("#tel").setSelectionRange(start, end);
+            }
+            else {
+                this._phoneControl.setValue(newVal, { emitEvent: false });
+                this.renderer
+                    .selectRootElement("#tel")
+                    .setSelectionRange(start + 2, end + 2); // +2 because of wanting standard typing
+            }
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ PhoneMaskDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PhoneMaskDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ PhoneMaskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: PhoneMaskDirective, selector: "[phoneMask]", inputs: { phoneControl: "phoneControl", preValue: "preValue" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PhoneMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[phoneMask]",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { phoneControl: [{
+                type: Input,
+                args: ["phoneControl"]
+            }], preValue: [{
+                type: Input,
+                args: ["preValue"]
+            }] } });
+
+function conditionalValidator(predicate, validator, errorNamespace) {
+    return (formControl => {
+        if (!formControl.parent) {
+            return null;
+        }
+        let error = null;
+        if (predicate()) {
+            error = validator(formControl);
+        }
+        if (errorNamespace && error) {
+            const customError = {};
+            customError[errorNamespace] = error;
+            error = customError;
+        }
+        return error;
+    });
+}
+function stringConditionalValidator(predicate, validator, errorNamespace) {
+    return (formControl => {
+        if (!formControl.parent) {
+            return null;
+        }
+        let error = null;
+        if (predicate() == 'YS') {
+            error = validator(formControl);
+        }
+        if (errorNamespace && error) {
+            const customError = {};
+            customError[errorNamespace] = error;
+            error = customError;
+        }
+        return error;
+    });
+}
+class SmartVictimDetailComponent {
+    constructor(location, formBuilder, dialog, route, router, snackBar, commonDialogService, victimService) {
+        this.location = location;
+        this.formBuilder = formBuilder;
+        this.dialog = dialog;
+        this.route = route;
+        this.router = router;
+        this.snackBar = snackBar;
+        this.commonDialogService = commonDialogService;
+        this.victimService = victimService;
+        this.victimDetail = {};
+        this.onSave = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.hidden = true;
+        this.victimAdvocate = {};
+        this.victimGuardian = {};
+        this.guardianTabFlag = false;
+        this.advocateTabFlag = false;
+        this.commonChildrenDivFlag = false;
+        this.cpoExpirationDivFlag = false;
+        this.supportInPlaceDivFlag = false;
+        this.weaponInvolvedDivFlag = false;
+        this.drugUseDivFlag = false;
+        this.showDelete = false;
+        this.addressId = 0;
+        this.advocateAddressId = 0;
+        this.guardianAddressId = 0;
+        this.datePipe = new DatePipe('en-US');
+        this.emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
+        this.phoneNumber = "\\d{10}";
+        this.editVictim = {};
+        this.otherWeaponFlag = false;
+        this.otherDrugFlag = false;
+        this.contactDataSource = new MatTableDataSource();
+        this.guardianPhoneExistFlag = false;
+        this.advocatePhoneExistFlag = false;
+        this.phoneValidationFlag = false;
+        this.guaridanNoPhoneChkFlag = true;
+        this.advocateNoPhoneChkFlag = true;
+        this.addressValidators = {
+            street: [],
+            street2: [],
+            city: [],
+            stateCode: [],
+            zipCode: [],
+            psaCode: [],
+        };
+        this.initForm();
+    }
+    initForm() {
+        this.victimForm = this.formBuilder.group({
+            underSupervisionFlag: new FormControl('', Validators.compose([Validators.required])),
+            victimOffenderRelationshipTypeId: new FormControl('', Validators.compose([Validators.required])),
+            lastName: new FormControl('', Validators.compose([Validators.required])),
+            firstName: new FormControl('', Validators.compose([Validators.required])),
+            middleName: new FormControl(''),
+            prefixId: new FormControl(''),
+            suffixId: new FormControl(''),
+            genderCode: new FormControl(''),
+            birthDate: new FormControl(''),
+            homePhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            cellPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            workPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            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(''),
+            guardianFirstName: new FormControl(''),
+            guardianPrefixId: new FormControl(''),
+            guardianSuffixId: new FormControl(''),
+            //guardianGender:new FormControl('', ),
+            guardianBirthDate: new FormControl(''),
+            guardianNoPhoneFlag: new FormControl(true),
+            guardianHomePhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            guardianCellPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            guardianWorkPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            guardianEmail: new FormControl('', Validators.compose([Validators.pattern(this.emailPattern)])),
+            advocateNoPhoneFlag: new FormControl(true),
+            advocateWorkPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            advocateHomePhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            advocateCellPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            advocateSuffixId: new FormControl(''),
+            advocatePrefixId: new FormControl(''),
+            advocateFirstName: new FormControl('', stringConditionalValidator(() => this.victimForm.get('victimAdvocateFlag').value, Validators.required, 'illuminatiError')),
+            advocateLastName: new FormControl('', stringConditionalValidator(() => this.victimForm.get('victimAdvocateFlag').value, Validators.required, 'illuminatiError')),
+            advocateEmail: new FormControl('', Validators.compose([Validators.pattern(this.emailPattern)])),
+            emergencyContact: new FormControl(''),
+            emergencyContactPhone: new FormControl('', Validators.compose([Validators.pattern(this.phoneNumber)])),
+            emergencyChildren: new FormControl(''),
+            emergencyCpo: new FormControl(''),
+            emergencyDrug: new FormControl(''),
+            emergencySupport: new FormControl(''),
+            emergencyWeapon: new FormControl(''),
+            drug: new FormControl(''),
+            weapon: new FormControl(''),
+            support: new FormControl(''),
+            commonChildrenFlag: new FormControl(''),
+            commonChildrenNumber: new FormControl(''),
+            cpoExpirationFlag: new FormControl(''),
+            cpoExpirationDate: new FormControl(''),
+            accessRisk: new FormControl(''),
+            drugUseFlag: new FormControl(''),
+            supportInPlaceFlag: new FormControl(''),
+            weaponInvolvedFlag: new FormControl(''),
+            otherWeapon: new FormControl(''),
+            otherDrug: new FormControl(''),
+            alcoholUseFlag: new FormControl(''),
+            victimSupports: new FormControl(''),
+            victimWeaponUses: new FormControl(''),
+            victimDrugUses: new FormControl(''),
+            allowCsosaContactFlag: new FormControl(''),
+            liveWithOffenderFlag: new FormControl(''),
+        });
+        this.victimForm.markAsPristine();
+        this.victimForm.markAsUntouched();
+    }
+    _getVictim() {
+        if (this.victimId === 0) {
+            return;
+        }
+        ;
+        if (this.editMode == true) {
+            console.log('find victim id inside getVictim');
+            console.log(this.victimId);
+            if (this.victimId === undefined) {
+                this.sub = this.route.params.subscribe(params => {
+                    this.victimId = params['victimId'];
+                    console.log('my this.victimId');
+                    console.log(this.victimId);
+                });
+            }
+            this.victimService.getVictim(this.victimId)
+                .subscribe((victim) => {
+                console.log('victim data 1');
+                console.log(victim);
+                this.editVictim = victim;
+                var supportsData = [];
+                this.editVictim.victimSupports.forEach(t => { supportsData.push(t.victimSupportTypeId); });
+                const victimSupportsControl = this.victimForm.get('victimSupports');
+                victimSupportsControl.setValue(supportsData);
+                var weaponUsesData = [];
+                var otherWeapon = "";
+                this.editVictim.victimWeaponUses.forEach(t => {
+                    weaponUsesData.push(t.weaponTypeId);
+                    if (t.weaponTypeId == "OTHER") {
+                        otherWeapon = t.otherWeapon;
+                        this.otherWeaponFlag = true;
+                    }
+                });
+                const victimWeaponUsesControl = this.victimForm.get('victimWeaponUses');
+                victimWeaponUsesControl.setValue(weaponUsesData);
+                const otherWeaponControl = this.victimForm.get('otherWeapon');
+                otherWeaponControl.setValue(otherWeapon);
+                //this.weaponUsesData = this.editVictim.victimWeaponUses;
+                var drugUseData = [];
+                var otherDrug = "";
+                console.log('load this.editVictim.victimDrugUses');
+                console.log(this.editVictim.victimDrugUses);
+                this.editVictim.victimDrugUses.forEach(t => {
+                    if (t.drugTypeId === null) {
+                        otherDrug = t.otherDrug;
+                        this.otherDrugFlag = true;
+                        t.drugTypeId = 'OTHER';
+                    }
+                    drugUseData.push(t.drugTypeId);
+                });
+                console.log('this.editVictim.victimDrugUses after push');
+                console.log(drugUseData);
+                const victimDrugUsesControl = this.victimForm.get('victimDrugUses');
+                victimDrugUsesControl.setValue(drugUseData);
+                const otherDrugControl = this.victimForm.get('otherDrug');
+                otherDrugControl.setValue(otherDrug);
+                //contact
+                this.victimService.getContacts(this.victimId).subscribe(contactList => {
+                    console.log('contactList');
+                    console.log(contactList);
+                    this.contactList = contactList;
+                    this.contactDataSource.data = this.contactList;
+                });
+                //no phone field
+                if (this.editVictim.guardianNoPhoneFlag === false) {
+                    this.victimForm.patchValue({ guardianNoPhoneFlag: false });
+                }
+                if (this.editVictim.advocateNoPhoneFlag === false) {
+                    this.victimForm.patchValue({ advocateNoPhoneFlag: false });
+                }
+            }, error => {
+                this.snackBar.open("Error occured while retriving Victim Information. Please try again.");
+            });
+            return;
+        }
+        else {
+            //new
+        }
+    }
+    ngOnChanges() {
+    }
+    onAddressChange(addressId) {
+        this.victimForm.patchValue({ addressId: addressId });
+        this.addressId = addressId;
+    }
+    onGuardianAddressChange(MyGuardianAddressId) {
+        this.victimForm.patchValue({ guardianAddressId: MyGuardianAddressId });
+        this.guardianAddressId = MyGuardianAddressId;
+    }
+    onAdvocateAddressChange(MyAdvocateAddressId) {
+        this.victimForm.patchValue({ advocateAddressId: MyAdvocateAddressId });
+        this.advocateAddressId = MyAdvocateAddressId;
+    }
+    cancel() {
+        this.victimForm.reset();
+    }
+    ngOnInit() {
+        console.log('show offenderId');
+        console.log(this.offenderId);
+        console.log('show staffId');
+        console.log(this.staffId);
+        console.log('show isIntake');
+        console.log(this.isIntake);
+        //this.victimDetail.guardianNoPhoneFlag = true;
+        //this.victimForm.value.guardianNoPhoneFlag =  true;
+        //this.victimForm.get('guardianNoPhoneFlag').setValue(true);
+        //required field
+        const requiredImplementation = { get: function () {
+                if (this._required) {
+                    return this._required;
+                }
+                if (this.ngControl && this.ngControl.control && this.ngControl.control.validator) {
+                    const emptyValueControl = Object.assign({}, this.ngControl.control);
+                    emptyValueControl.value = null;
+                    return ('required' in (this.ngControl.control.validator(emptyValueControl) || {}));
+                }
+                return false;
+            }, set: function (value) { this._required = coerceBooleanProperty(value); }, };
+        Object.defineProperty(MatInput.prototype, 'required', requiredImplementation);
+        Object.defineProperty(MatSelect.prototype, 'required', requiredImplementation);
+        Object.defineProperty(MatRadioGroup.prototype, 'required', requiredImplementation);
+        //required field end
+        if (this.victimDetail != null) {
+            // edit record
+            this.editMode = true;
+            this.showDelete = true;
+            this.victimId = this.victimDetail.victimId;
+            this.guardianTabFlag = this.victimDetail.minorFlag;
+            if (this.victimDetail.victimAdvocateFlag == 'YS') {
+                this.advocateTabFlag = true;
+            }
+            if (this.otherWeaponFlag == true) {
+                const otherWeaponControl = this.victimForm.get('otherWeapon');
+                otherWeaponControl.setValidators(Validators.required);
+            }
+            if (this.otherDrugFlag == true) {
+                const otherDrugControl = this.victimForm.get('otherDrug');
+                otherDrugControl.setValidators(Validators.required);
+            }
+            this.cpoExpirationDivFlag = this.victimDetail.cpoExpirationFlag;
+            this.commonChildrenDivFlag = this.victimDetail.commonChildrenFlag;
+            this.supportInPlaceDivFlag = this.victimDetail.supportInPlaceFlag;
+            this.weaponInvolvedDivFlag = this.victimDetail.weaponInvolvedFlag;
+            this.drugUseDivFlag = this.victimDetail.drugUseFlag;
+            this.addressId = this.victimDetail.addressId;
+            this.guardianAddressId = this.victimDetail.guardianAddressId;
+            this.advocateAddressId = this.victimDetail.advocateAddressId;
+            this._getVictim();
+        }
+        else {
+            //add new record
+            this.victimForm.patchValue({ guardianNoPhoneFlag: true });
+            this.victimForm.patchValue({ advocateNoPhoneFlag: true });
+        }
+        this.victimService.getFlagOptionYesNoUnknowns().subscribe((items) => {
+            this.flagOption = items;
+        });
+        this.victimService.getGenders().subscribe((items) => {
+            this.genders = items;
+        });
+        this.victimService.getPrefixes().subscribe((items) => {
+            this.prefixes = items;
+        });
+        this.victimService.getSuffixes().subscribe((items) => {
+            this.suffixes = items;
+        });
+        this.victimService.getRelationshipTypes().subscribe((items) => {
+            this.relationshipTypes = items.filter((y) => (y.relationshipCategoryId === 'ST' || y.relationshipCategoryId === 'FM'));
+        });
+        this.victimService.getSupportTypes().subscribe((items) => {
+            this.victimSupportTypes = items;
+        });
+        this.victimService.getWeaponTypes().subscribe((items) => {
+            this.weaponTypes = items;
+        });
+        this.victimService.getDrugsTypes().subscribe((items) => {
+            console.log('drug lookup items');
+            console.log(items);
+            this.drugs = items;
+            this.drugs.push({ drugTypeId: 'OTHER', name: 'Other' });
+            console.log(this.drugs);
+        });
+        // this.victimService.getDocketList(this.offenderId).subscribe(
+        //   (items: any) => {
+        //     this.docketlist = items;
+        //   }
+        // );
+        this.victimForm.get('minorFlag').valueChanges
+            .subscribe(value => {
+            // 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();
+        });
+        this.victimForm.get('victimAdvocateFlag').valueChanges
+            .subscribe(value => {
+            this.victimForm.get('advocateFirstName').updateValueAndValidity();
+            this.victimForm.get('advocateLastName').updateValueAndValidity();
+            this.victimForm.get('advocateWorkPhone').updateValueAndValidity();
+            this.victimForm.get('advocateHomePhone').updateValueAndValidity();
+            this.victimForm.get('advocateCellPhone').updateValueAndValidity();
+        });
+    }
+    back() {
+        //this.onSave.emit(this.victimDetail);
+        this.router.navigate(['victimList']);
+    }
+    deleteVictim() {
+        this.commonDialogService
+            .confirm('', 'Do you want to delete this Victim?', 'Yes', 'No')
+            .subscribe(res => {
+            this.result = res;
+            if (this.result) {
+                this.victimService.deleteVictims(this.victimDetail.victimId)
+                    .subscribe(result => {
+                    this.snackBar.open('Delete Successfully!', '', {
+                        duration: 3000,
+                    });
+                });
+                // this.router.navigate(['victim']);
+                this.onSave.emit(this.victimDetail);
+            }
+        });
+    }
+    radioMinorChange($event) {
+        // 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);
+            //this.victimForm.value.guardianNoPhoneFlag =  true;
+        }
+        else {
+            this.guardianTabFlag = false;
+            // guardianLastNameControl.clearValidators();
+            // guardianFirstNameControl.clearValidators();
+        }
+        //guardianLastNameControl.updateValueAndValidity();
+        // guardianFirstNameControl.updateValueAndValidity();
+    }
+    radioAdvocateChange($event) {
+        const advocateLastNameControl = this.victimForm.get('advocateLastName');
+        const advocateFirstNameControl = this.victimForm.get('advocateFirstName');
+        // const advocateNoPhoneControl = this.victimForm.get('advocateNoPhoneFlag');
+        if ($event.value === "YS") {
+            this.advocateTabFlag = true;
+            advocateLastNameControl.setValidators(Validators.required);
+            advocateFirstNameControl.setValidators(Validators.required);
+        }
+        else {
+            this.advocateTabFlag = false;
+            advocateLastNameControl.clearValidators();
+            advocateFirstNameControl.clearValidators();
+        }
+        advocateLastNameControl.updateValueAndValidity();
+        advocateFirstNameControl.updateValueAndValidity();
+    }
+    radioCicChange($event) {
+        if ($event.value === true) {
+            this.commonChildrenDivFlag = true;
+            // requrie field
+            this.setValidators('commonChildren');
+        }
+        else {
+            this.commonChildrenDivFlag = false;
+        }
+    }
+    setValidators(type) {
+        if (type == 'commonChildren') {
+            this.victimForm.get('commonChildrenNumber').clearValidators();
+            this.victimForm.get('commonChildrenNumber').setValidators(Validators.required);
+        }
+        else if (type == 'cpo') {
+            this.victimForm.get('cpoExpirationDate').clearValidators();
+            this.victimForm.get('cpoExpirationDate').setValidators(Validators.required);
+        }
+    }
+    radioSupportChange($event) {
+        if ($event.value === true) {
+            this.supportInPlaceDivFlag = true;
+        }
+        else {
+            this.supportInPlaceDivFlag = false;
+        }
+    }
+    radioWeaponChange($event) {
+        if ($event.value === true) {
+            this.weaponInvolvedDivFlag = true;
+        }
+        else {
+            this.weaponInvolvedDivFlag = false;
+        }
+    }
+    radioDrugChange($event) {
+        if ($event.value === true) {
+            this.drugUseDivFlag = true;
+        }
+        else {
+            this.drugUseDivFlag = false;
+        }
+    }
+    radioCpoChange($event) {
+        if ($event.value === true) {
+            this.cpoExpirationDivFlag = true;
+            this.setValidators('cpo');
+        }
+        else {
+            this.cpoExpirationDivFlag = false;
+        }
+    }
+    handleDOBChange($event) {
+        var ageDifMs = Date.now() - $event.value;
+        var ageDate = new Date(ageDifMs);
+        if (Math.abs(ageDate.getUTCFullYear() - 1970) <= 18) {
+            this.snackBar.open('Victim is a Minor. This information is a sensitive and should not be disclosed to any unauthorized parties. Contact the legal guardian.', '', {
+                duration: 6000,
+            });
+            const minorControl = this.victimForm.get('minorFlag');
+            minorControl.setValue(true);
+            //  const guardianLastNameControl = this.victimForm.get('guardianLastName');
+            // const guardianFirstNameControl = this.victimForm.get('guardianFirstName');
+            this.guardianTabFlag = true;
+            // guardianLastNameControl.setValidators(Validators.required);
+            //  guardianFirstNameControl.setValidators(Validators.required);
+        }
+    }
+    checkOtherWeapon(WeaponUse) {
+        const otherWeaponControl = this.victimForm.get('otherWeapon');
+        if (WeaponUse.includes("OTHER")) {
+            this.otherWeaponFlag = true;
+            otherWeaponControl.setValidators(Validators.required);
+        }
+        else {
+            this.otherWeaponFlag = false;
+            otherWeaponControl.clearValidators();
+        }
+        otherWeaponControl.updateValueAndValidity();
+    }
+    checkOtherDrug(DrugUse) {
+        const otherDrugControl = this.victimForm.get('otherDrug');
+        if (DrugUse.includes("OTHER")) {
+            this.otherDrugFlag = true;
+            otherDrugControl.setValidators(Validators.required);
+        }
+        else {
+            this.otherDrugFlag = false;
+            otherDrugControl.clearValidators();
+        }
+        otherDrugControl.updateValueAndValidity();
+    }
+    //#region "save victim"
+    saveVictim() {
+        //guardian phone logic
+        if (!this.victimForm.value.guardianNoPhoneFlag) {
+            if (this.victimForm.value.guardianHomePhone) {
+                if (this.victimForm.value.guardianHomePhone !== null) {
+                    if (this.victimForm.value.guardianHomePhone !== "") {
+                        this.guardianPhoneExistFlag = true;
+                    }
+                }
+            }
+            if (this.victimForm.value.guardianWorkPhone !== undefined) {
+                if (this.victimForm.value.guardianWorkPhone !== null) {
+                    if (this.victimForm.value.guardianWorkPhone !== "") {
+                        this.guardianPhoneExistFlag = true;
+                    }
+                }
+            }
+            if (this.victimForm.value.guardianCellPhone) {
+                if (this.victimForm.value.guardianCellPhone !== null) {
+                    if (this.victimForm.value.guardianCellhone !== "") {
+                        this.guardianPhoneExistFlag = true;
+                    }
+                }
+            }
+        }
+        console.log('this.victimForm.value.guardianNoPhoneFlag');
+        console.log(this.victimForm.value.guardianNoPhoneFlag);
+        console.log('this.guardianPhoneExistFlag');
+        console.log(this.guardianPhoneExistFlag);
+        if (this.guardianPhoneExistFlag === false && this.victimForm.value.guardianNoPhoneFlag === false) {
+            this.phoneValidationFlag = true;
+            this.commonDialogService
+                .warning('', 'Please check the guardian phone field. You have to fill one of the three phone fileds.', 'Ok')
+                .subscribe(res => {
+                this.result = res;
+            });
+        }
+        console.log('this.phoneValidationFlag');
+        console.log(this.phoneValidationFlag);
+        //advocate phone logic
+        if (!this.victimForm.value.advocateNoPhoneFlag) {
+            if (this.victimForm.value.advocateHomePhone) {
+                if (this.victimForm.value.advocateHomePhone !== null) {
+                    if (this.victimForm.value.advocateHomePhone !== "") {
+                        this.advocatePhoneExistFlag = true;
+                    }
+                }
+            }
+            if (this.victimForm.value.advocateWorkPhone !== undefined) {
+                if (this.victimForm.value.advocateWorkPhone !== null) {
+                    if (this.victimForm.value.advocateWorkPhone !== "") {
+                        this.advocatePhoneExistFlag = true;
+                    }
+                }
+            }
+            if (this.victimForm.value.advocateCellPhone) {
+                if (this.victimForm.value.advocateCellPhone !== null) {
+                    if (this.victimForm.value.advocateCellhone !== "") {
+                        this.advocatePhoneExistFlag = true;
+                    }
+                }
+            }
+        }
+        console.log('this.victimForm.value.advocateNoPhoneFlag');
+        console.log(this.victimForm.value.advocateNoPhoneFlag);
+        console.log('this.advocatePhoneExistFlag');
+        console.log(this.advocatePhoneExistFlag);
+        if (this.advocatePhoneExistFlag === false && this.victimForm.value.advocateNoPhoneFlag === false) {
+            this.phoneValidationFlag = true;
+            this.commonDialogService
+                .warning('', 'Please check the advocate phone field. You have to fill one of the three phone fileds.', 'Ok')
+                .subscribe(res => {
+                this.result = res;
+            });
+        }
+        console.log('this.phoneValidationFlag 1');
+        console.log(this.phoneValidationFlag);
+        if (this.phoneValidationFlag === false) {
+            if (this.victimDetail === null) {
+                //insert new victim
+                var myVictimSupports = [];
+                if (this.victimForm.value.victimSupports) {
+                    this.victimForm.value.victimSupports.forEach(element => {
+                        const victimSupport = {};
+                        victimSupport.victimId = this.victimForm.value.victimId;
+                        victimSupport.victimSupportTypeId = element;
+                        victimSupport.modifiedBy = this.staffId;
+                        myVictimSupports.push(victimSupport);
+                    });
+                }
+                var myVictimDrugUses = [];
+                console.log('this.victimForm.value.victimDrugUses during save');
+                console.log(this.victimForm.value.victimDrugUses);
+                if (this.victimForm.value.victimDrugUses) {
+                    this.victimForm.value.victimDrugUses.forEach(element => {
+                        const victimDrugUse = {};
+                        victimDrugUse.drugTypeId = element;
+                        if (element === "OTHER" || element === "" || element === null) {
+                            victimDrugUse.drugTypeId = null;
+                            victimDrugUse.otherDrug = this.victimForm.value.otherDrug;
+                        }
+                        else {
+                            victimDrugUse.drugTypeId = element;
+                            victimDrugUse.otherDrug = null;
+                        }
+                        victimDrugUse.modifiedBy = this.staffId;
+                        victimDrugUse.victimId = this.victimForm.value.victimId;
+                        myVictimDrugUses.push(victimDrugUse);
+                    });
+                }
+                console.log('this.victimForm.value.victimDrugUses during save 1');
+                console.log(this.victimForm.value.victimDrugUses);
+                var myVictimWeaponUses = [];
+                if (this.victimForm.value.victimWeaponUses) {
+                    this.victimForm.value.victimWeaponUses.forEach(element => {
+                        const victimWeaponUse = {};
+                        victimWeaponUse.victimId = this.victimForm.value.victimId;
+                        victimWeaponUse.weaponTypeId = element;
+                        if (element == "OTHER") {
+                            victimWeaponUse.otherWeapon = this.victimForm.value.otherWeapon;
+                        }
+                        else {
+                            victimWeaponUse.otherWeapon = null;
+                        }
+                        victimWeaponUse.modifiedBy = this.staffId;
+                        myVictimWeaponUses.push(victimWeaponUse);
+                    });
+                }
+                const newVictim = {
+                    victimId: 0,
+                    offenderId: this.offenderId,
+                    victimOffenderRelationshipTypeId: this.victimForm.value.victimOffenderRelationshipTypeId,
+                    lastName: this.victimForm.value.lastName,
+                    firstName: this.victimForm.value.firstName,
+                    middleName: this.victimForm.value.middleName ? this.victimForm.value.middleName : null,
+                    prefixId: this.victimForm.value.prefixId ? this.victimForm.value.prefixId : null,
+                    suffixId: this.victimForm.value.suffixId ? this.victimForm.value.suffixId : null,
+                    birthDate: this.victimForm.value.birthDate ? this.victimForm.value.birthDate : null,
+                    genderCode: this.victimForm.value.genderCode ? this.victimForm.value.genderCode : null,
+                    underSupervisionFlag: this.victimForm.value.underSupervisionFlag,
+                    minorFlag: this.victimForm.value.minorFlag,
+                    victimAdvocateFlag: this.victimForm.value.victimAdvocateFlag,
+                    homePhone: this.victimForm.value.homePhone ? this.victimForm.value.homePhone : null,
+                    workPhone: this.victimForm.value.workPhone ? this.victimForm.value.workPhone : null,
+                    cellPhone: this.victimForm.value.cellPhone ? this.victimForm.value.cellPhone : null,
+                    email: this.victimForm.value.email ? this.victimForm.value.email : null,
+                    addressId: this.victimForm.value.addressId ? this.victimForm.value.addressId : 1,
+                    emergencyContact: this.victimForm.value.emergencyContact ? this.victimForm.value.emergencyContact : null,
+                    emergencyContactPhone: this.victimForm.value.emergencyContactPhone ? this.victimForm.value.emergencyContactPhone : null,
+                    commonChildrenFlag: this.victimForm.value.commonChildrenFlag,
+                    commonChildrenNumber: this.victimForm.value.commonChildrenNumber,
+                    cpoExpirationFlag: this.victimForm.value.cpoExpirationFlag,
+                    cpoExpirationDate: this.victimForm.value.cpoExpirationDate ? this.datePipe.transform(this.victimForm.value.startDate, 'short') : null,
+                    supportInPlaceFlag: this.victimForm.value.supportInPlaceFlag,
+                    weaponInvolvedFlag: this.victimForm.value.weaponInvolvedFlag,
+                    drugUseFlag: this.victimForm.value.drugUseFlag,
+                    alcoholUseFlag: this.victimForm.value.alcoholUseFlag,
+                    accessRisk: this.victimForm.value.accessRisk,
+                    modifiedBy: this.staffId,
+                    vVictimAdvocate: null,
+                    vVictimGuardian: null,
+                    victimDrugUses: myVictimDrugUses,
+                    victimSupports: myVictimSupports,
+                    victimWeaponUses: myVictimWeaponUses,
+                    advocateFirstName: null,
+                    advocateLastName: null,
+                    advocateEmail: null,
+                    advocatePrefixId: null,
+                    advocateSuffixId: null,
+                    advocateNoPhoneFlag: null,
+                    advocateHomePhone: null,
+                    advocateWorkPhone: null,
+                    advocateCellPhone: null,
+                    advocateAddressId: null,
+                    guardianFirstName: null,
+                    guardianLastName: null,
+                    guardianEmail: null,
+                    guardianPrefixId: null,
+                    guardianSuffixId: null,
+                    guardianNoPhoneFlag: null,
+                    guardianHomePhone: null,
+                    guardianWorkPhone: null,
+                    guardianCellPhone: null,
+                    guardianAddressId: null,
+                    guardianBirthDate: null,
+                    relationship: null,
+                    //relationship: this.victimForm.value.victimOffenderRelationshipTypeId? this.victimForm.value.victimOffenderRelationshipTypeId : null,
+                    allowCsosaContactFlag: this.victimForm.value.allowCsosaContactFlag ? this.victimForm.value.allowCsosaContactFlag : null,
+                    liveWithOffenderFlag: this.victimForm.value.liveWithOffenderFlag ? this.victimForm.value.liveWithOffenderFlag : null,
+                };
+                if (this.addressId == 0) {
+                    newVictim.addressId = null;
+                }
+                else {
+                    newVictim.addressId = this.addressId;
+                }
+                newVictim.advocateAddressId = this.advocateAddressId;
+                newVictim.guardianAddressId = this.guardianAddressId;
+                console.log('newVictim');
+                console.log(newVictim);
+                this.victimService.postVictims(newVictim).subscribe((items) => {
+                    const id = items ? items.victimId : '';
+                    if (this.victimForm.value.victimAdvocateFlag == "YS") {
+                        console.log('add advocate');
+                        const victimAdvocate = {
+                            victimAdvocateId: id,
+                            lastName: this.victimForm.value.advocateLastName,
+                            firstName: this.victimForm.value.advocateFirstName,
+                            prefixId: this.victimForm.value.advocatePrefixId,
+                            suffixId: this.victimForm.value.advocateSuffixId,
+                            addressId: this.advocateAddressId ? this.advocateAddressId : null,
+                            noPhoneFlag: this.victimForm.value.advocateNoPhoneFlag ? this.victimForm.value.advocateNoPhoneFlag : null,
+                            homePhone: this.victimForm.value.advocateHomePhone,
+                            workPhone: this.victimForm.value.advocateWorkPhone,
+                            cellPhone: this.victimForm.value.advocateCellPhone,
+                            email: this.victimForm.value.advocateEmail,
+                            modifiedBy: this.staffId
+                        };
+                        this.victimService.postVictimAdvocate(id, victimAdvocate).subscribe();
+                    }
+                    if (this.victimForm.value.minorFlag == true) {
+                        const victimGuardian = {
+                            victimGuardianId: id,
+                            lastName: this.victimForm.value.guardianLastName,
+                            firstName: this.victimForm.value.guardianFirstName,
+                            prefixId: this.victimForm.value.guardianPrefixId,
+                            suffixId: this.victimForm.value.guardianSuffixId,
+                            birthDate: this.victimForm.value.guardianBirthDate,
+                            addressId: this.guardianAddressId ? this.guardianAddressId : null,
+                            noPhoneFlag: this.victimForm.value.guardianNoPhoneFlag ? this.victimForm.value.guardianNoPhoneFlag : null,
+                            homePhone: this.victimForm.value.guardianHomePhone,
+                            workPhone: this.victimForm.value.guardianWorkPhone,
+                            cellPhone: this.victimForm.value.guardianCellPhone,
+                            email: this.victimForm.value.guardianEmail,
+                            modifiedBy: this.staffId
+                        };
+                        this.victimService.postVictimGuardian(id, victimGuardian).subscribe();
+                    }
+                    this.snackBar.open('Add Victim Successfully!', '', {
+                        duration: 3000,
+                    });
+                    //insert new
+                    if (this.isIntake === true) {
+                        this.router.navigate(['victimHome']);
+                    }
+                    else {
+                        this.router.navigate(['victimList']);
+                    }
+                    //this.onSave.emit(this.victimDetail);
+                });
+            }
+            else {
+                //update victim
+                this.victimDetail.underSupervisionFlag = this.victimForm.value.underSupervisionFlag;
+                this.victimDetail.victimOffenderRelationshipTypeId = this.victimForm.value.victimOffenderRelationshipTypeId;
+                this.victimDetail.lastName = this.victimForm.value.lastName;
+                this.victimDetail.firstName = this.victimForm.value.firstName;
+                this.victimDetail.middleName = this.victimForm.value.middleName;
+                this.victimDetail.prefixId = this.victimForm.value.prefixId ? this.victimForm.value.prefixId : null;
+                this.victimDetail.suffixId = this.victimForm.value.suffixId ? this.victimForm.value.suffixId : null;
+                this.victimDetail.birthDate = this.victimForm.value.birthDate;
+                this.victimDetail.genderCode = this.victimForm.value.genderCode;
+                this.victimDetail.minorFlag = this.victimForm.value.minorFlag;
+                this.victimDetail.homePhone = this.victimForm.value.homePhone ? this.victimForm.value.homePhone : null;
+                this.victimDetail.workPhone = this.victimForm.value.workPhone ? this.victimForm.value.workPhone : null;
+                this.victimDetail.cellPhone = this.victimForm.value.cellPhone ? this.victimForm.value.cellPhone : null;
+                this.victimDetail.email = this.victimForm.value.email;
+                this.victimDetail.victimAdvocateFlag = this.victimForm.value.victimAdvocateFlag;
+                this.victimDetail.emergencyContact = this.victimForm.value.emergencyContact;
+                this.victimDetail.emergencyContactPhone = this.victimForm.value.emergencyContactPhone ? this.victimForm.value.emergencyContactPhone : null;
+                this.victimDetail.commonChildrenFlag = this.victimForm.value.commonChildrenFlag;
+                this.victimDetail.commonChildrenNumber = this.victimForm.value.commonChildrenNumber;
+                this.victimDetail.cpoExpirationDate = this.victimForm.value.cpoExpirationDate;
+                this.victimDetail.cpoExpirationFlag = this.victimForm.value.cpoExpirationFlag;
+                this.victimDetail.supportInPlaceFlag = this.victimForm.value.supportInPlaceFlag;
+                this.victimDetail.weaponInvolvedFlag = this.victimForm.value.weaponInvolvedFlag;
+                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.addressId;
+                this.victimDetail.allowCsosaContactFlag = this.victimForm.value.allowCsosaContactFlag;
+                this.victimDetail.liveWithOffenderFlag = this.victimForm.value.liveWithOffenderFlag;
+                this.victimDetail.victimSupports = [];
+                this.victimForm.value.victimSupports.forEach(element => {
+                    const victimSupport = {};
+                    victimSupport.victimId = this.victimDetail.victimId;
+                    victimSupport.victimSupportTypeId = element;
+                    victimSupport.modifiedBy = this.staffId;
+                    this.victimDetail.victimSupports.push(victimSupport);
+                });
+                this.victimDetail.victimDrugUses = [];
+                console.log('this.victimForm.value.victimDrugUses calculate');
+                console.log(this.victimForm.value.victimDrugUses);
+                this.victimForm.value.victimDrugUses.forEach(element => {
+                    const victimDrugUse = {};
+                    victimDrugUse.drugTypeId = element;
+                    console.log('this.victimForm.value.victimDrugUses before');
+                    console.log(this.victimForm.value.victimDrugUses);
+                    if (element === "OTHER" || element === "") {
+                        victimDrugUse.drugTypeId = null;
+                        victimDrugUse.otherDrug = this.victimForm.value.otherDrug;
+                    }
+                    else {
+                        victimDrugUse.drugTypeId = element;
+                        victimDrugUse.otherDrug = null;
+                    }
+                    victimDrugUse.modifiedBy = this.staffId;
+                    victimDrugUse.victimId = this.victimDetail.victimId;
+                    this.victimDetail.victimDrugUses.push(victimDrugUse);
+                    console.log('this.victimForm.value.victimDrugUses after');
+                    console.log(this.victimForm.value.victimDrugUses);
+                });
+                this.victimForm.value.victimDrugUses.filter(word => (!(word.drugTypeId === null && word.otherDrug === null)));
+                console.log('adjust this.victimForm.value.victimDrugUses ');
+                console.log(this.victimForm.value.victimDrugUses);
+                this.victimDetail.victimWeaponUses = [];
+                this.victimForm.value.victimWeaponUses.forEach(element => {
+                    const victimWeaponUse = {};
+                    victimWeaponUse.victimId = this.victimDetail.victimId;
+                    victimWeaponUse.weaponTypeId = element;
+                    console.log('weapon element');
+                    console.log(element);
+                    console.log(this.victimForm.value.otherWeapon);
+                    console.log(this.victimForm.value.victimWeaponUses);
+                    if (element == "OTHER") {
+                        victimWeaponUse.otherWeapon = this.victimForm.value.otherWeapon;
+                    }
+                    else {
+                        victimWeaponUse.otherWeapon = null;
+                    }
+                    victimWeaponUse.modifiedBy = this.staffId;
+                    this.victimDetail.victimWeaponUses.push(victimWeaponUse);
+                });
+                console.log('this.victimDetail before emit');
+                console.log(this.victimDetail);
+                this.victimService.putVictims(this.victimDetail.victimId, this.victimDetail).subscribe((items) => {
+                    this.snackBar.open('Update Successfully!', '', {
+                        duration: 3000,
+                    });
+                    //Advocate section
+                    this.victimAdvocate.victimAdvocateId = this.victimDetail.victimId;
+                    this.victimAdvocate.lastName = this.victimForm.value.advocateLastName;
+                    this.victimAdvocate.firstName = this.victimForm.value.advocateFirstName;
+                    this.victimAdvocate.prefixId = this.victimForm.value.advocatePrefixId ? this.victimForm.value.advocatePrefixId : null;
+                    this.victimAdvocate.suffixId = this.victimForm.value.advocateSuffixId ? this.victimForm.value.advocateSuffixId : null;
+                    this.victimAdvocate.addressId = this.advocateAddressId ? this.advocateAddressId : null;
+                    this.victimAdvocate.noPhoneFlag = this.victimForm.value.advocateNoPhoneFlag ? true : false;
+                    this.victimAdvocate.homePhone = this.victimForm.value.advocateHomePhone ? this.victimForm.value.advocateHomePhone : null;
+                    this.victimAdvocate.workPhone = this.victimForm.value.advocateWorkPhone ? this.victimForm.value.advocateWorkPhone : null;
+                    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;
+                    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(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;
+                    this.victimGuardian.lastName = this.victimForm.value.guardianLastName;
+                    this.victimGuardian.firstName = this.victimForm.value.guardianFirstName;
+                    this.victimGuardian.prefixId = this.victimForm.value.guardianPrefixId ? this.victimForm.value.guardianPrefixId : null;
+                    this.victimGuardian.suffixId = this.victimForm.value.guardianSuffixId ? this.victimForm.value.guardianSuffixId : null;
+                    this.victimGuardian.addressId = this.guardianAddressId ? this.guardianAddressId : null;
+                    this.victimGuardian.noPhoneFlag = this.victimForm.value.guardianNoPhoneFlag ? true : false;
+                    this.victimGuardian.homePhone = this.victimForm.value.guardianHomePhone ? this.victimForm.value.guardianHomePhone : null;
+                    this.victimGuardian.workPhone = this.victimForm.value.guardianWorkPhone ? this.victimForm.value.guardianWorkPhone : null;
+                    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) {
+                        if (this.victimDetail.guardianFirstName != null)
+                            this.victimService.putVictimGuardian(this.victimDetail.victimId, this.victimGuardian).subscribe(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"
+    addContact() {
+        this.router.navigate(['victimContact', this.victimId]);
+    }
+    formatLabel(value) {
+        return value;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ SmartVictimDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SmartVictimDetailComponent, deps: [{ token: i1$4.Location }, { token: i1$2.FormBuilder }, { token: i1$3.MatDialog }, { token: i5$1.ActivatedRoute }, { token: i5$1.Router }, { token: i4.MatSnackBar }, { token: CommonDialogService }, { token: NgcSmartVictimService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ SmartVictimDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SmartVictimDetailComponent, selector: "csmart-victim-detail", inputs: { victimDetail: "victimDetail", staffId: "staffId", offenderId: "offenderId", isIntake: "isIntake" }, outputs: { onSave: "onSave", onCancel: "onCancel" }, providers: [CommonDialogService], usesOnChanges: true, ngImport: i0, 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                  <div>\r\n                  <mat-checkbox  color=\"primary\" formControlName=\"liveWithOffenderFlag\" name=\"liveWithOffenderFlag\" [(ngModel)]=\"editVictim.liveWithOffenderFlag\">victim live with offender</mat-checkbox>\r\n                  <br>\r\n                  <mat-checkbox  color=\"primary\" formControlName=\"allowCsosaContactFlag\" name=\"allowCsosaContactFlag\" [(ngModel)]=\"editVictim.allowCsosaContactFlag\">victim wants to be contacted by CSOSA</mat-checkbox>\r\n                  </div>\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", styles: ["mat-form-field{width:100%}.container{margin:16px;display:grid;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:grid;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}\n"], components: [{ type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i15.SmartAddressComponent, selector: "app-smart-address", inputs: ["showPsa", "housingTypeId", "modifiedBy", "rowHeight", "id", "outline", "readonly", "addressValidators"], outputs: ["isValid", "addressIdChange"] }, { type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i17.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.MatLabel, selector: "mat-label" }, { type: i11.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i10.MatSuffix, selector: "[matSuffix]" }, { type: PhoneMaskDirective, selector: "[phoneMask]", inputs: ["phoneControl", "preValue"] }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11$1.MatCellDef, selector: "[matCellDef]" }, { type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "date": i1$4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SmartVictimDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'csmart-victim-detail', providers: [CommonDialogService], 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                  <div>\r\n                  <mat-checkbox  color=\"primary\" formControlName=\"liveWithOffenderFlag\" name=\"liveWithOffenderFlag\" [(ngModel)]=\"editVictim.liveWithOffenderFlag\">victim live with offender</mat-checkbox>\r\n                  <br>\r\n                  <mat-checkbox  color=\"primary\" formControlName=\"allowCsosaContactFlag\" name=\"allowCsosaContactFlag\" [(ngModel)]=\"editVictim.allowCsosaContactFlag\">victim wants to be contacted by CSOSA</mat-checkbox>\r\n                  </div>\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", styles: ["mat-form-field{width:100%}.container{margin:16px;display:grid;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:grid;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.Location }, { type: i1$2.FormBuilder }, { type: i1$3.MatDialog }, { type: i5$1.ActivatedRoute }, { type: i5$1.Router }, { type: i4.MatSnackBar }, { type: CommonDialogService }, { type: NgcSmartVictimService }]; }, propDecorators: { victimDetail: [{
+                type: Input
+            }], staffId: [{
+                type: Input
+            }], offenderId: [{
+                type: Input
+            }], isIntake: [{
+                type: Input
+            }], onSave: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }] } });
+
+class NgcSmartVictimComponent {
+    constructor(dialog, victimService, router, route, snackBar, intakeService, smartWarrantUrl, document) {
+        this.dialog = dialog;
+        this.victimService = victimService;
+        this.router = router;
+        this.route = route;
+        this.snackBar = snackBar;
+        this.intakeService = intakeService;
+        this.smartWarrantUrl = smartWarrantUrl;
+        this.document = document;
+        this.appModuleId = '';
+        this.activatedRoute = null;
+        this.victims = [];
+        this.victimDetail = {};
+        this.showDetail = false;
+        this.victimListFilter = new VictimListFilter$1();
+        this.victimListDataSource = new MatTableDataSource();
+        this.doSpin = false;
+        this.showListFlag = false;
+        this.msg = "";
+        this.isIntake = false;
+    }
+    // private onChange(filter: VictimListFilter) {
+    //   console.log('filter in onchange');
+    //   console.log(filter);
+    //   this.getVictimList(filter);
+    // }
+    applyFilter(filterValue) {
+        this.victimListDataSource.filter = filterValue.trim().toLowerCase();
+    }
+    addRecord() {
+        this.showDetail = true;
+        this.showAdd = false;
+        this.victimDetail = null;
+        this.showListFlag = false;
+    }
+    editVictimDetail(record) {
+        console.log("victim edit record");
+        console.log(record);
+        console.log(record.victimId);
+        this.victimDetail = record;
+        this.showDetail = true;
+        this.showAdd = false;
+        this.showListFlag = false;
+    }
+    save(detail) {
+        this.showDetail = false;
+        this.showAdd = true;
+        this.showListFlag = true;
+    }
+    cancel() {
+        this.showDetail = false;
+        this.victimDetail = {};
+    }
+    ngAfterViewInit() {
+        this.victimListDataSource.paginator = this.paginator;
+        this.victimListDataSource.sort = this.sort;
+    }
+    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,
+        };
+    }
+    ngOnInit() {
+        var data = this.route.snapshot.data;
+        var myPath = this.router.url.slice(-10);
+        console.log("smart-victim ngOnInit");
+        console.log(this.intakeFlag);
+        console.log(myPath);
+        if (this.intakeFlag || myPath == "victimHome") {
+            this.isIntake = true;
+        }
+        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") {
+            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("myPath");
+        console.log(myPath);
+        if (this.showSearchForm == false ||
+            myPath == "victimList" ||
+            myPath == "victimHome") {
+            var myOffenderId;
+            if (this.offenderId) {
+                myOffenderId = this.offenderId;
+            }
+            else {
+                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";
+                myOffenderId = data.selectedOffender.offenderId;
+            }
+            const victimListFilter = {
+                offenderId: myOffenderId,
+                lastName: null,
+                firstName: null,
+                pdid: null,
+                birthDate: null,
+            };
+            console.log("victimListFilter in smar-victim componenet");
+            console.log(victimListFilter);
+            this.victimService
+                .getVictimListByFilter(victimListFilter)
+                .subscribe((data) => {
+                this.victimListDataSource.data = data;
+                this.victims = data;
+                data.forEach((d) => {
+                    if (d.homePhone == null || d.homePhone == "") {
+                        d.homePhone = d.cellPhone;
+                    }
+                    if (d.homePhone == null || d.homePhone == "") {
+                        d.homePhone = d.workPhone;
+                    }
+                });
+                console.log("victim data at line 179");
+                console.log(this.victims);
+                console.log("showListFlag");
+                console.log(this.showListFlag);
+                this.showListFlag = true;
+                if (data.length == 0) {
+                    this.msg = "No Record Found!";
+                }
+            });
+        }
+        else {
+            console.log("find filter");
+            console.log(this.victimListFilter);
+            if (this.showListFlag === true) {
+                if (this.victimListFilter != null) {
+                    this.victimService
+                        .getVictimListByFilter(this.victimListFilter)
+                        .subscribe((data) => {
+                        this.victimListDataSource.data = data;
+                        this.victims = data;
+                        console.log("victim data at line 201");
+                        console.log(data);
+                    });
+                }
+            }
+        }
+    }
+    formatPhoneNumber(phoneNumberString) {
+        if (!phoneNumberString)
+            return "";
+        var cleaned = ("" + phoneNumberString).replace(/\D/g, "");
+        var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+        if (match) {
+            return "(" + match[1] + ") " + match[2] + "-" + match[3];
+        }
+        return "";
+    }
+    saveIntake() {
+        if (!this.isIntake) {
+            return;
+        }
+        const intakeStep = {
+            intakeStepId: IntakeStep.VictimInformation,
+            offenderId: this.offenderId,
+            modifiedBy: this.staffId,
+        };
+        this.intakeService
+            .updateIntakeSteps(this.offenderId, intakeStep)
+            .subscribe((res) => {
+            console.log("save intake step.");
+            this.snackBar.open("Status Saved.", "", {
+                duration: 3000,
+            });
+            //this.router.navigate(['/warrant '], { queryParams: { intake: 1 } });
+            this.document.location.href = `${this.smartWarrantUrl}/warrant`;
+        });
+    }
+    goToCaseNote(victimId) {
+        this.router.navigate(["casenote", victimId]);
+    }
+    goToSaftyPlan(victimId) {
+        this.router.navigate(["saftyPlan", victimId]);
+    }
+    getVictimList(filter) {
+        this.victimListFilter = filter;
+        console.log("this.victimListFilter inside getVictimList");
+        console.log(this.victimListFilter);
+        this.doSpin = true;
+        this.victimService.getVictimListByFilter(filter).subscribe((data) => {
+            this.victimListDataSource.data = data;
+            this.doSpin = !this.doSpin;
+            if (data.length > 0) {
+                this.showListFlag = true;
+            }
+            else {
+                this.msg = "No record found!";
+            }
+        }, (err) => {
+            this.doSpin = !this.doSpin;
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimComponent, deps: [{ token: i1$3.MatDialog }, { token: NgcSmartVictimService }, { token: i5$1.Router }, { token: i5$1.ActivatedRoute }, { token: i4.MatSnackBar }, { token: IntakeServicesComponent }, { token: SMART_WARRANT_URL }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NgcSmartVictimComponent, selector: "csmart-victim", inputs: { offenderId: "offenderId", staffId: "staffId", staffRole: "staffRole", showCaseNote: "showCaseNote", showSafetyPlan: "showSafetyPlan", showAdd: "showAdd", showEdit: "showEdit", showRelationshipColumn: "showRelationshipColumn", showOffenderNameColumn: "showOffenderNameColumn", showOffenderPhoneColumn: "showOffenderPhoneColumn", showSearchForm: "showSearchForm", accessByModule: "accessByModule", intakeFlag: "intakeFlag", appModuleId: "appModuleId", activatedRoute: "activatedRoute" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, 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%}.rTableHeading,.rTableBody,.rTableFoot,.rTableRow{clear:both}.rTableHead,.rTableFoot{background-color:#ddd;font-weight:700}.rTableCell,.rTableHead{border:0px;float:left;padding:1px;width:28%}.rTable:after{visibility:hidden;display:block;font-size:0;content:\" \";clear:both;height:0}.victimSearch{display:grid;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-title,.example-headers-align .mat-expansion-panel-header-description{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-lastName,.mat-column-firstName,.mat-column-relationship,.mat-column-homePhone,.mat-column-offenderName{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;-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;-webkit-hyphens:auto;hyphens:auto}\n"], components: [{ type: VictimSearchFormComponent, selector: "app-victim-search-form", outputs: ["onSearch"] }, { type: SmartVictimDetailComponent, selector: "csmart-victim-detail", inputs: ["victimDetail", "staffId", "offenderId", "isIntake"], outputs: ["onSave", "onCancel"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.SmartAccessControlDirective, selector: "[accessControl]", inputs: ["accessControlConfig"] }, { type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11$1.MatCellDef, selector: "[matCellDef]" }, { type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: 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\" \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%}.rTableHeading,.rTableBody,.rTableFoot,.rTableRow{clear:both}.rTableHead,.rTableFoot{background-color:#ddd;font-weight:700}.rTableCell,.rTableHead{border:0px;float:left;padding:1px;width:28%}.rTable:after{visibility:hidden;display:block;font-size:0;content:\" \";clear:both;height:0}.victimSearch{display:grid;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-title,.example-headers-align .mat-expansion-panel-header-description{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-lastName,.mat-column-firstName,.mat-column-relationship,.mat-column-homePhone,.mat-column-offenderName{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;-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;-webkit-hyphens:auto;hyphens:auto}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$3.MatDialog }, { type: NgcSmartVictimService }, { type: i5$1.Router }, { type: i5$1.ActivatedRoute }, { type: i4.MatSnackBar }, { type: IntakeServicesComponent }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SMART_WARRANT_URL]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, propDecorators: { offenderId: [{
+                type: Input
+            }], staffId: [{
+                type: Input
+            }], staffRole: [{
+                type: Input
+            }], showCaseNote: [{
+                type: Input
+            }], showSafetyPlan: [{
+                type: Input
+            }], showAdd: [{
+                type: Input
+            }], showEdit: [{
+                type: Input
+            }], showRelationshipColumn: [{
+                type: Input
+            }], showOffenderNameColumn: [{
+                type: Input
+            }], showOffenderPhoneColumn: [{
+                type: Input
+            }], 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]
+            }] } });
+
+class SmartVictimDeleteConfirmComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    ngOnInit() {
+    }
+}
+/** @nocollapse */ /** @nocollapse */ SmartVictimDeleteConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SmartVictimDeleteConfirmComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ SmartVictimDeleteConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SmartVictimDeleteConfirmComponent, selector: "csmart-victim-delete-confirm", ngImport: i0, template: `
+  <h1 mat-dialog-title>Delete Confirmation</h1>
+  <div mat-dialog-content>
+    <p>Are you sure you want to delete this item?</p>
+  </div>
+  <div mat-dialog-actions class="actions">
+    <button mat-flat-button color="primary" (click)="onNoClick()">No</button>
+    <button mat-flat-button color="warn" [mat-dialog-close]='"YES"' cdkFocusInitial>Yes</button>
+  </div>
+  `, isInline: true, styles: [".actions{display:flex;justify-content:space-between}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SmartVictimDeleteConfirmComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'csmart-victim-delete-confirm',
+                    template: `
+  <h1 mat-dialog-title>Delete Confirmation</h1>
+  <div mat-dialog-content>
+    <p>Are you sure you want to delete this item?</p>
+  </div>
+  <div mat-dialog-actions class="actions">
+    <button mat-flat-button color="primary" (click)="onNoClick()">No</button>
+    <button mat-flat-button color="warn" [mat-dialog-close]='"YES"' cdkFocusInitial>Yes</button>
+  </div>
+  `,
+                    styles: [`
+     .actions{
+       display: flex;
+       justify-content: space-between;  
+      }
+  `]
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+
+class SharedModule {
+}
+/** @nocollapse */ /** @nocollapse */ SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatToolbarModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatDialogModule,
+        MatTabsModule,
+        MatListModule,
+        MatInputModule,
+        MatStepperModule,
+        BrowserAnimationsModule,
+        MatGridListModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatSidenavModule,
+        MatRadioModule,
+        MatIconModule,
+        MatSliderModule,
+        MatChipsModule,
+        MatSnackBarModule,
+        CdkTableModule,
+        MatSortModule,
+        MatPaginatorModule,
+        MatExpansionModule,
+        MatRippleModule], exports: [MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatToolbarModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatDialogModule,
+        MatTabsModule,
+        MatListModule,
+        MatInputModule,
+        MatStepperModule,
+        BrowserAnimationsModule,
+        MatGridListModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatSidenavModule,
+        MatRadioModule,
+        MatIconModule,
+        MatSliderModule,
+        MatChipsModule,
+        MatSnackBarModule,
+        CdkTableModule,
+        MatSortModule,
+        MatPaginatorModule,
+        MatExpansionModule,
+        MatRippleModule] });
+/** @nocollapse */ /** @nocollapse */ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SharedModule, imports: [[
+            MatButtonModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatToolbarModule,
+            MatSelectModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatDialogModule,
+            MatTabsModule,
+            MatListModule,
+            MatInputModule,
+            MatStepperModule,
+            BrowserAnimationsModule,
+            MatGridListModule,
+            MatProgressSpinnerModule,
+            MatTableModule,
+            MatSidenavModule,
+            MatRadioModule,
+            MatIconModule,
+            MatSliderModule,
+            MatChipsModule,
+            MatSnackBarModule,
+            CdkTableModule,
+            MatSortModule,
+            MatPaginatorModule,
+            MatExpansionModule,
+            MatRippleModule,
+        ], MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatToolbarModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatDialogModule,
+        MatTabsModule,
+        MatListModule,
+        MatInputModule,
+        MatStepperModule,
+        BrowserAnimationsModule,
+        MatGridListModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatSidenavModule,
+        MatRadioModule,
+        MatIconModule,
+        MatSliderModule,
+        MatChipsModule,
+        MatSnackBarModule,
+        CdkTableModule,
+        MatSortModule,
+        MatPaginatorModule,
+        MatExpansionModule,
+        MatRippleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatButtonModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatToolbarModule,
+                        MatSelectModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatDialogModule,
+                        MatTabsModule,
+                        MatListModule,
+                        MatInputModule,
+                        MatStepperModule,
+                        BrowserAnimationsModule,
+                        MatGridListModule,
+                        MatProgressSpinnerModule,
+                        MatTableModule,
+                        MatSidenavModule,
+                        MatRadioModule,
+                        MatIconModule,
+                        MatSliderModule,
+                        MatChipsModule,
+                        MatSnackBarModule,
+                        CdkTableModule,
+                        MatSortModule,
+                        MatPaginatorModule,
+                        MatExpansionModule,
+                        MatRippleModule,
+                    ],
+                    exports: [
+                        MatButtonModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatToolbarModule,
+                        MatSelectModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatDialogModule,
+                        MatTabsModule,
+                        MatListModule,
+                        MatInputModule,
+                        MatStepperModule,
+                        BrowserAnimationsModule,
+                        MatGridListModule,
+                        MatProgressSpinnerModule,
+                        MatTableModule,
+                        MatSidenavModule,
+                        MatRadioModule,
+                        MatIconModule,
+                        MatSliderModule,
+                        MatChipsModule,
+                        MatSnackBarModule,
+                        CdkTableModule,
+                        MatSortModule,
+                        MatPaginatorModule,
+                        MatExpansionModule,
+                        MatRippleModule,
+                    ],
+                    entryComponents: [
+                    // SpinnerComponent,
+                    ],
+                }]
+        }] });
+
+class CommonDialogModule {
+}
+/** @nocollapse */ /** @nocollapse */ CommonDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ CommonDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogModule, declarations: [CommonDialogComponent], imports: [
+        // MaterialModule.forRoot(),
+        SharedModule
+    ], exports: [CommonDialogComponent] });
+/** @nocollapse */ /** @nocollapse */ CommonDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogModule, providers: [
+        CommonDialogComponent,
+    ], imports: [[
+            // MaterialModule.forRoot(),
+            SharedModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CommonDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        // MaterialModule.forRoot(),
+                        SharedModule
+                    ],
+                    exports: [
+                        CommonDialogComponent,
+                    ],
+                    declarations: [
+                        CommonDialogComponent,
+                    ],
+                    providers: [
+                        CommonDialogComponent,
+                    ],
+                    entryComponents: [
+                        CommonDialogComponent,
+                    ],
+                }]
+        }] });
+
+function dateValidator() {
+    return (control) => {
+        const dateStr = control.value;
+        const invalidObj = { 'date': 'future Date is Not Allowed' };
+        const date = new Date(dateStr);
+        if (date > new Date()) {
+            return invalidObj;
+        }
+        return null;
+    };
+}
+function passDateValidator() {
+    return (control) => {
+        const dateStr = control.value;
+        const invalidObj = { 'date': 'Pass Date is Not Allowed' };
+        const date = new Date(dateStr);
+        if (date < new Date()) {
+            return invalidObj;
+        }
+        return null;
+    };
+}
+function dateLessThan(dateField1, dateField2, validatorField) {
+    return (c) => {
+        const date1 = c.get(dateField1).value;
+        const date2 = c.get(dateField2).value;
+        console.log('date1');
+        console.log(date1);
+        console.log('date2');
+        console.log(date2);
+        //const invalidObj = { 'dateRule': 'date is Not Allowed' };
+        if ((date1 !== null && date2 !== null) && date1 > date2) {
+            console.log(validatorField);
+            return validatorField;
+            //return invalidObj;
+        }
+        console.log('return null');
+        return null;
+    };
+}
+function greaterLessThan(dateField1, dateField2, validatorField) {
+    return (c) => {
+        const date1 = c.get(dateField1).value;
+        const date2 = c.get(dateField2).value;
+        console.log('end date');
+        console.log(date1);
+        console.log('ver date');
+        console.log(date2);
+        //const invalidObj = { 'dateRule': 'date is Not Allowed' };
+        if ((date1 !== null && date2 !== null) && date1 < date2) {
+            console.log(validatorField);
+            return validatorField;
+            //return invalidObj;
+        }
+        console.log('return null');
+        return null;
+    };
+}
+
+class CaseNoteComponent {
+    constructor(formBuilder, _victimServicesComponent, commonDialogService, snackBar, route, router, smartAuthService) {
+        this.formBuilder = formBuilder;
+        this._victimServicesComponent = _victimServicesComponent;
+        this.commonDialogService = commonDialogService;
+        this.snackBar = snackBar;
+        this.route = route;
+        this.router = router;
+        this.smartAuthService = smartAuthService;
+        this.editCaseNote = {};
+        this.caseNoteDataSource = new MatTableDataSource();
+        this.initForm();
+    }
+    initForm() {
+        this.caseNoteForm = this.formBuilder.group({
+            caseNoteDate: new FormControl('', Validators.compose([
+                Validators.required, dateValidator()
+            ])),
+            contactType: new FormControl('', Validators.required),
+            contactPurpose: new FormControl('', Validators.required),
+            comment: new FormControl('', Validators.required)
+        });
+        this.caseNoteForm.markAsPristine();
+        this.caseNoteForm.markAsUntouched();
+    }
+    ngAfterViewInit() {
+        this.smartAuthService.setPermission('Victim', this.route.snapshot);
+    }
+    ngOnInit() {
+        var data = this.route.snapshot.data;
+        this.loginStaff = data.loginStaff;
+        this.staffId = this.loginStaff.staffId;
+        this.sub = this.route.params.subscribe(params => {
+            this.victimId = params['victimId'];
+        });
+        this.addDisableFlag = false;
+        this.hiddenDetailFlag = true;
+        this.hiddenAddNewFlag = false;
+        this._victimServicesComponent.getVictim(this.victimId).subscribe((items) => {
+            this.victimName = items.firstName + ', ' + items.lastName;
+        });
+        this._victimServicesComponent.getContactTypes().subscribe((items) => {
+            this.contactTypes = items;
+        });
+        this._victimServicesComponent.getVictimContactPurposes().subscribe((items) => {
+            this.contactPurposes = items;
+        });
+        this._victimServicesComponent.getCasetNotes(this.victimId).subscribe(caseNoteList => {
+            console.log('caseNoteList');
+            console.log(caseNoteList);
+            this.caseNoteList = caseNoteList;
+            this.caseNoteDataSource.data = this.caseNoteList;
+        });
+        // this._victimServicesComponent.getCasetNotes(this.victimId).subscribe(
+        //   (itms: any) => {
+        //   const ELEMENT_DATA: Element[] = itms;
+        //   this.caseNoteDataSource.data =  ELEMENT_DATA;
+        //   })
+    }
+    onEditCaseNote(victimCaseNoteId) {
+        this.hiddenDetailFlag = false;
+        this.hiddenAddNewFlag = true;
+        this.addDisableFlag = true;
+        this.editCaseNote = this.caseNoteList.find(x => x.victimCaseNoteId === victimCaseNoteId);
+    }
+    onDeleteCaseNote(victimCaseNoteId) {
+        this.commonDialogService
+            .confirm('', 'Do you want to delete this case note?', 'Yes', 'No')
+            .subscribe(res => {
+            this.result = res;
+            if (this.result) {
+                this._victimServicesComponent.deleteCaseNote(victimCaseNoteId, this.staffId)
+                    .subscribe(result => {
+                    this.snackBar.open('delete Successfully !', '', { duration: 3000, });
+                    this._victimServicesComponent.getCasetNotes(this.victimId).subscribe(caseNoteList => {
+                        this.caseNoteList = caseNoteList;
+                        this.caseNoteDataSource.data = this.caseNoteList;
+                    });
+                });
+            }
+        });
+    }
+    onAddNew() {
+        this.hiddenDetailFlag = false;
+        this.editCaseNote.victimCaseNoteId = 0;
+        const caseNoteDateControl = this.caseNoteForm.get('caseNoteDate');
+        caseNoteDateControl.setValue(null);
+        caseNoteDateControl.setErrors(null);
+        caseNoteDateControl.markAsPristine();
+        caseNoteDateControl.markAsPristine();
+        const contactTypeControl = this.caseNoteForm.get('contactType');
+        contactTypeControl.setValue(null);
+        contactTypeControl.setErrors(null);
+        contactTypeControl.markAsPristine();
+        contactTypeControl.markAsUntouched();
+        const contactPurposeControl = this.caseNoteForm.get('contactPurpose');
+        contactPurposeControl.setValue(null);
+        contactPurposeControl.setErrors(null);
+        contactPurposeControl.markAsPristine();
+        contactPurposeControl.markAsUntouched();
+        const commentControl = this.caseNoteForm.get('comment');
+        commentControl.setValue(null);
+        commentControl.setErrors(null);
+        commentControl.markAsPristine();
+        commentControl.markAsUntouched();
+    }
+    back() {
+        this.router.navigate(['victimHome']);
+    }
+    saveCaseNote() {
+        if (this.editCaseNote.victimCaseNoteId === undefined || this.editCaseNote.victimCaseNoteId === 0) {
+            const castNote = {
+                victimId: this.victimId,
+                victimCaseNoteId: 0,
+                caseNoteDate: this.editCaseNote.caseNoteDate,
+                contactTypeId: this.editCaseNote.contactTypeId,
+                contactType: null,
+                victimContactPurposeId: this.editCaseNote.victimContactPurposeId,
+                victimContactPurpose: null,
+                comment: this.editCaseNote.comment,
+                modifiedBy: this.staffId,
+                victimFirstName: null,
+                victimLastName: null
+            };
+            this._victimServicesComponent.addCaseNote(castNote).subscribe(result => {
+                this.snackBar.open('Saved Successfully !', '', {
+                    duration: 3000,
+                });
+                this.hiddenDetailFlag = true;
+                this._victimServicesComponent.getCasetNotes(this.victimId).subscribe(caseNoteList => {
+                    this.caseNoteList = caseNoteList;
+                    this.caseNoteDataSource.data = this.caseNoteList;
+                });
+            });
+        }
+        else {
+            this._victimServicesComponent.updateCaseNote(this.editCaseNote).subscribe(result => {
+                this.snackBar.open('Update Successfully !', '', {
+                    duration: 3000,
+                });
+                this.hiddenDetailFlag = true;
+                this.hiddenAddNewFlag = false;
+                this.addDisableFlag = false;
+                this._victimServicesComponent.getCasetNotes(this.victimId).subscribe(caseNoteList => {
+                    this.caseNoteList = caseNoteList;
+                    this.caseNoteDataSource.data = this.caseNoteList;
+                });
+            });
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CaseNoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CaseNoteComponent, deps: [{ token: i1$2.FormBuilder }, { token: NgcSmartVictimService }, { token: CommonDialogService }, { token: i4.MatSnackBar }, { token: i5$1.ActivatedRoute }, { token: i5$1.Router }, { token: i6.SmartAuthService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ CaseNoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CaseNoteComponent, selector: "ng-component", providers: [CommonDialogService], ngImport: i0, 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\" >Case Note</h4>\r\n                        </mat-toolbar>\r\n                        <br>\r\n                        <div class=\"row\" >\r\n                                <div [hidden]=\"hiddenAddNewFlag\">\r\n                                &nbsp;&nbsp;<button mat-raised-button color=\"primary\" (click)=\"onAddNew()\" [disabled]=\"addDisableFlag\">Add Case Note</button>\r\n\r\n                                &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n                                </div>\r\n                       </div>\r\n\r\n                        <div [hidden]=\"hiddenDetailFlag\" >\r\n                                        <mat-card >\r\n                                        <div class='container'>       \r\n                                        <form [formGroup]=\"caseNoteForm\" #caseNoteDetailForm=\"ngForm\" >\r\n                                                    \r\n                                                <div>\r\n                                                        <mat-label>Victim Name:</mat-label>\r\n                                                                {{victimName}} \r\n                                                </div>\r\n                                                      \r\n\r\n                                                <div>      \r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Date of Case Note: </mat-label>\r\n                                                                 <input matInput formControlName=\"caseNoteDate\"   \r\n                                                                 (click)=\"caseNoteDate.open()\" \r\n                                                                 [matDatepicker]=\"caseNoteDate\" \r\n                                                                 placeholder=\"Choose a start date\" \r\n                                                                 [(ngModel)]=\"editCaseNote.caseNoteDate\" required>\r\n                                                                <mat-datepicker-toggle matSuffix [for]=\"caseNoteDate\"></mat-datepicker-toggle>\r\n                                                                <mat-datepicker #caseNoteDate></mat-datepicker>\r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('caseNoteDate').errors \r\n                                                                && (caseNoteForm.get('caseNoteDate').dirty || caseNoteForm.get('caseNoteDate').touched)\">\r\n                                                                <mat-error>case note date is <strong>required</strong></mat-error>\r\n                                                                </div> \r\n\r\n                                                                <div class=\"help-block\" \r\n                                                                *ngIf=\"caseNoteForm.get('caseNoteDate').hasError('date') \r\n                                                                && (caseNoteForm.get('caseNoteDate').dirty || caseNoteForm.get('caseNoteDate').touched)\">\r\n                                                                <mat-error>future case note Date is <strong>not allowed</strong></mat-error>\r\n                                                                </div>\r\n\r\n                                                        </mat-form-field>\r\n\r\n                                                </div>  \r\n                                                                \r\n                                                       \r\n\r\n                                                <div>\r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Contact Type:</mat-label>\r\n                                                                <mat-select  placeholder=\"contactType\" formControlName=\"contactType\"  required   [(ngModel)]=\"editCaseNote.contactTypeId\">\r\n                                                                        <mat-option *ngFor=\" let contactType of contactTypes\" [value]=\"contactType.contactTypeId\" >{{contactType.name}}</mat-option>\r\n                                                                </mat-select>\r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('contactType').errors \r\n                                                                && (caseNoteForm.get('contactType').dirty || caseNoteForm.get('contactType').touched)\">\r\n                                                                <mat-error>comment is <strong>required</strong></mat-error>\r\n                                                                </div> \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 Purpose:</mat-label>\r\n                                                                <mat-select  formControlName=\"contactPurpose\"   required [(ngModel)]=\"editCaseNote.victimContactPurposeId\" class=\"mat-select-inner\">\r\n                                                                        <mat-option *ngFor=\" let contactPurpose of contactPurposes\" [value]=\"contactPurpose.victimContactPurposeId\" >{{contactPurpose.name}}</mat-option>\r\n                                                                </mat-select>\r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('contactPurpose').errors \r\n                                                                && (caseNoteForm.get('contactPurpose').dirty || caseNoteForm.get('contactPurpose').touched)\">\r\n                                                                <mat-error>comment is <strong>required</strong></mat-error>\r\n                                                                </div> \r\n                                                                \r\n                                                        </mat-form-field>\r\n                                                </div>  \r\n                                                \r\n                                                <div>\r\n\r\n                                                        <mat-form-field style=\"width: 400px;\">\r\n                                                                <mat-label>Comment:</mat-label>\r\n                                                                <textarea \r\n                                                                class=\"textarea-content\"\r\n                                                                matInput \r\n                                                                placeholder=\"\" \r\n                                                                required formControlName=\"comment\" \r\n                                                                [(ngModel)]=\"editCaseNote.comment\"\r\n                                                                cdkTextareaAutosize\r\n                                                                #autosize=\"cdkTextareaAutosize\"\r\n                                                                cdkAutosizeMinRows=\"8\"\r\n                                                                cdkAutosizeMaxRows=\"12\">\r\n                                                                </textarea> \r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('comment').errors \r\n                                                                && (caseNoteForm.get('comment').dirty || caseNoteForm.get('comment').touched)\">\r\n                                                                <mat-error>comment is <strong>required</strong></mat-error>\r\n                                                                </div> \r\n                                                        </mat-form-field>\r\n                                                </div>\r\n                                                \r\n                                                <div>\r\n                                                        <button  mat-raised-button color=\"primary\" (click)=\"saveCaseNote()\"  [disabled]=\"!caseNoteDetailForm.form.valid\" >Save</button>\r\n\r\n                                                        &nbsp;&nbsp;<button  mat-raised-button color=\"primary\"  (click)=\"hiddenDetailFlag = true;addDisableFlag = false; this.hiddenAddNewFlag = false;\">Cancel</button>\r\n                                                </div>\r\n\r\n                                              </form>\r\n                                              </div>\r\n                                                </mat-card>\r\n                                        \r\n                                        </div>\r\n                        <br>\r\n                        <mat-table #table [dataSource]=\"caseNoteDataSource\" class=\"example-table\">\r\n                                        <ng-container matColumnDef=\"caseNoteDate\">\r\n                                            <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Case Note Date</mat-header-cell>\r\n                                            <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.caseNoteDate | date}} </mat-cell>\r\n                                        </ng-container>\r\n\r\n\r\n                                        <ng-container matColumnDef=\"contactType\">\r\n                                                <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Type</mat-header-cell>\r\n                                                <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.contactType}} </mat-cell>\r\n                                        </ng-container>\r\n                                        \r\n                                    \r\n                                        <ng-container matColumnDef=\"contactPurpose\">\r\n                                                <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Purpose</mat-header-cell>\r\n                                                <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.contactPurpose}} </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=\"victimCaseNoteId\">\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                                                <button \r\n                                                class=\"sac-cso-read sac-vsp-read\"  \r\n                                                mat-icon-button \r\n                                                color=\"primary\"  \r\n                                                matTooltip=\"Edit Case Note\" \r\n                                                (click)=\"onEditCaseNote(row.victimCaseNoteId)\">\r\n                                                        <i class=\"material-icons\">mode_edit</i>\r\n                                                </button>\r\n\r\n                                                &nbsp;&nbsp;\r\n                                             \r\n                                              \r\n\r\n                                        <button\r\n                                        class=\"sac-vsp-read\"\r\n                                        matTooltip=\"Delete Case Note\" \r\n                                        mat-icon-button\r\n                                        color=\"primary\"\r\n                                        (click)=\"onDeleteCaseNote(row.victimCaseNoteId)\">\r\n                                        <i class=\"material-icons\">delete</i>\r\n                                        </button>\r\n\r\n\r\n\r\n\r\n                                            </mat-cell>\r\n                                        </ng-container>\r\n        \r\n                                        <mat-header-row *matHeaderRowDef=\"['caseNoteDate', 'contactType', 'contactPurpose', 'comment', 'victimCaseNoteId']\" class=\"example-header-row\"></mat-header-row>\r\n                                        <mat-row *matRowDef=\"let row; columns:['caseNoteDate', 'contactType', 'contactPurpose', 'comment', 'victimCaseNoteId'];\" class=\"example-row\"></mat-row>\r\n                                        </mat-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n</mat-card-content>\r\n</mat-card>", styles: [".container{width:800px;margin:16px;display:grid;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}.textarea-content{width:500px}\n"], components: [{ type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i8.MatCardHeader, selector: "mat-card-header" }, { type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatSuffix, selector: "[matSuffix]" }, { type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11$1.MatCellDef, selector: "[matCellDef]" }, { type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "date": i1$4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CaseNoteComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [CommonDialogService], 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\" >Case Note</h4>\r\n                        </mat-toolbar>\r\n                        <br>\r\n                        <div class=\"row\" >\r\n                                <div [hidden]=\"hiddenAddNewFlag\">\r\n                                &nbsp;&nbsp;<button mat-raised-button color=\"primary\" (click)=\"onAddNew()\" [disabled]=\"addDisableFlag\">Add Case Note</button>\r\n\r\n                                &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n                                </div>\r\n                       </div>\r\n\r\n                        <div [hidden]=\"hiddenDetailFlag\" >\r\n                                        <mat-card >\r\n                                        <div class='container'>       \r\n                                        <form [formGroup]=\"caseNoteForm\" #caseNoteDetailForm=\"ngForm\" >\r\n                                                    \r\n                                                <div>\r\n                                                        <mat-label>Victim Name:</mat-label>\r\n                                                                {{victimName}} \r\n                                                </div>\r\n                                                      \r\n\r\n                                                <div>      \r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Date of Case Note: </mat-label>\r\n                                                                 <input matInput formControlName=\"caseNoteDate\"   \r\n                                                                 (click)=\"caseNoteDate.open()\" \r\n                                                                 [matDatepicker]=\"caseNoteDate\" \r\n                                                                 placeholder=\"Choose a start date\" \r\n                                                                 [(ngModel)]=\"editCaseNote.caseNoteDate\" required>\r\n                                                                <mat-datepicker-toggle matSuffix [for]=\"caseNoteDate\"></mat-datepicker-toggle>\r\n                                                                <mat-datepicker #caseNoteDate></mat-datepicker>\r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('caseNoteDate').errors \r\n                                                                && (caseNoteForm.get('caseNoteDate').dirty || caseNoteForm.get('caseNoteDate').touched)\">\r\n                                                                <mat-error>case note date is <strong>required</strong></mat-error>\r\n                                                                </div> \r\n\r\n                                                                <div class=\"help-block\" \r\n                                                                *ngIf=\"caseNoteForm.get('caseNoteDate').hasError('date') \r\n                                                                && (caseNoteForm.get('caseNoteDate').dirty || caseNoteForm.get('caseNoteDate').touched)\">\r\n                                                                <mat-error>future case note Date is <strong>not allowed</strong></mat-error>\r\n                                                                </div>\r\n\r\n                                                        </mat-form-field>\r\n\r\n                                                </div>  \r\n                                                                \r\n                                                       \r\n\r\n                                                <div>\r\n                                                        <mat-form-field>\r\n                                                                <mat-label>Contact Type:</mat-label>\r\n                                                                <mat-select  placeholder=\"contactType\" formControlName=\"contactType\"  required   [(ngModel)]=\"editCaseNote.contactTypeId\">\r\n                                                                        <mat-option *ngFor=\" let contactType of contactTypes\" [value]=\"contactType.contactTypeId\" >{{contactType.name}}</mat-option>\r\n                                                                </mat-select>\r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('contactType').errors \r\n                                                                && (caseNoteForm.get('contactType').dirty || caseNoteForm.get('contactType').touched)\">\r\n                                                                <mat-error>comment is <strong>required</strong></mat-error>\r\n                                                                </div> \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 Purpose:</mat-label>\r\n                                                                <mat-select  formControlName=\"contactPurpose\"   required [(ngModel)]=\"editCaseNote.victimContactPurposeId\" class=\"mat-select-inner\">\r\n                                                                        <mat-option *ngFor=\" let contactPurpose of contactPurposes\" [value]=\"contactPurpose.victimContactPurposeId\" >{{contactPurpose.name}}</mat-option>\r\n                                                                </mat-select>\r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('contactPurpose').errors \r\n                                                                && (caseNoteForm.get('contactPurpose').dirty || caseNoteForm.get('contactPurpose').touched)\">\r\n                                                                <mat-error>comment is <strong>required</strong></mat-error>\r\n                                                                </div> \r\n                                                                \r\n                                                        </mat-form-field>\r\n                                                </div>  \r\n                                                \r\n                                                <div>\r\n\r\n                                                        <mat-form-field style=\"width: 400px;\">\r\n                                                                <mat-label>Comment:</mat-label>\r\n                                                                <textarea \r\n                                                                class=\"textarea-content\"\r\n                                                                matInput \r\n                                                                placeholder=\"\" \r\n                                                                required formControlName=\"comment\" \r\n                                                                [(ngModel)]=\"editCaseNote.comment\"\r\n                                                                cdkTextareaAutosize\r\n                                                                #autosize=\"cdkTextareaAutosize\"\r\n                                                                cdkAutosizeMinRows=\"8\"\r\n                                                                cdkAutosizeMaxRows=\"12\">\r\n                                                                </textarea> \r\n\r\n                                                                <div class=\"help-block\" *ngIf=\"caseNoteForm.get('comment').errors \r\n                                                                && (caseNoteForm.get('comment').dirty || caseNoteForm.get('comment').touched)\">\r\n                                                                <mat-error>comment is <strong>required</strong></mat-error>\r\n                                                                </div> \r\n                                                        </mat-form-field>\r\n                                                </div>\r\n                                                \r\n                                                <div>\r\n                                                        <button  mat-raised-button color=\"primary\" (click)=\"saveCaseNote()\"  [disabled]=\"!caseNoteDetailForm.form.valid\" >Save</button>\r\n\r\n                                                        &nbsp;&nbsp;<button  mat-raised-button color=\"primary\"  (click)=\"hiddenDetailFlag = true;addDisableFlag = false; this.hiddenAddNewFlag = false;\">Cancel</button>\r\n                                                </div>\r\n\r\n                                              </form>\r\n                                              </div>\r\n                                                </mat-card>\r\n                                        \r\n                                        </div>\r\n                        <br>\r\n                        <mat-table #table [dataSource]=\"caseNoteDataSource\" class=\"example-table\">\r\n                                        <ng-container matColumnDef=\"caseNoteDate\">\r\n                                            <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Case Note Date</mat-header-cell>\r\n                                            <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.caseNoteDate | date}} </mat-cell>\r\n                                        </ng-container>\r\n\r\n\r\n                                        <ng-container matColumnDef=\"contactType\">\r\n                                                <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Type</mat-header-cell>\r\n                                                <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.contactType}} </mat-cell>\r\n                                        </ng-container>\r\n                                        \r\n                                    \r\n                                        <ng-container matColumnDef=\"contactPurpose\">\r\n                                                <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Contact Purpose</mat-header-cell>\r\n                                                <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.contactPurpose}} </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=\"victimCaseNoteId\">\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                                                <button \r\n                                                class=\"sac-cso-read sac-vsp-read\"  \r\n                                                mat-icon-button \r\n                                                color=\"primary\"  \r\n                                                matTooltip=\"Edit Case Note\" \r\n                                                (click)=\"onEditCaseNote(row.victimCaseNoteId)\">\r\n                                                        <i class=\"material-icons\">mode_edit</i>\r\n                                                </button>\r\n\r\n                                                &nbsp;&nbsp;\r\n                                             \r\n                                              \r\n\r\n                                        <button\r\n                                        class=\"sac-vsp-read\"\r\n                                        matTooltip=\"Delete Case Note\" \r\n                                        mat-icon-button\r\n                                        color=\"primary\"\r\n                                        (click)=\"onDeleteCaseNote(row.victimCaseNoteId)\">\r\n                                        <i class=\"material-icons\">delete</i>\r\n                                        </button>\r\n\r\n\r\n\r\n\r\n                                            </mat-cell>\r\n                                        </ng-container>\r\n        \r\n                                        <mat-header-row *matHeaderRowDef=\"['caseNoteDate', 'contactType', 'contactPurpose', 'comment', 'victimCaseNoteId']\" class=\"example-header-row\"></mat-header-row>\r\n                                        <mat-row *matRowDef=\"let row; columns:['caseNoteDate', 'contactType', 'contactPurpose', 'comment', 'victimCaseNoteId'];\" class=\"example-row\"></mat-row>\r\n                                        </mat-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n</mat-card-content>\r\n</mat-card>", styles: [".container{width:800px;margin:16px;display:grid;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}.textarea-content{width:500px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: NgcSmartVictimService }, { type: CommonDialogService }, { type: i4.MatSnackBar }, { type: i5$1.ActivatedRoute }, { type: i5$1.Router }, { type: i6.SmartAuthService }]; } });
+
+class ContactComponent {
+    constructor(_victimServicesComponent, 
+    //private commonDialogService: CommonDialogService,
+    snackBar, route, router, smartAuthService) {
+        this._victimServicesComponent = _victimServicesComponent;
+        this.snackBar = snackBar;
+        this.route = route;
+        this.router = router;
+        this.smartAuthService = smartAuthService;
+        this.editContact = {};
+        this.staff = {};
+        this.contactForm = new FormGroup({
+            //contactDate: new FormControl(),
+            contactDate: new FormControl('', Validators.compose([
+                dateValidator()
+            ])),
+            contactMethod: new FormControl(),
+            contactBy: new FormControl(),
+            comment: new FormControl(),
+            nextContactDate: new FormControl()
+        });
+    }
+    ngAfterViewInit() {
+        this.smartAuthService.setPermission('Victim', this.route.snapshot);
+    }
+    ngOnInit() {
+        var data = this.route.snapshot.data;
+        this.loginStaff = data.loginStaff;
+        this.staffId = this.loginStaff.staffId;
+        this.staff = [
+            {
+                staffId: this.loginStaff.staffId,
+                fullName: this.loginStaff.firstName + ' ' + this.loginStaff.lastName,
+            },
+        ];
+        this.sub = this.route.params.subscribe(params => {
+            this.victimId = params['victimId'];
+            console.log('my this.victimId');
+            console.log(this.victimId);
+        });
+        this._victimServicesComponent.getContactMethods().subscribe((items) => {
+            this.contactMethods = items;
+            console.log('this.contactMethods');
+            console.log(this.contactMethods);
+        });
+        // this._victimServicesComponent.getContactBys().subscribe(
+        //   (items: any) => {
+        //     this.contactBy= items;
+        //   }
+        // );
+        // this._victimServicesComponent.getContacts(this.victimId).subscribe(
+        //   caseNoteList => {
+        //     this.caseNoteList = caseNoteList; 
+        //   }
+        // );
+    }
+    onEditContact(victimContactId) {
+        // this.hiddenDetailFlag =false;
+        // this.hiddenAddNewFlag = true;
+        // this.addDisableFlag = true;
+        // this.editCaseNote = this.caseNoteList.find(x => x.victimCaseNoteId === victimCaseNoteId);
+    }
+    // onDeleteCaseNote(victimCaseNoteId: number){
+    //    this.commonDialogService
+    //   .confirm('', 'Do you want to delete this case note?', 'Yes', 'No')
+    //   .subscribe(res => {this.result =  res;
+    //       if (this.result) {
+    //           this._victimServicesComponent.deleteCaseNote(victimCaseNoteId, this.staffId)
+    //            .subscribe(result => {
+    //               this.snackBar.open('delete Successfully !', '', { duration: 3000,});
+    //           this._victimServicesComponent.getCasetNotes(this.victimId).subscribe(
+    //             caseNoteList => {
+    //               this.caseNoteList = caseNoteList; 
+    //             }
+    //           );
+    //              }
+    //            );
+    //       }
+    //    });
+    // }
+    onAddNew() {
+        // this.editCas.caseNoteDate = null;
+        // this.editCaseNote.contactTypeId = null;
+        // this.editCaseNote.victimContactPurposeId = null;
+        // this.editCaseNote.comment = null;
+    }
+    back() {
+        this.router.navigate(['victimDetail', this.victimId]);
+    }
+    saveContact() {
+        const contact = {
+            victimId: this.victimId,
+            victimContactId: 0,
+            contactDate: this.editContact.contactDate,
+            victimContactMethodId: this.editContact.victimContactMethodId,
+            contactMethod: null,
+            contactedByName: null,
+            contactedBy: this.editContact.contactedBy,
+            comment: this.editContact.comment,
+            nextContactDate: this.editContact.nextContactDate,
+            modifiedBy: this.staffId,
+        };
+        this._victimServicesComponent.addContact(contact).subscribe(result => {
+            this.snackBar.open('Saved Successfully !', '', {
+                duration: 3000,
+            });
+            this.router.navigate(['victimDetail', this.victimId]);
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ContactComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ContactComponent, deps: [{ token: NgcSmartVictimService }, { token: i4.MatSnackBar }, { token: i5$1.ActivatedRoute }, { token: i5$1.Router }, { token: i6.SmartAuthService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ContactComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ContactComponent, selector: "ng-component", ngImport: i0, 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:grid;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}\n"], components: [{ type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i8.MatCardHeader, selector: "mat-card-header" }, { type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatSuffix, selector: "[matSuffix]" }, { type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: 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\" #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:grid;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: NgcSmartVictimService }, { type: i4.MatSnackBar }, { type: i5$1.ActivatedRoute }, { type: i5$1.Router }, { type: i6.SmartAuthService }]; } });
+
+class VictimSafetyPlanComponent {
+    constructor(_victimServicesComponent, commonDialogService, http, dialog, route, router, snackBar, smartAuthService) {
+        this._victimServicesComponent = _victimServicesComponent;
+        this.commonDialogService = commonDialogService;
+        this.http = http;
+        this.dialog = dialog;
+        this.route = route;
+        this.router = router;
+        this.snackBar = snackBar;
+        this.smartAuthService = smartAuthService;
+        this.editSafetyPlan = {};
+        this.safetyPlanDataSource = new MatTableDataSource();
+    }
+    ngAfterViewInit() {
+        this.smartAuthService.setPermission('Victim', this.route.snapshot);
+    }
+    ngOnInit() {
+        var data = this.route.snapshot.data;
+        this.loginStaff = data.loginStaff;
+        this.staffId = this.loginStaff.staffId;
+        this.sub = this.route.params.subscribe(params => {
+            this.victimId = params['victimId'];
+        });
+        this.hiddenAddNewFlag = false;
+        this.victimName = this.victimName;
+        this._victimServicesComponent.getSafetyPlans(this.victimId).subscribe(victimSafetyPlans => {
+            this.victimSafetyPlans = victimSafetyPlans;
+            this.safetyPlanDataSource.data = this.victimSafetyPlans;
+            console.log('this.victimSafetyPlans');
+            console.log(this.victimSafetyPlans);
+        });
+        //  this.myVictimServiceId =1;
+        // this._victimServicesComponent.getVictimServiceDetail(this.myVictimServiceId).subscribe(
+        //   victimServiceDetail => {
+        //     this.victimServiceDetail = victimServiceDetail;
+        //     console.log('service detail');
+        //     console.log(this.victimServiceDetail); 
+        //   }
+        // );
+        this._victimServicesComponent.getServiceStatusHistories(1).subscribe(victimServiceStatusHistories => {
+            // this.victimServiceStatusHistories = victimServiceStatusHistories; 
+        });
+    }
+    //---------------graphQL--------------------------------------
+    //   getVictimServiceTypeProgramProviders(): Observable<VictimServiceTypeProgramProviderModel[]> {
+    //     const queryString = `
+    //         {
+    //           findVictimServiceTypeProgramProviders {
+    //                 data {
+    //                   victimServiceTypeProgramProviderId
+    //                   victimServiceType
+    //                   victimProgramProvider
+    //                 }
+    //               }
+    //         }`;
+    //     return this.http.post<any>(environment.smartApiUrl, { query: queryString })
+    //         .map(result => {
+    //         return result.data.findVictimServiceTypeProgramProviders.data;
+    //     });
+    // }
+    goToSafetyPlanDetail(victimServiceId) {
+        this.router.navigate(['saftyPlanDetail', victimServiceId, this.victimId]);
+    }
+    onAddNew() {
+        this.hiddenDetailFlag = false;
+    }
+    onDeleteSafetyPlan(victimServiceId) {
+        this.commonDialogService
+            .confirm('', 'Do you want to delete this safety plan?', 'Yes', 'No')
+            .subscribe(res => {
+            this.result = res;
+            if (this.result) {
+                this._victimServicesComponent.deleteSafetyPlan(victimServiceId, this.staffId)
+                    .subscribe(result => {
+                    this.snackBar.open('delete safety plan Successfully !', '', { duration: 3000, });
+                    this._victimServicesComponent.getSafetyPlans(this.victimId).subscribe(victimSafetyPlans => {
+                        this.victimSafetyPlans = victimSafetyPlans;
+                        this.safetyPlanDataSource.data = this.victimSafetyPlans;
+                    });
+                });
+            }
+        });
+    }
+    back() {
+        this.router.navigate(['victimHome']);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ VictimSafetyPlanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimSafetyPlanComponent, deps: [{ token: NgcSmartVictimService }, { token: CommonDialogService }, { token: i1.HttpClient }, { token: i1$3.MatDialog }, { token: i5$1.ActivatedRoute }, { token: i5$1.Router }, { token: i4.MatSnackBar }, { token: i6.SmartAuthService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VictimSafetyPlanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VictimSafetyPlanComponent, selector: "ng-component", providers: [CommonDialogService], ngImport: i0, template: "\r\n <mat-card>\r\n        <mat-card-header>\r\n        </mat-card-header>\r\n         <mat-card-content>\r\n                <mat-toolbar  color=\"primary\">\r\n                        <h4 class=\"card-header\" style=\"display: inline-block;\">Safety Plan</h4>\r\n                    </mat-toolbar>\r\n        <br>\r\n        <button mat-raised-button color=\"primary\" (click)=\"goToSafetyPlanDetail(0)\" >Add Goal</button>\r\n        &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n        <br>\r\n        <br>\r\n        <mat-table #table [dataSource]=\"safetyPlanDataSource\" class=\"example-table\">\r\n                <ng-container matColumnDef=\"startDate\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Start Date</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.startDate | date}} </mat-cell>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"goal\">\r\n                        <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Goal</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.goal }} </mat-cell>\r\n                    </ng-container>\r\n                    <ng-container matColumnDef=\"victimServiceStatus\">\r\n                        <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Status</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.victimServiceStatus }} </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=\"victimServiceId\">\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                        <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"goToSafetyPlanDetail(row.victimServiceId)\">                        \r\n                        <span class=\"glyphicon glyphicon-pencil\" ></span>&nbsp;\r\n                        <mat-icon>edit</mat-icon> \r\n                        </button> \r\n                      \r\n                       \r\n\r\n\r\n\r\n\r\n\r\n                        &nbsp;&nbsp;\r\n                        <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"onDeleteSafetyPlan(row.victimServiceId)\">                        \r\n                            <span class=\"glyphicon glyphicon-trash\" ></span>&nbsp;Delete\r\n                        </button> \r\n                    </mat-cell> -->\r\n\r\n                    <mat-cell *matCellDef=\"let element\">\r\n                          \r\n                            <button class=\"edit-btn\"  mat-icon-button color=\"primary\"  matTooltip=\"Edit Safety Plan\" (click)=\"goToSafetyPlanDetail(element.victimServiceId)\">\r\n                                <i class=\"material-icons\">mode_edit</i>\r\n                            </button>\r\n\r\n                            &nbsp;&nbsp;\r\n                          \r\n                            <button\r\n                            class=\"delete-btn\"\r\n                            matTooltip=\"Delete Safety Plan\"\r\n                            mat-icon-button\r\n                            color=\"primary\"\r\n                            (click)=\"onDeleteSafetyPlan(element.victimServiceId)\">\r\n                            <i class=\"material-icons\">delete</i>\r\n                          </button>\r\n\r\n\r\n\r\n\r\n                        \r\n                    </mat-cell>\r\n\r\n                           \r\n                  \r\n                </ng-container>\r\n\r\n                <mat-header-row *matHeaderRowDef=\"['startDate', 'goal', 'victimServiceStatus', 'comment', 'victimServiceId']\" class=\"example-header-row\"></mat-header-row>\r\n                <mat-row *matRowDef=\"let row; columns:['startDate', 'goal', 'victimServiceStatus', 'comment', 'victimServiceId'];\" class=\"example-row\"></mat-row>\r\n                </mat-table>\r\n               \r\n       \r\n</mat-card-content>\r\n</mat-card>", components: [{ type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i8.MatCardHeader, selector: "mat-card-header" }, { type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11$1.MatCellDef, selector: "[matCellDef]" }, { type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "date": i1$4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimSafetyPlanComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [CommonDialogService], template: "\r\n <mat-card>\r\n        <mat-card-header>\r\n        </mat-card-header>\r\n         <mat-card-content>\r\n                <mat-toolbar  color=\"primary\">\r\n                        <h4 class=\"card-header\" style=\"display: inline-block;\">Safety Plan</h4>\r\n                    </mat-toolbar>\r\n        <br>\r\n        <button mat-raised-button color=\"primary\" (click)=\"goToSafetyPlanDetail(0)\" >Add Goal</button>\r\n        &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n        <br>\r\n        <br>\r\n        <mat-table #table [dataSource]=\"safetyPlanDataSource\" class=\"example-table\">\r\n                <ng-container matColumnDef=\"startDate\">\r\n                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Start Date</mat-header-cell>\r\n                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.startDate | date}} </mat-cell>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"goal\">\r\n                        <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Goal</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.goal }} </mat-cell>\r\n                    </ng-container>\r\n                    <ng-container matColumnDef=\"victimServiceStatus\">\r\n                        <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Status</mat-header-cell>\r\n                        <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.victimServiceStatus }} </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=\"victimServiceId\">\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                        <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"goToSafetyPlanDetail(row.victimServiceId)\">                        \r\n                        <span class=\"glyphicon glyphicon-pencil\" ></span>&nbsp;\r\n                        <mat-icon>edit</mat-icon> \r\n                        </button> \r\n                      \r\n                       \r\n\r\n\r\n\r\n\r\n\r\n                        &nbsp;&nbsp;\r\n                        <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"onDeleteSafetyPlan(row.victimServiceId)\">                        \r\n                            <span class=\"glyphicon glyphicon-trash\" ></span>&nbsp;Delete\r\n                        </button> \r\n                    </mat-cell> -->\r\n\r\n                    <mat-cell *matCellDef=\"let element\">\r\n                          \r\n                            <button class=\"edit-btn\"  mat-icon-button color=\"primary\"  matTooltip=\"Edit Safety Plan\" (click)=\"goToSafetyPlanDetail(element.victimServiceId)\">\r\n                                <i class=\"material-icons\">mode_edit</i>\r\n                            </button>\r\n\r\n                            &nbsp;&nbsp;\r\n                          \r\n                            <button\r\n                            class=\"delete-btn\"\r\n                            matTooltip=\"Delete Safety Plan\"\r\n                            mat-icon-button\r\n                            color=\"primary\"\r\n                            (click)=\"onDeleteSafetyPlan(element.victimServiceId)\">\r\n                            <i class=\"material-icons\">delete</i>\r\n                          </button>\r\n\r\n\r\n\r\n\r\n                        \r\n                    </mat-cell>\r\n\r\n                           \r\n                  \r\n                </ng-container>\r\n\r\n                <mat-header-row *matHeaderRowDef=\"['startDate', 'goal', 'victimServiceStatus', 'comment', 'victimServiceId']\" class=\"example-header-row\"></mat-header-row>\r\n                <mat-row *matRowDef=\"let row; columns:['startDate', 'goal', 'victimServiceStatus', 'comment', 'victimServiceId'];\" class=\"example-row\"></mat-row>\r\n                </mat-table>\r\n               \r\n       \r\n</mat-card-content>\r\n</mat-card>" }]
+        }], ctorParameters: function () { return [{ type: NgcSmartVictimService }, { type: CommonDialogService }, { type: i1.HttpClient }, { type: i1$3.MatDialog }, { type: i5$1.ActivatedRoute }, { type: i5$1.Router }, { type: i4.MatSnackBar }, { type: i6.SmartAuthService }]; } });
+
+class SeriveProviderComponent {
+    constructor(formBuilder, dialogRef, _victimServicesComponent, data) {
+        this.formBuilder = formBuilder;
+        this.dialogRef = dialogRef;
+        this._victimServicesComponent = _victimServicesComponent;
+        this.data = data;
+        this.spForm = this.formBuilder.group({
+            voteeProviderId: [''],
+        });
+    }
+    cancel() {
+        this.dialogRef.close();
+    }
+    ngOnInit() {
+        console.log('data.providerCollections');
+        console.log(this.data);
+        console.log(this.data.serviceTypeId);
+        this._victimServicesComponent.getvVictimServiceTypeProgramProviders().subscribe((items) => {
+            this.programProviders = items.filter((y) => (y.victimServiceTypeId === this.data.serviceTypeId));
+            console.log('this.programProviders');
+            console.log(this.programProviders);
+        });
+        this.spForm.get('voteeProviderId').valueChanges.subscribe(voteeProviderId => {
+            console.log('voteeProviderId in service provider component.');
+            console.log(voteeProviderId);
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ SeriveProviderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SeriveProviderComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1$3.MatDialogRef }, { token: NgcSmartVictimService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ SeriveProviderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SeriveProviderComponent, selector: "app-service-provider", ngImport: i0, template: `
+    <h1 mat-dialog-title> {{data.serviceType}}</h1>
+    <div mat-dialog-content class="main" [formGroup]="spForm">
+      <mat-form-field>
+        <mat-label>service provider</mat-label>
+        
+        <mat-select formControlName="voteeProviderId">
+          <mat-option
+            *ngFor="let providerOption of programProviders"
+            [value]="providerOption.victimProgramProviderId">{{ providerOption.victimProgramProvider }}
+          </mat-option>
+        </mat-select>
+      
+      </mat-form-field>
+  
+    </div>
+    <div mat-dialog-actions class="actions">
+      <button mat-raised-button color="primary" (click)="cancel()" cdkFocusInitial>
+        Cancel Change
+      </button>
+      <button mat-raised-button color="primary" [mat-dialog-close]="spForm.value" >
+        Save Change
+      </button>
+    </div>
+  `, isInline: true, styles: [".main{width:100%;display:flex;flex-direction:column}.actions{display:flex}\n"], components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.MatLabel, selector: "mat-label" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SeriveProviderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-service-provider',
+                    template: `
+    <h1 mat-dialog-title> {{data.serviceType}}</h1>
+    <div mat-dialog-content class="main" [formGroup]="spForm">
+      <mat-form-field>
+        <mat-label>service provider</mat-label>
+        
+        <mat-select formControlName="voteeProviderId">
+          <mat-option
+            *ngFor="let providerOption of programProviders"
+            [value]="providerOption.victimProgramProviderId">{{ providerOption.victimProgramProvider }}
+          </mat-option>
+        </mat-select>
+      
+      </mat-form-field>
+  
+    </div>
+    <div mat-dialog-actions class="actions">
+      <button mat-raised-button color="primary" (click)="cancel()" cdkFocusInitial>
+        Cancel Change
+      </button>
+      <button mat-raised-button color="primary" [mat-dialog-close]="spForm.value" >
+        Save Change
+      </button>
+    </div>
+  `,
+                    styles: [
+                        `
+      .main {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .actions{
+        display: flex;
+      }
+    `,
+                    ],
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1$2.FormBuilder }, { type: i1$3.MatDialogRef }, { type: NgcSmartVictimService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
+    } });
+
+class VictimSafetyPlanDetailComponent {
+    constructor(dialog, _victimServicesComponent, http, snackBar, route, router, commonDialogService, formBuilder) {
+        this.dialog = dialog;
+        this._victimServicesComponent = _victimServicesComponent;
+        this.http = http;
+        this.snackBar = snackBar;
+        this.route = route;
+        this.router = router;
+        this.commonDialogService = commonDialogService;
+        this.formBuilder = formBuilder;
+        this.editSafetyPlan = {};
+        this.providerListCollection = [];
+        this.serviceCheck = [];
+        this.victimServiceStatusHistoriesDataSource = new MatTableDataSource();
+        this.initForm();
+    }
+    initForm() {
+        this.spForm = this.formBuilder.group({
+            serviceGoal: new FormControl('', Validators.compose([
+                Validators.required
+            ])),
+            goalStatus: new FormControl('', Validators.compose([
+                Validators.required
+            ])),
+            goalStatusDate: new FormControl('', Validators.compose([
+                Validators.required, dateValidator()
+            ])),
+            comment: new FormControl('', Validators.required)
+        });
+        this.spForm.markAsPristine();
+        this.spForm.markAsUntouched();
+    }
+    ngOnInit() {
+        var data = this.route.snapshot.data;
+        this.loginStaff = data.loginStaff;
+        this.staffId = this.loginStaff.staffId;
+        this.sub = this.route.params.subscribe(params => {
+            this.victimServiceId = params['victimServiceId'];
+            this.victimId = params['victimId'];
+        });
+        this.hiddenAddNewFlag = false;
+        this.isDisplay = false;
+        this._victimServicesComponent.getVictimServiceTypes().subscribe((items) => {
+            this.victimServiceTypes = items;
+        });
+        this._victimServicesComponent.getVictimServiceStatus().subscribe((items) => {
+            this.victimServiceStatus = items;
+        });
+        this._victimServicesComponent.getVictim(this.victimId).subscribe((items) => {
+            this.victimName = items.firstName + ', ' + items.lastName;
+        });
+        //---------------graphQL--------------------------------------
+        // this.getVictimServiceTypeProgramProviders().subscribe(result => {
+        // this.providerList = result;
+        // });
+        // console.log('this.victimServiceId');
+        // console.log(this.victimServiceId);
+        if (this.victimServiceId != 0) {
+            this._victimServicesComponent.getVictimServices(this.victimServiceId).subscribe(victimSafetyPlans => {
+                console.log('victimSafetyPlans');
+                console.log(victimSafetyPlans);
+                this.editSafetyPlan = victimSafetyPlans[0];
+                this.victimId = victimSafetyPlans[0].victimId;
+                console.log('this.editSafetyPlan');
+                console.log(this.editSafetyPlan);
+                // console.log('this.editSafetyPlan.goal');
+                // console.log(this.editSafetyPlan.goal);
+                // console.log('this.editSafetyPlan[0].goal');
+                // console.log(this.editSafetyPlan[0].goal);
+            });
+            this._victimServicesComponent.getServiceStatusHistories(this.victimServiceId).subscribe(victimServiceStatusHistories => {
+                // this.victimServiceStatusHistories = victimServiceStatusHistories;
+                this.victimServiceStatusHistoriesDataSource.data = victimServiceStatusHistories;
+            });
+        }
+        this.loadProvider();
+    }
+    //pass in id
+    isInArray(providerListCollectionKey, serviceTypeName, event) {
+        console.log('providerListCollectionKey');
+        console.log(providerListCollectionKey);
+        console.log('serviceTypeName');
+        console.log(serviceTypeName);
+        console.log('event.source.value');
+        console.log(event.checked);
+        if (event.checked == true) {
+            for (let j = 0; j < this.providerListCollection.length; j++) {
+                if (providerListCollectionKey == this.providerListCollection[j].groupId) {
+                    this.providerListCollection[j].isDisplay = !this.providerListCollection[j].isDisplay;
+                    const dialogRef = this.dialog.open(SeriveProviderComponent, {
+                        width: '500px',
+                        data: {
+                            serviceType: serviceTypeName,
+                            serviceTypeId: providerListCollectionKey,
+                            providerCollections: [...this.providerListCollection],
+                        },
+                        panelClass: 'formFieldWidth480',
+                    });
+                    dialogRef.afterClosed().subscribe((result) => {
+                        console.log('The dialog was closed');
+                        console.log(result);
+                        if (result) {
+                            console.log('The dialog was closed, inside result');
+                            this.savePlanProvider(providerListCollectionKey, result.voteeProviderId);
+                        }
+                    });
+                    // return;
+                }
+            }
+        } //if event.checked == true
+        //this.router.navigate(['saftyPlanDetail', this.victimServiceId,  this.victimId ]); 
+    }
+    loadProvider() {
+        this.providerListCollection = [];
+        this._victimServicesComponent.getvVictimServiceTypeProgramProviders()
+            .subscribe((providerList) => {
+            if (providerList) {
+                let providers = Object.create(null);
+                for (let i = 0; i < providerList.length; i++) {
+                    if (!providers[providerList[i].victimServiceTypeId]) {
+                        providers[providerList[i].victimServiceTypeId] = [];
+                        if (this.editSafetyPlan.vVictimServiceDetails != null) {
+                            for (let j = 0; j < this.editSafetyPlan.vVictimServiceDetails.length; j++) {
+                                if (providerList[i].victimServiceTypeId == this.editSafetyPlan.vVictimServiceDetails[j].victimServiceId.toString()) {
+                                    this.isDisplay = true;
+                                }
+                            }
+                        }
+                        this.providerListCollection.push({ groupId: providerList[i].victimServiceTypeId, isDisplay: this.isDisplay, collection: providers[providerList[i].victimServiceTypeId] });
+                    }
+                    providers[providerList[i].victimServiceTypeId].push(providerList[i]);
+                }
+            }
+        });
+    }
+    //---------------graphQL--------------------------------------
+    //   getVictimServiceTypeProgramProviders(): Observable<VictimServiceTypeProgramProviderModel[]> {
+    //     const queryString = `
+    //         {
+    //           findVictimServiceTypeProgramProviders {
+    //                 data {
+    //                   victimServiceTypeProgramProviderId
+    //                   victimServiceType
+    //                   victimProgramProvider
+    //                 }
+    //               }
+    //         }`;
+    //     return this.http.post<any>(environment.smartApiUrl, { query: queryString })
+    //         .map(result => {
+    //         return result.data.findVictimServiceTypeProgramProviders.data;
+    //     });
+    // }
+    evaluateSelection(victimServiceTypeId) {
+        if (this.editSafetyPlan.vVictimServiceDetails) {
+            return this.editSafetyPlan.vVictimServiceDetails.findIndex(r => r.victimServiceTypeId === victimServiceTypeId) >= 0;
+        }
+    }
+    savePlanProvider(victimServiceTypeId, victimProgramProviderId) {
+        console.log('savePlanProvider');
+        console.log(victimServiceTypeId);
+        console.log(victimProgramProviderId);
+        if (victimProgramProviderId === "" || victimProgramProviderId === null || victimProgramProviderId === undefined) {
+            this.snackBar.open('Please pick a program on the drop down list !', '', { duration: 120, });
+            // alert('Please pick a program on the drop down list !');
+        }
+        else {
+            if (this.victimServiceId == 0) {
+                //insert
+                console.log('insert new plan');
+                const safetyPlan = {
+                    victimId: this.victimId,
+                    fullName: null,
+                    victimServiceId: 0,
+                    goal: this.editSafetyPlan.goal,
+                    comment: this.editSafetyPlan.comment,
+                    modifiedBy: this.staffId,
+                    victimServiceStatusId: null,
+                    status: null,
+                    startDate: null,
+                    vVictimServiceDetails: null,
+                    victimName: null
+                };
+                this._victimServicesComponent.addSafetyPlan(safetyPlan).subscribe((itms) => {
+                    const victimServiceStatus = {
+                        victimServiceStatusHistoryId: 0,
+                        victimServiceId: itms.victimServiceId,
+                        victimServiceStatusId: this.editSafetyPlan.victimServiceStatusId,
+                        startDate: this.editSafetyPlan.startDate,
+                        modifiedBy: this.staffId,
+                        comment: 'test add safety plan'
+                    };
+                    this._victimServicesComponent.addVictimServiceStatus(victimServiceStatus).subscribe(() => {
+                        console.log('check itms.victimServiceId iniside add victim serive status');
+                        console.log(itms.victimServiceId);
+                        const victimServiceDetail = {
+                            victimServiceId: itms.victimServiceId,
+                            victimServiceDetailId: 0,
+                            victimServiceTypeId: victimServiceTypeId,
+                            victimProgramProviderId: victimProgramProviderId,
+                            modifiedBy: this.staffId,
+                            victimProgramProvider: null
+                        };
+                        console.log('add plan provider here at insert');
+                        this._victimServicesComponent.addPlanProvider(victimServiceDetail).subscribe(() => {
+                            this.router.navigate(['saftyPlanDetail', itms.victimServiceId, this.victimId]);
+                        });
+                    });
+                });
+            }
+            else //update
+             {
+                const victimServiceDetail = {
+                    victimServiceId: this.victimServiceId,
+                    victimServiceDetailId: 0,
+                    victimServiceTypeId: victimServiceTypeId,
+                    victimProgramProviderId: victimProgramProviderId,
+                    modifiedBy: this.staffId,
+                    victimProgramProvider: null
+                };
+                console.log('add plan provider here at update');
+                this._victimServicesComponent.addPlanProvider(victimServiceDetail).subscribe(() => {
+                    this.router.navigate(['saftyPlanDetail', this.victimServiceId, this.victimId]);
+                });
+            }
+        }
+    }
+    deleteProvider(victimProgramProviderId) {
+        this.commonDialogService
+            .confirm('', 'Do you want to delete this provider?', 'Yes', 'No')
+            .subscribe(res => {
+            this.result = res;
+            if (this.result) {
+                this._victimServicesComponent.deleteProvider(victimProgramProviderId, this.staffId)
+                    .subscribe(result => {
+                    this.snackBar.open('delete provider Successfully !', '', {
+                        duration: 3000,
+                    });
+                    location.reload();
+                });
+            }
+        });
+        // location.reload();
+    }
+    saveSafetyPlan() {
+        if (this.editSafetyPlan.victimServiceId === undefined) {
+            const safetyPlan = {
+                victimId: this.victimId,
+                fullName: null,
+                victimServiceId: 0,
+                goal: this.editSafetyPlan.goal,
+                comment: this.editSafetyPlan.comment,
+                modifiedBy: this.staffId,
+                victimServiceStatusId: null,
+                status: null,
+                startDate: null,
+                vVictimServiceDetails: null,
+                victimName: null
+            };
+            this._victimServicesComponent.addSafetyPlan(safetyPlan).subscribe((itms) => {
+                const victimServiceStatus = {
+                    victimServiceStatusHistoryId: 0,
+                    victimServiceId: itms.victimServiceId,
+                    victimServiceStatusId: this.editSafetyPlan.victimServiceStatusId,
+                    startDate: this.editSafetyPlan.startDate,
+                    modifiedBy: this.staffId,
+                    comment: 'test add safety Plan'
+                };
+                this._victimServicesComponent.addVictimServiceStatus(victimServiceStatus).subscribe(resp => {
+                    this.snackBar.open('Insert status successfully!', '', {
+                        duration: 3000,
+                    });
+                });
+                this.router.navigate(['saftyPlanDetail', itms.victimServiceId, this.victimId]);
+            });
+        }
+        else {
+            // this.editSafetyPlan.modifiedBy=this.loginStaff.staffId;
+            this.editSafetyPlan.modifiedBy = this.staffId;
+            this._victimServicesComponent.updateSafetyPlan(this.editSafetyPlan).subscribe(resp => {
+                //  this.snackBar.open('update Successfully!', '', {
+                //  duration: 3000,
+                //       });
+                const victimServiceStatus = {
+                    victimServiceStatusHistoryId: 0,
+                    victimServiceId: this.editSafetyPlan.victimServiceId.toString(),
+                    victimServiceStatusId: this.editSafetyPlan.victimServiceStatusId,
+                    startDate: this.editSafetyPlan.startDate,
+                    modifiedBy: this.staffId,
+                    comment: 'test update safety Plan'
+                };
+                this._victimServicesComponent.addVictimServiceStatus(victimServiceStatus).subscribe();
+                this.router.navigate(['saftyPlanDetail', this.editSafetyPlan.victimServiceId, this.victimId]);
+            });
+        }
+    }
+    back() {
+        console.log('this.victimId');
+        console.log(this.victimId);
+        this.router.navigate(['saftyPlan', this.victimId]);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ VictimSafetyPlanDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimSafetyPlanDetailComponent, deps: [{ token: i1$3.MatDialog }, { token: NgcSmartVictimService }, { token: i1.HttpClient }, { token: i4.MatSnackBar }, { token: i5$1.ActivatedRoute }, { token: i5$1.Router }, { token: CommonDialogService }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VictimSafetyPlanDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: VictimSafetyPlanDetailComponent, selector: "ng-component", providers: [CommonDialogService], ngImport: i0, template: "<mat-card>\r\n        <mat-card-header>\r\n            \r\n        </mat-card-header>\r\n         <mat-card-content>\r\n        <mat-toolbar  color=\"primary\">\r\n                        <h4 class=\"card-header\" style=\"display: inline-block;\">Safety Plan</h4>\r\n        </mat-toolbar>\r\n \r\n        \r\n                        <div class='container'>\r\n                                <form [formGroup]=\"spForm\" #spDetailForm=\"ngForm\" >\r\n                                                       \r\n                            \r\n                                        <div class=\"row\" ><b>Victim Name:</b> {{victimName}} </div>\r\n                              \r\n\r\n                                        <div class=\"row\" > \r\n                                                <mat-form-field >\r\n                                                <mat-label>Goal:</mat-label>\r\n                                                 <input matInput  formControlName=\"serviceGoal\" [(ngModel)]=\"editSafetyPlan.goal\" >\r\n                                                </mat-form-field>\r\n                                                \r\n                                        </div>\r\n                               \r\n                        \r\n                       \r\n                        \r\n                             \r\n                                       \r\n                                        <div class=\"row\">  \r\n                                                <mat-form-field>\r\n                                                  <mat-label>Goal Status:</mat-label>\r\n                                                  <mat-select  formControlName=\"goalStatus\"  [(ngModel)]=\"editSafetyPlan.victimServiceStatusId\" >\r\n                                                \r\n                                                                <mat-option *ngFor=\" let victimServiceStatu of victimServiceStatus\" [value]=\"victimServiceStatu.victimServiceStatusId\" >{{victimServiceStatu.name}}</mat-option>\r\n                                                \r\n                                                </mat-select> \r\n                                                </mat-form-field>\r\n                                        </div>\r\n                                \r\n\r\n                             \r\n                                     \r\n                                        <div class=\"row\">  \r\n                                                \r\n                                                <mat-form-field>\r\n                                                        <mat-label>Goal Status Date:</mat-label>\r\n                                                <input matInput \r\n                                                formControlName=\"goalStatusDate\" \r\n                                                [matDatepicker]=\"goalStatusDate\" \r\n                                                placeholder=\"Choose a date\" [(ngModel)]=\"editSafetyPlan.startDate\" \r\n                                                (click)=\"goalStatusDate.open()\" \r\n                                                >\r\n                                             \r\n                                                <mat-datepicker-toggle matSuffix [for]=\"goalStatusDate\"></mat-datepicker-toggle>\r\n                                                <mat-datepicker #goalStatusDate></mat-datepicker>   \r\n                                                </mat-form-field> \r\n\r\n\r\n                                                <div class=\"help-block\" \r\n                                                *ngIf=\"spForm.get('goalStatusDate').hasError('date') \r\n                                                && (spForm.get('goalStatusDate').dirty || spForm.get('goalStatusDate').touched)\">\r\n                                                <mat-error>Future Date is <strong>not allowed</strong> for goal status date</mat-error>\r\n                                                </div>\r\n                                         </div>\r\n\r\n                                      \r\n                                        <div class=\"row\" >  \r\n                                                <!-- <mat-form-field style=\"width: 200px;\"> -->\r\n                                                <!-- <mat-label>Comment:</mat-label>   \r\n                                                <textarea mdInput \r\n                                                class=\"textarea-content\"\r\n                                                [(ngModel)]=\"editSafetyPlan.comment\"\r\n                                                formControlName=\"comment\" \r\n                                                cdkTextareaAutosize\r\n                                                #autosize=\"cdkTextareaAutosize\"\r\n                                                cdkAutosizeMinRows=\"8\"\r\n                                                cdkAutosizeMaxRows=\"12\"\r\n                                                >\r\n                                                </textarea>   -->\r\n                                                <!-- </mat-form-field> -->\r\n\r\n\r\n\r\n                                                <mat-form-field style=\"width: 400px;\">\r\n                                                        <mat-label>Comment:</mat-label>\r\n                                                        <textarea \r\n                                                        class=\"textarea-content\"\r\n                                                        matInput \r\n                                                        placeholder=\"\" \r\n                                                        formControlName=\"comment\" \r\n                                                        [(ngModel)]=\"editSafetyPlan.comment\"\r\n                                                        cdkTextareaAutosize\r\n                                                        #autosize=\"cdkTextareaAutosize\"\r\n                                                        cdkAutosizeMinRows=\"8\"\r\n                                                        cdkAutosizeMaxRows=\"12\">\r\n                                                        </textarea> \r\n\r\n                                                        \r\n                                                </mat-form-field>\r\n\r\n                                       </div>\r\n\r\n                                </form>\r\n                        </div><!--end form-->\r\n                       \r\n  \r\n                                        <br>\r\n\r\n                                        <div class=\"row\"><b>Need and provider:</b><br> (click on a check box to select provider information)\r\n                                                          \r\n                                        <mat-list>\r\n                                                <mat-list-item *ngFor=\"let serviceType of victimServiceTypes; let i=index\" >\r\n                                                     <mat-checkbox class=\"example-margin\" name=\"victimService\"  color =\"primary\" [checked]=\"evaluateSelection(serviceType.victimServiceTypeId)\"  (change)=\"isInArray(serviceType.victimServiceTypeId,serviceType.name, $event);\" > {{serviceType.name}}</mat-checkbox>\r\n                                                     <div> &nbsp;&nbsp;</div>\r\n                                                      <div *ngFor=\"let provider of providerListCollection; let pi = index\"  >\r\n                                                                <!-- <div *ngIf=\"provider.isDisplay && serviceType.victimServiceTypeId == provider.groupId \" class=\"Row\">\r\n                                                                                                      \r\n                                                                                <div class=\"serviceSelect\"> -->\r\n                                                                                <!-- <mat-form-field> -->\r\n                                                                                        <!-- <mat-select  name=\"provider\" id=\"provider.groupId\" [(ngModel)]=\"providerId\" >  -->\r\n                                                                                        <!-- <mat-select  name=\"provider\" id=\"provider.groupId\" [(value)]=\"providerId\" > \r\n                                                                                          <mat-option *ngFor=\" let providerOption of provider.collection\" [value]=\"providerOption.victimProgramProviderId\" >{{providerOption.victimProgramProvider}}</mat-option>\r\n                                                                                        </mat-select> -->\r\n                                                                                <!-- </mat-form-field> -->\r\n                                                                                  \r\n                                                                                <!-- </div>\r\n\r\n                                                                                 <div class=\"serviceButton\">\r\n                                                                                    <button mat-raised-button color=\"primary\" (click)=\"savePlanProvider(serviceType.victimServiceTypeId ,providerId)\">Add Provider</button>\r\n                                                                                </div>\r\n                                                                </div> -->\r\n                                                        </div>\r\n                                                                <div *ngFor=\" let serviceprovider of editSafetyPlan.vVictimServiceDetails\"  >\r\n                                                                        \r\n                                                                        <div *ngIf=\"serviceType.victimServiceTypeId===serviceprovider.victimServiceTypeId\"  class=\"Row\" >\r\n                                                                                <!-- . {{ serviceprovider.victimProgramProvider}}<button mat-raised-button color=\"primary\" (click)=\"deleteProvider(serviceprovider.victimServiceDetailId)\">Delete</button> <br> -->\r\n                                                                                <div class=\"serviceSelect\" >\r\n                                                                                . {{ serviceprovider.victimProgramProvider}}\r\n                                                                                </div>\r\n                                                                                <div class=\"serviceButton\">\r\n                                                                                        <button mat-raised-button color=\"primary\" (click)=\"deleteProvider(serviceprovider.victimServiceDetailId)\">Delete</button> \r\n                                                                                </div>\r\n                                                                        \r\n                                                                        </div>\r\n                                                                \r\n                                                                </div>\r\n                                                      \r\n                                                </mat-list-item>       \r\n                                                                                                       \r\n                                         </mat-list>\r\n                                        </div>\r\n                                         \r\n                                                \r\n                                          \r\n                         \r\n\r\n\r\n\r\n\r\n\r\n\r\n         \r\n  \r\n                        <!-- <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Victim Name:</b> {{victimName}} </div>\r\n                                <div class='col-md-7'>           \r\n                                                 \r\n                                </div>           \r\n                        </div> -->\r\n                        <!-- <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Goal:<font color=\"red\">*</font></b></div>\r\n                                <div class='col-md-7'> \r\n                                        <mat-form-field >\r\n                                                <input matInput name=\"serviceGoal\" [(ngModel)]=\"editSafetyPlan.goal\" required placeholder=\"\">\r\n                                        </mat-form-field>\r\n                                </div>           \r\n                        </div>\r\n\r\n                        <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Goal Status:<font color=\"red\">*</font></b></div>\r\n                                <div class='col-md-7'> \r\n                                        <mat-select  name=\"goalStatus\"  [style.width]=\"'50%'\"  [(ngModel)]=\"editSafetyPlan.victimServiceStatusId\" required>\r\n                                                <mat-option *ngFor=\" let victimServiceStatu of victimServiceStatus\" [value]=\"victimServiceStatu.victimServiceStatusId\" >{{victimServiceStatu.name}}</mat-option>\r\n                                        </mat-select>\r\n                                </div>           \r\n                        </div>\r\n                \r\n                        <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Goal Status Date:<font color=\"red\">*</font></b></div>\r\n                                <div class='col-md-7'>           \r\n                                        <input matInput name=\"goalStatusDate\" [matDatepicker]=\"goalStatusDate\" placeholder=\"Choose a date\" [(ngModel)]=\"editSafetyPlan.startDate\"  required>\r\n                                        <mat-datepicker-toggle matSuffix [for]=\"goalStatusDate\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #goalStatusDate></mat-datepicker>                         \r\n                                </div>           \r\n                        </div>\r\n                \r\n                        <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Comment:</b></div>\r\n                                <div class='col-md-7'>           \r\n                                        <textarea mdInput placeholder=\"\"  rows=\"10\" cols=\"50\" name=\"comment\" [(ngModel)]=\"editSafetyPlan.comment\"></textarea>  \r\n                                </div>           \r\n                        </div> -->\r\n\r\n                      \r\n                        <div class='row' >\r\n                                <div class='col-md-12 text-center'>\r\n                                <!-- <button type=\"button\" class=\"btn btn-default btn-small\" (click)=\"print()\">Print</button> -->\r\n                                <button mat-raised-button color=\"primary\" (click)=\"saveSafetyPlan()\" [disabled]=\"!spForm.valid\">Save</button>\r\n                                <!-- &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"commondialogRef.close()\">Cancel</button> -->\r\n                                &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n                                </div>                 \r\n                        </div> \r\n\r\n                        <!--status hisotry-->\r\n                       \r\n                         <mat-table #table [dataSource]=\"victimServiceStatusHistoriesDataSource\" class=\"example-table\">\r\n                                <ng-container matColumnDef=\"startDate\">\r\n                                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Start Date</mat-header-cell>\r\n                                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.startDate | date}} </mat-cell>\r\n                                </ng-container>\r\n\r\n\r\n                                <ng-container matColumnDef=\"victimServiceStatusId\">\r\n                                        <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Status</mat-header-cell>\r\n                                        <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.victimServiceStatusId}} </mat-cell>\r\n                                </ng-container>\r\n                                \r\n                            \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                                 <mat-header-row *matHeaderRowDef=\"[ 'startDate', 'victimServiceStatusId', 'comment']\" class=\"example-header-row\"></mat-header-row>\r\n                                <mat-row *matRowDef=\"let row; columns:[ 'startDate', 'victimServiceStatusId', 'comment'];\" class=\"example-row\"></mat-row>\r\n                         </mat-table>\r\n\r\n                \r\n                        \r\n\r\n</mat-card-content>\r\n</mat-card>", styles: ["div.serviceSelect{width:500px}div.serviceButton{width:20%}.container{margin:16px;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;grid-auto-rows:minmax(50px,auto);justify-items:stretch}.app-class .mat-list-item{height:auto}.textarea-content{width:500px}\n"], components: [{ type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i8.MatCardHeader, selector: "mat-card-header" }, { type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i14$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i14$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i10.MatSuffix, selector: "[matSuffix]" }, { type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i17$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i11$1.MatCellDef, selector: "[matCellDef]" }, { type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "date": i1$4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimSafetyPlanDetailComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [CommonDialogService], template: "<mat-card>\r\n        <mat-card-header>\r\n            \r\n        </mat-card-header>\r\n         <mat-card-content>\r\n        <mat-toolbar  color=\"primary\">\r\n                        <h4 class=\"card-header\" style=\"display: inline-block;\">Safety Plan</h4>\r\n        </mat-toolbar>\r\n \r\n        \r\n                        <div class='container'>\r\n                                <form [formGroup]=\"spForm\" #spDetailForm=\"ngForm\" >\r\n                                                       \r\n                            \r\n                                        <div class=\"row\" ><b>Victim Name:</b> {{victimName}} </div>\r\n                              \r\n\r\n                                        <div class=\"row\" > \r\n                                                <mat-form-field >\r\n                                                <mat-label>Goal:</mat-label>\r\n                                                 <input matInput  formControlName=\"serviceGoal\" [(ngModel)]=\"editSafetyPlan.goal\" >\r\n                                                </mat-form-field>\r\n                                                \r\n                                        </div>\r\n                               \r\n                        \r\n                       \r\n                        \r\n                             \r\n                                       \r\n                                        <div class=\"row\">  \r\n                                                <mat-form-field>\r\n                                                  <mat-label>Goal Status:</mat-label>\r\n                                                  <mat-select  formControlName=\"goalStatus\"  [(ngModel)]=\"editSafetyPlan.victimServiceStatusId\" >\r\n                                                \r\n                                                                <mat-option *ngFor=\" let victimServiceStatu of victimServiceStatus\" [value]=\"victimServiceStatu.victimServiceStatusId\" >{{victimServiceStatu.name}}</mat-option>\r\n                                                \r\n                                                </mat-select> \r\n                                                </mat-form-field>\r\n                                        </div>\r\n                                \r\n\r\n                             \r\n                                     \r\n                                        <div class=\"row\">  \r\n                                                \r\n                                                <mat-form-field>\r\n                                                        <mat-label>Goal Status Date:</mat-label>\r\n                                                <input matInput \r\n                                                formControlName=\"goalStatusDate\" \r\n                                                [matDatepicker]=\"goalStatusDate\" \r\n                                                placeholder=\"Choose a date\" [(ngModel)]=\"editSafetyPlan.startDate\" \r\n                                                (click)=\"goalStatusDate.open()\" \r\n                                                >\r\n                                             \r\n                                                <mat-datepicker-toggle matSuffix [for]=\"goalStatusDate\"></mat-datepicker-toggle>\r\n                                                <mat-datepicker #goalStatusDate></mat-datepicker>   \r\n                                                </mat-form-field> \r\n\r\n\r\n                                                <div class=\"help-block\" \r\n                                                *ngIf=\"spForm.get('goalStatusDate').hasError('date') \r\n                                                && (spForm.get('goalStatusDate').dirty || spForm.get('goalStatusDate').touched)\">\r\n                                                <mat-error>Future Date is <strong>not allowed</strong> for goal status date</mat-error>\r\n                                                </div>\r\n                                         </div>\r\n\r\n                                      \r\n                                        <div class=\"row\" >  \r\n                                                <!-- <mat-form-field style=\"width: 200px;\"> -->\r\n                                                <!-- <mat-label>Comment:</mat-label>   \r\n                                                <textarea mdInput \r\n                                                class=\"textarea-content\"\r\n                                                [(ngModel)]=\"editSafetyPlan.comment\"\r\n                                                formControlName=\"comment\" \r\n                                                cdkTextareaAutosize\r\n                                                #autosize=\"cdkTextareaAutosize\"\r\n                                                cdkAutosizeMinRows=\"8\"\r\n                                                cdkAutosizeMaxRows=\"12\"\r\n                                                >\r\n                                                </textarea>   -->\r\n                                                <!-- </mat-form-field> -->\r\n\r\n\r\n\r\n                                                <mat-form-field style=\"width: 400px;\">\r\n                                                        <mat-label>Comment:</mat-label>\r\n                                                        <textarea \r\n                                                        class=\"textarea-content\"\r\n                                                        matInput \r\n                                                        placeholder=\"\" \r\n                                                        formControlName=\"comment\" \r\n                                                        [(ngModel)]=\"editSafetyPlan.comment\"\r\n                                                        cdkTextareaAutosize\r\n                                                        #autosize=\"cdkTextareaAutosize\"\r\n                                                        cdkAutosizeMinRows=\"8\"\r\n                                                        cdkAutosizeMaxRows=\"12\">\r\n                                                        </textarea> \r\n\r\n                                                        \r\n                                                </mat-form-field>\r\n\r\n                                       </div>\r\n\r\n                                </form>\r\n                        </div><!--end form-->\r\n                       \r\n  \r\n                                        <br>\r\n\r\n                                        <div class=\"row\"><b>Need and provider:</b><br> (click on a check box to select provider information)\r\n                                                          \r\n                                        <mat-list>\r\n                                                <mat-list-item *ngFor=\"let serviceType of victimServiceTypes; let i=index\" >\r\n                                                     <mat-checkbox class=\"example-margin\" name=\"victimService\"  color =\"primary\" [checked]=\"evaluateSelection(serviceType.victimServiceTypeId)\"  (change)=\"isInArray(serviceType.victimServiceTypeId,serviceType.name, $event);\" > {{serviceType.name}}</mat-checkbox>\r\n                                                     <div> &nbsp;&nbsp;</div>\r\n                                                      <div *ngFor=\"let provider of providerListCollection; let pi = index\"  >\r\n                                                                <!-- <div *ngIf=\"provider.isDisplay && serviceType.victimServiceTypeId == provider.groupId \" class=\"Row\">\r\n                                                                                                      \r\n                                                                                <div class=\"serviceSelect\"> -->\r\n                                                                                <!-- <mat-form-field> -->\r\n                                                                                        <!-- <mat-select  name=\"provider\" id=\"provider.groupId\" [(ngModel)]=\"providerId\" >  -->\r\n                                                                                        <!-- <mat-select  name=\"provider\" id=\"provider.groupId\" [(value)]=\"providerId\" > \r\n                                                                                          <mat-option *ngFor=\" let providerOption of provider.collection\" [value]=\"providerOption.victimProgramProviderId\" >{{providerOption.victimProgramProvider}}</mat-option>\r\n                                                                                        </mat-select> -->\r\n                                                                                <!-- </mat-form-field> -->\r\n                                                                                  \r\n                                                                                <!-- </div>\r\n\r\n                                                                                 <div class=\"serviceButton\">\r\n                                                                                    <button mat-raised-button color=\"primary\" (click)=\"savePlanProvider(serviceType.victimServiceTypeId ,providerId)\">Add Provider</button>\r\n                                                                                </div>\r\n                                                                </div> -->\r\n                                                        </div>\r\n                                                                <div *ngFor=\" let serviceprovider of editSafetyPlan.vVictimServiceDetails\"  >\r\n                                                                        \r\n                                                                        <div *ngIf=\"serviceType.victimServiceTypeId===serviceprovider.victimServiceTypeId\"  class=\"Row\" >\r\n                                                                                <!-- . {{ serviceprovider.victimProgramProvider}}<button mat-raised-button color=\"primary\" (click)=\"deleteProvider(serviceprovider.victimServiceDetailId)\">Delete</button> <br> -->\r\n                                                                                <div class=\"serviceSelect\" >\r\n                                                                                . {{ serviceprovider.victimProgramProvider}}\r\n                                                                                </div>\r\n                                                                                <div class=\"serviceButton\">\r\n                                                                                        <button mat-raised-button color=\"primary\" (click)=\"deleteProvider(serviceprovider.victimServiceDetailId)\">Delete</button> \r\n                                                                                </div>\r\n                                                                        \r\n                                                                        </div>\r\n                                                                \r\n                                                                </div>\r\n                                                      \r\n                                                </mat-list-item>       \r\n                                                                                                       \r\n                                         </mat-list>\r\n                                        </div>\r\n                                         \r\n                                                \r\n                                          \r\n                         \r\n\r\n\r\n\r\n\r\n\r\n\r\n         \r\n  \r\n                        <!-- <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Victim Name:</b> {{victimName}} </div>\r\n                                <div class='col-md-7'>           \r\n                                                 \r\n                                </div>           \r\n                        </div> -->\r\n                        <!-- <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Goal:<font color=\"red\">*</font></b></div>\r\n                                <div class='col-md-7'> \r\n                                        <mat-form-field >\r\n                                                <input matInput name=\"serviceGoal\" [(ngModel)]=\"editSafetyPlan.goal\" required placeholder=\"\">\r\n                                        </mat-form-field>\r\n                                </div>           \r\n                        </div>\r\n\r\n                        <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Goal Status:<font color=\"red\">*</font></b></div>\r\n                                <div class='col-md-7'> \r\n                                        <mat-select  name=\"goalStatus\"  [style.width]=\"'50%'\"  [(ngModel)]=\"editSafetyPlan.victimServiceStatusId\" required>\r\n                                                <mat-option *ngFor=\" let victimServiceStatu of victimServiceStatus\" [value]=\"victimServiceStatu.victimServiceStatusId\" >{{victimServiceStatu.name}}</mat-option>\r\n                                        </mat-select>\r\n                                </div>           \r\n                        </div>\r\n                \r\n                        <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Goal Status Date:<font color=\"red\">*</font></b></div>\r\n                                <div class='col-md-7'>           \r\n                                        <input matInput name=\"goalStatusDate\" [matDatepicker]=\"goalStatusDate\" placeholder=\"Choose a date\" [(ngModel)]=\"editSafetyPlan.startDate\"  required>\r\n                                        <mat-datepicker-toggle matSuffix [for]=\"goalStatusDate\"></mat-datepicker-toggle>\r\n                                        <mat-datepicker #goalStatusDate></mat-datepicker>                         \r\n                                </div>           \r\n                        </div>\r\n                \r\n                        <div class='row' >\r\n                                <div class='col-md-5 desc-label'><b>Comment:</b></div>\r\n                                <div class='col-md-7'>           \r\n                                        <textarea mdInput placeholder=\"\"  rows=\"10\" cols=\"50\" name=\"comment\" [(ngModel)]=\"editSafetyPlan.comment\"></textarea>  \r\n                                </div>           \r\n                        </div> -->\r\n\r\n                      \r\n                        <div class='row' >\r\n                                <div class='col-md-12 text-center'>\r\n                                <!-- <button type=\"button\" class=\"btn btn-default btn-small\" (click)=\"print()\">Print</button> -->\r\n                                <button mat-raised-button color=\"primary\" (click)=\"saveSafetyPlan()\" [disabled]=\"!spForm.valid\">Save</button>\r\n                                <!-- &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"commondialogRef.close()\">Cancel</button> -->\r\n                                &nbsp;&nbsp;<button mat-raised-button color=\"primary\"  (click)=\"back()\">Back</button>\r\n                                </div>                 \r\n                        </div> \r\n\r\n                        <!--status hisotry-->\r\n                       \r\n                         <mat-table #table [dataSource]=\"victimServiceStatusHistoriesDataSource\" class=\"example-table\">\r\n                                <ng-container matColumnDef=\"startDate\">\r\n                                    <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Start Date</mat-header-cell>\r\n                                    <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.startDate | date}} </mat-cell>\r\n                                </ng-container>\r\n\r\n\r\n                                <ng-container matColumnDef=\"victimServiceStatusId\">\r\n                                        <mat-header-cell *matHeaderCellDef class=\"example-header-cell\">Status</mat-header-cell>\r\n                                        <mat-cell *matCellDef=\"let row\" class=\"example-cell\"> {{row.victimServiceStatusId}} </mat-cell>\r\n                                </ng-container>\r\n                                \r\n                            \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                                 <mat-header-row *matHeaderRowDef=\"[ 'startDate', 'victimServiceStatusId', 'comment']\" class=\"example-header-row\"></mat-header-row>\r\n                                <mat-row *matRowDef=\"let row; columns:[ 'startDate', 'victimServiceStatusId', 'comment'];\" class=\"example-row\"></mat-row>\r\n                         </mat-table>\r\n\r\n                \r\n                        \r\n\r\n</mat-card-content>\r\n</mat-card>", styles: ["div.serviceSelect{width:500px}div.serviceButton{width:20%}.container{margin:16px;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;grid-auto-rows:minmax(50px,auto);justify-items:stretch}.app-class .mat-list-item{height:auto}.textarea-content{width:500px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: NgcSmartVictimService }, { type: i1.HttpClient }, { type: i4.MatSnackBar }, { type: i5$1.ActivatedRoute }, { type: i5$1.Router }, { type: CommonDialogService }, { type: i1$2.FormBuilder }]; } });
+
+const routes = [
+    { path: 'casenote/:victimId', component: CaseNoteComponent, pathMatch: 'full', canActivate: [MsalGuard], resolve: { loginStaff: LoginStaffResolverService } },
+    { path: 'saftyPlan/:victimId', component: VictimSafetyPlanComponent, pathMatch: 'full', resolve: { loginStaff: LoginStaffResolverService } },
+    { path: 'saftyPlanDetail/:victimServiceId/:victimId', component: VictimSafetyPlanDetailComponent, pathMatch: 'full', resolve: { loginStaff: LoginStaffResolverService } },
+    { path: 'victimList', component: NgcSmartVictimComponent, resolve: { loginStaff: LoginStaffResolverService, selectedOffender: SelectedOffenderResolverService } },
+    { path: 'victimHome', component: NgcSmartVictimComponent, resolve: { loginStaff: LoginStaffResolverService, selectedOffender: SelectedOffenderResolverService } },
+    { path: 'victimContact/:victimId', component: ContactComponent, resolve: { loginStaff: LoginStaffResolverService, selectedOffender: SelectedOffenderResolverService } },
+    { path: 'victimDetail/:victimId', component: SmartVictimDetailComponent, resolve: { loginStaff: LoginStaffResolverService, selectedOffender: SelectedOffenderResolverService } },
+    { path: 'smart-error', component: SmartErrorComponent }
+];
+class VictimRoutingModule {
+}
+/** @nocollapse */ /** @nocollapse */ VictimRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ VictimRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimRoutingModule, imports: [i5$1.RouterModule], exports: [RouterModule] });
+/** @nocollapse */ /** @nocollapse */ VictimRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimRoutingModule, imports: [[
+            RouterModule.forChild(routes)
+        ], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: VictimRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RouterModule.forChild(routes)
+                    ],
+                    exports: [
+                        RouterModule
+                    ]
+                }]
+        }] });
+
+const COMPONENTS = [
+    NgcSmartVictimComponent,
+    SmartVictimDetailComponent,
+    SmartVictimDeleteConfirmComponent,
+    PhoneMaskDirective
+];
+const ENTRY_COMPONENTS = [
+    SmartVictimDeleteConfirmComponent,
+];
+const BASE_MODULES = [
+    CommonModule,
+    ReactiveFormsModule
+];
+const CORE_MODULES = [NgcSmartCoreModule, SmartAddressModule];
+const MATERIAL_MODULES = [
+    MatButtonModule, MatCheckboxModule, MatRadioModule, MatSliderModule,
+    MatCardModule, MatSlideToggleModule,
+    MatListModule, MatIconModule, MatButtonToggleModule,
+    MatToolbarModule, MatTabsModule, MatExpansionModule,
+    MatMenuModule, MatInputModule, MatProgressBarModule,
+    MatDatepickerModule, MatNativeDateModule, MatPaginatorModule,
+    MatDialogModule, MatSidenavModule, MatSelectModule,
+    MatTableModule, MatSortModule, MatGridListModule, CdkTableModule, LayoutModule,
+];
+class NgcSmartVictimModule {
+}
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimModule, declarations: [NgcSmartVictimComponent,
+        SmartVictimDetailComponent,
+        SmartVictimDeleteConfirmComponent,
+        PhoneMaskDirective, CaseNoteComponent,
+        ContactComponent,
+        VictimSafetyPlanComponent,
+        VictimSafetyPlanDetailComponent,
+        VictimSearchFormComponent,
+        SeriveProviderComponent], imports: [CommonModule,
+        ReactiveFormsModule, MatButtonModule, MatCheckboxModule, MatRadioModule, MatSliderModule,
+        MatCardModule, MatSlideToggleModule,
+        MatListModule, MatIconModule, MatButtonToggleModule,
+        MatToolbarModule, MatTabsModule, MatExpansionModule,
+        MatMenuModule, MatInputModule, MatProgressBarModule,
+        MatDatepickerModule, MatNativeDateModule, MatPaginatorModule,
+        MatDialogModule, MatSidenavModule, MatSelectModule,
+        MatTableModule, MatSortModule, MatGridListModule, CdkTableModule, LayoutModule, NgcSmartCoreModule, SmartAddressModule, CommonDialogModule,
+        FormsModule,
+        VictimRoutingModule,
+        ApolloModule], exports: [NgcSmartVictimComponent,
+        SmartVictimDetailComponent,
+        SmartVictimDeleteConfirmComponent,
+        PhoneMaskDirective, ApolloModule] });
+/** @nocollapse */ /** @nocollapse */ NgcSmartVictimModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimModule, providers: [NgcSmartVictimService], imports: [[
+            ...BASE_MODULES,
+            ...MATERIAL_MODULES,
+            ...CORE_MODULES,
+            CommonDialogModule,
+            FormsModule,
+            VictimRoutingModule,
+            ApolloModule,
+            //SharedModule
+        ], ApolloModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgcSmartVictimModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENTS,
+                        CaseNoteComponent,
+                        ContactComponent,
+                        VictimSafetyPlanComponent,
+                        VictimSafetyPlanDetailComponent,
+                        VictimSearchFormComponent,
+                        SeriveProviderComponent
+                    ],
+                    imports: [
+                        ...BASE_MODULES,
+                        ...MATERIAL_MODULES,
+                        ...CORE_MODULES,
+                        CommonDialogModule,
+                        FormsModule,
+                        VictimRoutingModule,
+                        ApolloModule,
+                        //SharedModule
+                    ],
+                    exports: [...COMPONENTS, ApolloModule],
+                    entryComponents: [...ENTRY_COMPONENTS, SeriveProviderComponent],
+                    providers: [NgcSmartVictimService]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngc-smart-victim
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CaseNoteComponent, NgcSmartVictimComponent, NgcSmartVictimModule, NgcSmartVictimService, PhoneMaskDirective, SMART_LOOKUP_SERVICE_URL, SMART_OFFENDER_SERVICE_URL, SMART_VICTIM_SERVICE_URL, SMART_WARRANT_URL, SmartVictimDeleteConfirmComponent, SmartVictimDetailComponent, Victim, VictimAdvocate, VictimDrugUse, VictimGuardian, VictimListFilter$1 as VictimListFilter, VictimSupport, VictimWeaponUse, conditionalValidator, stringConditionalValidator };
+//# sourceMappingURL=csmart-ngc-smart-victim.mjs.map