@prutech/compliance 1.0.224 → 1.0.226

package/fesm2020/prutech-compliance.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, Input, ChangeDetectionStrategy, NgModule, ViewChild, Pipe, EventEmitter, Output } from '@angular/core';
+import { Injectable, Inject, Component, ChangeDetectionStrategy, Input, NgModule, ViewChild, Pipe, EventEmitter, Output } from '@angular/core';
 import * as i4$1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i7 from '@angular/forms';
@@ -15,7 +15,7 @@ import { createFeatureSelector, createSelector, select, StoreModule } from '@ngr
 import * as i5$1 from '@prutech/identity-client';
 import { ApiInterceptorService } from '@prutech/identity-client';
 import * as i2$2 from '@prutech/components';
-import { Lookup, SeamsHttpResponse, handleSuccess, handleLoadFail, ClientServicesScreenComponent, AbstractComponent, PtDynamicElement, CoreModule, DynamicFormsModule, TabsModule, ContextMenuComponent as ContextMenuComponent$3, AgGridComponent, invalidPhoneNumber, invalidEmail, NgxMaskModule, PtDynamicType, SignatureModalComponent, SignatureService, AssessmentQuestion } from '@prutech/components';
+import { Lookup, SeamsHttpResponse, handleSuccess, handleLoadFail, AbstractComponent, PtDynamicElement, ClientServicesScreenComponent, CoreModule, DynamicFormsModule, TabsModule, ContextMenuComponent as ContextMenuComponent$3, AgGridComponent, invalidPhoneNumber, invalidEmail, NgxMaskModule, PtDynamicType, SignatureModalComponent, SignatureService, AssessmentQuestion } from '@prutech/components';
 import { assign, get, map, toString, isNil, filter, find, toNumber, split, trim, set, mapValues, concat, isEmpty, isEqual, includes, last, first, has, forEach, cloneDeep, head, nth, chain, reduce, sortBy, invoke, keys, keyBy, size, isNumber, sum, values, some, isNaN, range, join, compact, uniqBy, flatMap, floor, padStart } from 'lodash';
 import { createEntityAdapter } from '@ngrx/entity';
 import { __decorate } from 'tslib';
@@ -269,8 +269,8 @@ class ReviewDetails {
         this.carFare = get(data, 'carFare');
         this.householdSize = get(data, 'householdSize');
         this.shelterType = get(data, 'shelterType');
-        this.snapEsCode = get(data, 'snapEsCodes');
-        this.wmsOffice = get(data, 'wmsOffice');
+        this.snapEsCode = get(data, 'snapESCodes');
+        this.wmsOffice = get(data, 'wmSoffice');
         this.mailingAddress = get(data, 'mailingAddress');
         this.assignmentType = get(data, 'assignmentType');
         this.assignmentSite = get(data, 'assignmentSite');
@@ -280,6 +280,7 @@ class ReviewDetails {
         this.appointmentSite = get(data, 'appointmentSite');
         this.appointmentInfractionDate = get(data, 'appointmentInfractionDate');
         this.appointmentInfractionType = get(data, 'appointmentInfractionType');
+        this.raDetails = get(data, 'raDetails');
     }
 }
 
@@ -518,32 +519,13 @@ const momentDateTimeFormat = 'MM/DD/YYYY HH:mm:ss';
 const dateTimePipeFormat = 'MM/dd/yyyy HH:mm:ss';
 const timeFormat$1 = 'HH:mm';
 
-class RarModalComponent {
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
-    openModal() {
-        this.dialog.open(ClientServicesScreenComponent, {
-            width: '60%',
-            data: this.caseId,
-        });
-    }
-}
-RarModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RarModalComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-RarModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RarModalComponent, selector: "prutech-rar-modal", inputs: { caseId: "caseId" }, ngImport: i0, template: "<button mat-button color=\"primary\" (click)=\"openModal()\">RAR Information</button>\r\n", styles: [""], components: [{ type: i4.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RarModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'prutech-rar-modal', template: "<button mat-button color=\"primary\" (click)=\"openModal()\">RAR Information</button>\r\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { caseId: [{
-                type: Input
-            }] } });
-
 class ReviewDetailsDialogComponent extends AbstractComponent {
-    constructor(dialogRef, preConciliationWorkListService, 
+    constructor(dialogRef, router, preConciliationWorkListService, 
     // tslint:disable-next-line:no-any
     data) {
         super();
         this.dialogRef = dialogRef;
+        this.router = router;
         this.preConciliationWorkListService = preConciliationWorkListService;
         this.data = data;
         this.dateFormat = datePipeFormat;
@@ -568,13 +550,17 @@ class ReviewDetailsDialogComponent extends AbstractComponent {
     hasAppointmentInfo() {
         return !!get(this.data, 'appointmentId');
     }
+    navigateToFia3a() {
+        this.router.navigate(['fia3a/' + this.reviewDetails.caseId]);
+        this.dialogRef.close();
+    }
 }
-ReviewDetailsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ReviewDetailsDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: PreConciliationWorkListService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ReviewDetailsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ReviewDetailsDialogComponent, selector: "prutech-review-details-dialog", usesInheritance: true, ngImport: i0, template: "<prutech-loader *ngIf=\"(loading | async)\"></prutech-loader>\r\n<prutech-dialog-box class=\"prutech-dialog-box\">\r\n  <div class=\"header\">Review Details</div>\r\n  <div class=\"body prutech-dialog-content\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxLayoutGap=\"10px\">\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\r\n      <!-- left -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case #</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsCaseNumber }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">First Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.firstName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Last Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.lastName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Date of Birth</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.dob | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Local Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.localOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Household Size</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.householdSize }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Shelter Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.shelterType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">CA ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.esCode }}</div>\r\n        </div>\r\n        <ng-template [ngIf]=\"hasAssignmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"assignment\"></ng-container>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"hasAppointmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"appointment\"></ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- middle -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">SNAP ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.snapEsCode }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Individual Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.individualStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Form Language</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.language }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Residential Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.residentialAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Mailing Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.mailingAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Program Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.programStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">FFR Date</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.nextFFR | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Child Care</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.childCare }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Car Fare</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.carFare }}</div>\r\n        </div>\r\n      </div>\r\n      <!-- right-->\r\n      <div fxFlex=\"20%\" fxLayout=\"column\" fxLayoutAlign=\"start start\">\r\n        <div *ngIf=\"!!reviewDetails?.caseId\">\r\n          <prutech-rar-modal [caseId]=\"reviewDetails?.caseId\"></prutech-rar-modal>\r\n        </div>\r\n        <button mat-button color=\"primary\">FIA3A</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"dialogboxfooter\">\r\n    <button mat-flat-button (click)=\"closeModal()\">EXIT</button>\r\n  </div>\r\n</prutech-dialog-box>\r\n\r\n<ng-template #assignment>\r\n  <div class=\"sub-title-header\">Assignment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #appointment>\r\n  <div class=\"sub-title-header\">Appointment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i2$2.LoaderComponent, selector: "prutech-loader" }, { type: i2$2.DialogBoxComponent, selector: "prutech-dialog-box" }, { type: RarModalComponent, selector: "prutech-rar-modal", inputs: ["caseId"] }, { type: i4.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4$1.AsyncPipe, "date": i4$1.DatePipe } });
+ReviewDetailsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ReviewDetailsDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i1$2.Router }, { token: PreConciliationWorkListService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ReviewDetailsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ReviewDetailsDialogComponent, selector: "prutech-review-details-dialog", usesInheritance: true, ngImport: i0, template: "<prutech-loader *ngIf=\"(loading | async)\"></prutech-loader>\r\n<prutech-dialog-box class=\"prutech-dialog-box\">\r\n  <div class=\"header\">Review Details</div>\r\n  <div class=\"body prutech-dialog-content\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxLayoutGap=\"10px\">\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\r\n      <!-- left -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case #</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsCaseNumber }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">First Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.firstName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Last Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.lastName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Date of Birth</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.dob | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Local Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.localOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Household Size</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.householdSize }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Shelter Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.shelterType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">CA ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.esCode }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">RAR Information</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.raDetails }}</div>\r\n        </div>\r\n        <ng-template [ngIf]=\"hasAssignmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"assignment\"></ng-container>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"hasAppointmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"appointment\"></ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- middle -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">SNAP ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.snapEsCode }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Individual Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.individualStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Form Language</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.language }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Residential Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.residentialAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Mailing Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.mailingAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Program Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.programStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">FFR Date</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.nextFFR | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Child Care</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.childCare }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Car Fare</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.carFare }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Income</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.income }}</div>\r\n        </div>\r\n      </div>\r\n      <!-- right-->\r\n      <div fxFlex=\"20%\" fxLayout=\"column\" fxLayoutAlign=\"start start\">\r\n        <!-- <div *ngIf=\"!!reviewDetails?.caseId\">\r\n          <prutech-rar-modal [caseId]=\"reviewDetails?.caseId\"></prutech-rar-modal>\r\n        </div> -->\r\n        <button mat-button color=\"primary\" (click)=\"navigateToFia3a()\">FIA3A</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"dialogboxfooter\">\r\n    <button mat-flat-button (click)=\"closeModal()\">EXIT</button>\r\n  </div>\r\n</prutech-dialog-box>\r\n\r\n<ng-template #assignment>\r\n  <div class=\"sub-title-header\">Assignment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #appointment>\r\n  <div class=\"sub-title-header\">Appointment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i2$2.LoaderComponent, selector: "prutech-loader" }, { type: i2$2.DialogBoxComponent, selector: "prutech-dialog-box" }, { type: i4.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4$1.AsyncPipe, "date": i4$1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ReviewDetailsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prutech-review-details-dialog', template: "<prutech-loader *ngIf=\"(loading | async)\"></prutech-loader>\r\n<prutech-dialog-box class=\"prutech-dialog-box\">\r\n  <div class=\"header\">Review Details</div>\r\n  <div class=\"body prutech-dialog-content\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxLayoutGap=\"10px\">\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\r\n      <!-- left -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case #</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsCaseNumber }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">First Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.firstName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Last Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.lastName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Date of Birth</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.dob | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Local Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.localOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Household Size</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.householdSize }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Shelter Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.shelterType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">CA ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.esCode }}</div>\r\n        </div>\r\n        <ng-template [ngIf]=\"hasAssignmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"assignment\"></ng-container>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"hasAppointmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"appointment\"></ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- middle -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">SNAP ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.snapEsCode }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Individual Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.individualStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Form Language</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.language }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Residential Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.residentialAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Mailing Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.mailingAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Program Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.programStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">FFR Date</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.nextFFR | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Child Care</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.childCare }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Car Fare</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.carFare }}</div>\r\n        </div>\r\n      </div>\r\n      <!-- right-->\r\n      <div fxFlex=\"20%\" fxLayout=\"column\" fxLayoutAlign=\"start start\">\r\n        <div *ngIf=\"!!reviewDetails?.caseId\">\r\n          <prutech-rar-modal [caseId]=\"reviewDetails?.caseId\"></prutech-rar-modal>\r\n        </div>\r\n        <button mat-button color=\"primary\">FIA3A</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"dialogboxfooter\">\r\n    <button mat-flat-button (click)=\"closeModal()\">EXIT</button>\r\n  </div>\r\n</prutech-dialog-box>\r\n\r\n<ng-template #assignment>\r\n  <div class=\"sub-title-header\">Assignment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #appointment>\r\n  <div class=\"sub-title-header\">Appointment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: PreConciliationWorkListService }, { type: undefined, decorators: [{
+            args: [{ selector: 'prutech-review-details-dialog', template: "<prutech-loader *ngIf=\"(loading | async)\"></prutech-loader>\r\n<prutech-dialog-box class=\"prutech-dialog-box\">\r\n  <div class=\"header\">Review Details</div>\r\n  <div class=\"body prutech-dialog-content\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\" fxLayoutGap=\"10px\">\r\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-between start\">\r\n      <!-- left -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case #</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsCaseNumber }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">First Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.firstName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Last Name</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.lastName }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Date of Birth</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.dob | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Local Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.localOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Household Size</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.householdSize }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Shelter Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.shelterType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Case Type</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.caseType }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">CA ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.esCode }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">RAR Information</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.raDetails }}</div>\r\n        </div>\r\n        <ng-template [ngIf]=\"hasAssignmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"assignment\"></ng-container>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"hasAppointmentInfo()\">\r\n          <ng-container *ngTemplateOutlet=\"appointment\"></ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- middle -->\r\n      <div fxFlex=\"40%\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">SNAP ES Code</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.snapEsCode }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Individual Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.individualStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">WMS Office</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.wmsOffice }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Form Language</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.language }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Residential Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.residentialAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Mailing Address</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.mailingAddress }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Program Status</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.programStatus }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">FFR Date</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.nextFFR | date: dateFormat }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Child Care</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.childCare }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Car Fare</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.carFare }}</div>\r\n        </div>\r\n        <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n          <div fxFlex=\"40%\" class=\"label\">Income</div>\r\n          <div fxFlex class=\"value\">{{ reviewDetails?.income }}</div>\r\n        </div>\r\n      </div>\r\n      <!-- right-->\r\n      <div fxFlex=\"20%\" fxLayout=\"column\" fxLayoutAlign=\"start start\">\r\n        <!-- <div *ngIf=\"!!reviewDetails?.caseId\">\r\n          <prutech-rar-modal [caseId]=\"reviewDetails?.caseId\"></prutech-rar-modal>\r\n        </div> -->\r\n        <button mat-button color=\"primary\" (click)=\"navigateToFia3a()\">FIA3A</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"dialogboxfooter\">\r\n    <button mat-flat-button (click)=\"closeModal()\">EXIT</button>\r\n  </div>\r\n</prutech-dialog-box>\r\n\r\n<ng-template #assignment>\r\n  <div class=\"sub-title-header\">Assignment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Assignment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.assignmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #appointment>\r\n  <div class=\"sub-title-header\">Appointment Information</div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentType }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Appointment Site</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentSite }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Date</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionDate | date: dateFormat }}</div>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start start\" class=\"readonly-group\">\r\n    <div fxFlex=\"40%\" class=\"label\">Infraction Type</div>\r\n    <div fxFlex class=\"value\">{{ reviewDetails?.appointmentInfractionType }}</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: i1$2.Router }, { type: PreConciliationWorkListService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -1372,6 +1358,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
+class RarModalComponent {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    openModal() {
+        this.dialog.open(ClientServicesScreenComponent, {
+            width: '60%',
+            data: this.caseId,
+        });
+    }
+}
+RarModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RarModalComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+RarModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RarModalComponent, selector: "prutech-rar-modal", inputs: { caseId: "caseId" }, ngImport: i0, template: "<button mat-button color=\"primary\" (click)=\"openModal()\">RAR Information</button>\r\n", styles: [""], components: [{ type: i4.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RarModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'prutech-rar-modal', template: "<button mat-button color=\"primary\" (click)=\"openModal()\">RAR Information</button>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { caseId: [{
+                type: Input
+            }] } });
+
 const goodCauseActionFormModel = {
     editTemplate: [
         {
@@ -8304,7 +8310,7 @@ class ParticipantTimesheetComponent extends AbstractComponent {
         return moment(completedDate).isSameOrAfter(moment(), 'day');
     }
     isVisible() {
-        let res = false;
+        let res = true;
         forEach(this.assignments, (assignment) => {
             if (this.details.isDue || this.details.isCurrent) {
                 res = !this.isAttestedCheckValue ? assignment.isSelfAttestedSchool : false;
@@ -8380,10 +8386,10 @@ class ParticipantTimesheetComponent extends AbstractComponent {
     }
 }
 ParticipantTimesheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ParticipantTimesheetComponent, deps: [{ token: TimeKeepingDetailsService }, { token: ParticipantChangeStatusService }, { token: i0.ChangeDetectorRef }, { token: i2$2.TabService }, { token: i1$2.Router }, { token: i5$1.UserService }, { token: i1$1.MatDialog }, { token: i7.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ParticipantTimesheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ParticipantTimesheetComponent, selector: "prutech-participant-timesheet", inputs: { isAttestedCheckValue: "isAttestedCheckValue" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-around start\">\r\n    <div fxFlex=\"100%\">\r\n      <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"time-sheet-details\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n          <div fxFlex=\"5%\" fxLayoutAlign=\"end center\">\r\n            <mat-icon class=\"material-icons-outlined primary-icon\" [ngClass]=\"{ 'primary-icon': !isBackDisable(), 'grey-icon': isBackDisable() }\"\r\n              (click)=\"loadPastCycle()\">arrow_back_ios\r\n            </mat-icon>\r\n          </div>\r\n          <div fxFlex=\"60%\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n            <mat-label class=\"label time-sheet-header\">\r\n              Timesheet Cycle <span class=\"left-label\">{{ timeCycleDisplay }}</span>\r\n            </mat-label>\r\n          </div>\r\n          <mat-icon fxFlex=\"5%\" class=\"material-icons-outlined\" [ngClass]=\"{ 'primary-icon': !isForwardDisable(), 'grey-icon': isForwardDisable() }\"\r\n            (click)=\"loadForwardCycle()\">\r\n            arrow_forward_ios\r\n          </mat-icon>\r\n        </div>\r\n        <ng-container *ngFor=\"let assignment of assignments;let i=index\">\r\n          <div fxFlex fxLayoutAlign=\"center center\" class=\"time-sheet-row border-bottom padding\">\r\n            <div *ngIf=\"isHoursExceeded(assignment)\" class=\"warning-icon\">\r\n              <mat-icon>error</mat-icon>\r\n              <span> HOURS EXCEEDED </span>\r\n            </div>\r\n\r\n            <strong fxFlex=\"50%\" fxLayoutAlign=\"end center\">\r\n              ASSIGNMENT {{ i+1 }}  ATTRIBUTES\r\n            </strong>\r\n            <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" [disabled] = \"!this.details.isDue\"\r\n                (click)=\"onClickConciliate(assignment)\">\r\n                <span>DO NOT CONCILIATE</span>\r\n                <br>\r\n                <sub>({{ assignment?.doNotConciliateCounter }} REMAINING)</sub>\r\n              </button>\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" (click)=\"openPCS(assignment)\" \r\n              [disabled]=\"isPcsDisabled(assignment)\">\r\n                PARTICIPANT CHANGE OF STATUS\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"participant-details time-sheet-row border-bottom padding\">\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Site Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.siteName?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Type</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentType?.displayValue }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Status</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStatus?.displayValue\r\n                  }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Start Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStartDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment End Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentEndDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hour Group</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourGroup }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hours Assigned</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourAssigned }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Skill Code</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.skillCode?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Course Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.courseName?.displayValue}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"left-label\">\r\n                  <mat-icon fxFlex=\"10%\" class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"isVisible()\" (click)=\"addActivity(assignment)\">add_circle\r\n                    </mat-icon>\r\n              <mat-form-field fxFlex=\"90%\" appearance=\"outline\" class=\"left-label-2 activity-form-field\" floatLabel=\"auto\">\r\n                <mat-label>Select Activity</mat-label>\r\n                <mat-select [formControl]=\"control\" [disabled]=\"!isVisible()\">\r\n                  <mat-option *ngFor=\"let activity of assignment.filteredActivities\" [value]=\"activity\">\r\n                    <span [title]=\"activity?.displayValue\">\r\n                      {{ activity?.displayValue }}\r\n                    </span>\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n\r\n              <div fxFlex=\"12%\" *ngFor=\"let item of assignment.currentCycleDates\" class=\"time-label\">\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\r\n                  <div>{{ item?.dayOfWeek }}</div>\r\n                  <div>{{ item?.date | date: dateFormat }}</div>\r\n                </div>\r\n              </div>\r\n              <div fxFlex=\"12%\" class=\"time-label\"><span>Weekly</span></div>\r\n\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"!!assignment.formGroup\">\r\n            <form [formGroup]=\"assignment.formGroup\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"20px\"\r\n              class=\"time-sheet-row\" *ngFor=\"let item of assignment.timesheetByActivity\">\r\n              <div fxFlex=\"15%\" class=\"left-label\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n                <mat-icon class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"isVisible()\" (click)=\"removeActivity(item?.id, assignment)\">remove_circle\r\n                </mat-icon>\r\n                <span class=\"left-label-2\">{{ item?.name }}</span>\r\n              </div>\r\n              <div formGroupName=\"{{item?.id}}\" fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n                <mat-form-field fxFlex=\"12%\" appearance=\"outline\" *ngFor=\"let path of dayOfWeeks\" class=\"time-input\">\r\n                  <input matInput [formControlName]=\"path\" [readonly]=\"!isAttestedCheckValue?assignment.isSelfAttestedSchool:false\" (ngModelChange)=\"updateHours($event, item?.id, path, assignment)\" />\r\n                  <mat-error *ngIf=\"!!getErrorMessage(item?.id, path, assignment)\">{{ getErrorMessage(item?.id, path,\r\n                    assignment)\r\n                    }}</mat-error>\r\n                </mat-form-field>\r\n                <span fxFlex=\"12%\" class=\"time-label\">{{ getSum(item) }}</span>\r\n              </div>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!--Total-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" class=\"left-label\" [ngClass]=\"{ 'total': isVisible() }\"><span class=\"left-label-2\">Daily\r\n                Total</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n              <div fxFlex=\"12%\" *ngFor=\"let path of dayOfWeeks\" class=\"time-label\">{{ assignment?.dailyTotal[path] }}</div>\r\n              <div fxFlex=\"12%\" class=\"time-label\">{{ getTotalSum( assignment ) }}</div>\r\n            </div>\r\n          </div>\r\n          <!--Carfare-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\"><span>Carfare</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.carfareFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.carfareModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"item?.isDisable\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option [value]=\"defaultCarfareOption\">N/A</mat-option>\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n          <!--Assignment Mode-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\">\r\n              <span>Assignment Mode\r\n                <span class=\"prutech-dynamic-button-mandatory\">*</span>\r\n              </span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.assignmentModeFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.assignmentModeModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"!isVisible()\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"time-sheet-comment\">\r\n    <div *ngIf=\"showDcMessage()\" class=\"warning-text\">\r\n      <span>{{ this.getDcMessage() }}</span>\r\n    </div>\r\n    <div *ngIf=\"isParticipantChangeOfStatus()\" class=\"warning-text\">\r\n      <span>{{ this.details?.programAlert?.pcsType?.displayValue }} PCS</span><br>\r\n      <span>Performed on {{ this.details?.programAlert?.submittedOn | date: 'MM/dd/yyyy'}}</span><br>\r\n      <span>Reason: {{ this.details?.programAlert?.reason?.displayValue }}</span><br>\r\n      <span class=\"comment\">{{ this.details?.programAlert?.comments }}</span>\r\n    </div>\r\n    <span>- All hours entered into SEAMS are subject to audit and require back up documentation, either thru separate\r\n      manual or electronic tracking which matches the hours submitted for each client. </span><br>\r\n    <span *ngIf=\"!!timeFrameMessage\">- Data Entry must be completed by {{ timeFrameMessage }}.</span>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"30px\">\r\n    <button mat-flat-button (click)=\"exit()\">EXIT</button>\r\n    <button mat-raised-button color=\"primary\" *ngIf=\"isVisible()\" (click)=\"validateAndSave()\" [disabled]=\"isFormInValid()\">SAVE\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"showDeficitHoursMessage\" class=\"save-warning\" fxLayoutAlign=\"center center\">\r\n    <mat-icon>error</mat-icon>\r\n    <span> Total weekly hours entered have a deficit subject to infraction. </span>\r\n  </div>\r\n</div>", styles: [""], components: [{ type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6.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: i7.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: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "date": i4$1.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ParticipantTimesheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ParticipantTimesheetComponent, selector: "prutech-participant-timesheet", inputs: { isAttestedCheckValue: "isAttestedCheckValue" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-around start\">\r\n    <div fxFlex=\"100%\">\r\n      <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"time-sheet-details\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n          <div fxFlex=\"5%\" fxLayoutAlign=\"end center\">\r\n            <mat-icon class=\"material-icons-outlined primary-icon\" [ngClass]=\"{ 'primary-icon': !isBackDisable(), 'grey-icon': isBackDisable() }\"\r\n              (click)=\"loadPastCycle()\">arrow_back_ios\r\n            </mat-icon>\r\n          </div>\r\n          <div fxFlex=\"60%\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n            <mat-label class=\"label time-sheet-header\">\r\n              Timesheet Cycle <span class=\"left-label\">{{ timeCycleDisplay }}</span>\r\n            </mat-label>\r\n          </div>\r\n          <mat-icon fxFlex=\"5%\" class=\"material-icons-outlined\" [ngClass]=\"{ 'primary-icon': !isForwardDisable(), 'grey-icon': isForwardDisable() }\"\r\n            (click)=\"loadForwardCycle()\">\r\n            arrow_forward_ios\r\n          </mat-icon>\r\n        </div>\r\n        <ng-container *ngFor=\"let assignment of assignments;let i=index\">\r\n          <div fxFlex fxLayoutAlign=\"center center\" class=\"time-sheet-row border-bottom padding\">\r\n            <div *ngIf=\"isHoursExceeded(assignment)\" class=\"warning-icon\">\r\n              <mat-icon>error</mat-icon>\r\n              <span> HOURS EXCEEDED </span>\r\n            </div>\r\n\r\n            <strong fxFlex=\"50%\" fxLayoutAlign=\"end center\">\r\n              ASSIGNMENT {{ i+1 }}  ATTRIBUTES\r\n            </strong>\r\n            <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" [disabled] = \"!this.details.isDue\"\r\n                (click)=\"onClickConciliate(assignment)\">\r\n                <span>DO NOT CONCILIATE</span>\r\n                <br>\r\n                <sub>({{ assignment?.doNotConciliateCounter }} REMAINING)</sub>\r\n              </button>\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" (click)=\"openPCS(assignment)\" \r\n              [disabled]=\"isPcsDisabled(assignment)\">\r\n                PARTICIPANT CHANGE OF STATUS\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"participant-details time-sheet-row border-bottom padding\">\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Site Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.siteName?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Type</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentType?.displayValue }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Status</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStatus?.displayValue\r\n                  }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Start Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStartDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment End Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentEndDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hour Group</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourGroup }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hours Assigned</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourAssigned }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Skill Code</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.skillCode?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Course Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.courseName?.displayValue}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"left-label\">\r\n              <mat-icon fxFlex=\"10%\" class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"(this.details.isCurrent||this.details.isDue)\" (click)=\"addActivity(assignment)\">add_circle\r\n                </mat-icon>\r\n          <mat-form-field fxFlex=\"90%\" appearance=\"outline\" class=\"left-label-2 activity-form-field\" floatLabel=\"auto\">\r\n            <mat-label>Select Activity</mat-label>\r\n            <mat-select [formControl]=\"control\" [disabled]=\"!isVisible() != true? (this.details.isDue || this.details.isCurrent)? (!this.isAttestedCheckValue? assignment.isSelfAttestedSchool:false):true:false\">\r\n              <mat-option *ngFor=\"let activity of assignment.filteredActivities\" [value]=\"activity\">\r\n                <span [title]=\"activity?.displayValue\">\r\n                  {{ activity?.displayValue }}\r\n                </span>\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n\r\n              <div fxFlex=\"12%\" *ngFor=\"let item of assignment.currentCycleDates\" class=\"time-label\">\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\r\n                  <div>{{ item?.dayOfWeek }}</div>\r\n                  <div>{{ item?.date | date: dateFormat }}</div>\r\n                </div>\r\n              </div>\r\n              <div fxFlex=\"12%\" class=\"time-label\"><span>Weekly</span></div>\r\n\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"!!assignment.formGroup\">\r\n            <form [formGroup]=\"assignment.formGroup\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"20px\"\r\n              class=\"time-sheet-row\" *ngFor=\"let item of assignment.timesheetByActivity\">\r\n              <div fxFlex=\"15%\" class=\"left-label\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n                <mat-icon class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"isVisible()\" (click)=\"removeActivity(item?.id, assignment)\">remove_circle\r\n                </mat-icon>\r\n                <span class=\"left-label-2\">{{ item?.name }}</span>\r\n              </div>\r\n              <div formGroupName=\"{{item?.id}}\" fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n                <mat-form-field fxFlex=\"12%\" appearance=\"outline\" *ngFor=\"let path of dayOfWeeks\" class=\"time-input\">\r\n                  <input matInput [formControlName]=\"path\" [readonly]=\"!isAttestedCheckValue?assignment.isSelfAttestedSchool:false\" (ngModelChange)=\"updateHours($event, item?.id, path, assignment)\" />\r\n                  <mat-error *ngIf=\"!!getErrorMessage(item?.id, path, assignment)\">{{ getErrorMessage(item?.id, path,\r\n                    assignment)\r\n                    }}</mat-error>\r\n                </mat-form-field>\r\n                <span fxFlex=\"12%\" class=\"time-label\">{{ getSum(item) }}</span>\r\n              </div>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!--Total-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" class=\"left-label\" [ngClass]=\"{ 'total': isVisible() }\"><span class=\"left-label-2\">Daily\r\n                Total</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n              <div fxFlex=\"12%\" *ngFor=\"let path of dayOfWeeks\" class=\"time-label\">{{ assignment?.dailyTotal[path] }}</div>\r\n              <div fxFlex=\"12%\" class=\"time-label\">{{ getTotalSum( assignment ) }}</div>\r\n            </div>\r\n          </div>\r\n          <!--Carfare-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\"><span>Carfare</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.carfareFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.carfareModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"item?.isDisable\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option [value]=\"defaultCarfareOption\">N/A</mat-option>\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n          <!--Assignment Mode-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\">\r\n              <span>Assignment Mode\r\n                <span class=\"prutech-dynamic-button-mandatory\">*</span>\r\n              </span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.assignmentModeFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.assignmentModeModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"item?.isDisable ||!isAttestedCheckValue?assignment.isSelfAttestedSchool:false\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"time-sheet-comment\">\r\n    <div *ngIf=\"showDcMessage()\" class=\"warning-text\">\r\n      <span>{{ this.getDcMessage() }}</span>\r\n    </div>\r\n    <div *ngIf=\"isParticipantChangeOfStatus()\" class=\"warning-text\">\r\n      <span>{{ this.details?.programAlert?.pcsType?.displayValue }} PCS</span><br>\r\n      <span>Performed on {{ this.details?.programAlert?.submittedOn | date: 'MM/dd/yyyy'}}</span><br>\r\n      <span>Reason: {{ this.details?.programAlert?.reason?.displayValue }}</span><br>\r\n      <span class=\"comment\">{{ this.details?.programAlert?.comments }}</span>\r\n    </div>\r\n    <span>- All hours entered into SEAMS are subject to audit and require back up documentation, either thru separate\r\n      manual or electronic tracking which matches the hours submitted for each client. </span><br>\r\n    <span *ngIf=\"!!timeFrameMessage\">- Data Entry must be completed by {{ timeFrameMessage }}.</span>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"30px\">\r\n    <button mat-flat-button (click)=\"exit()\">EXIT</button>\r\n    <button mat-raised-button color=\"primary\" *ngIf=\"isVisible()&& (this.details.isDue ||this.details.isCurrent)\" (click)=\"validateAndSave()\" [disabled]=\"isFormInValid()\">SAVE\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"showDeficitHoursMessage\" class=\"save-warning\" fxLayoutAlign=\"center center\">\r\n    <mat-icon>error</mat-icon>\r\n    <span> Total weekly hours entered have a deficit subject to infraction. </span>\r\n  </div>\r\n</div>", styles: [""], components: [{ type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6.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: i7.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: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "date": i4$1.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ParticipantTimesheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prutech-participant-timesheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-around start\">\r\n    <div fxFlex=\"100%\">\r\n      <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"time-sheet-details\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n          <div fxFlex=\"5%\" fxLayoutAlign=\"end center\">\r\n            <mat-icon class=\"material-icons-outlined primary-icon\" [ngClass]=\"{ 'primary-icon': !isBackDisable(), 'grey-icon': isBackDisable() }\"\r\n              (click)=\"loadPastCycle()\">arrow_back_ios\r\n            </mat-icon>\r\n          </div>\r\n          <div fxFlex=\"60%\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n            <mat-label class=\"label time-sheet-header\">\r\n              Timesheet Cycle <span class=\"left-label\">{{ timeCycleDisplay }}</span>\r\n            </mat-label>\r\n          </div>\r\n          <mat-icon fxFlex=\"5%\" class=\"material-icons-outlined\" [ngClass]=\"{ 'primary-icon': !isForwardDisable(), 'grey-icon': isForwardDisable() }\"\r\n            (click)=\"loadForwardCycle()\">\r\n            arrow_forward_ios\r\n          </mat-icon>\r\n        </div>\r\n        <ng-container *ngFor=\"let assignment of assignments;let i=index\">\r\n          <div fxFlex fxLayoutAlign=\"center center\" class=\"time-sheet-row border-bottom padding\">\r\n            <div *ngIf=\"isHoursExceeded(assignment)\" class=\"warning-icon\">\r\n              <mat-icon>error</mat-icon>\r\n              <span> HOURS EXCEEDED </span>\r\n            </div>\r\n\r\n            <strong fxFlex=\"50%\" fxLayoutAlign=\"end center\">\r\n              ASSIGNMENT {{ i+1 }}  ATTRIBUTES\r\n            </strong>\r\n            <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" [disabled] = \"!this.details.isDue\"\r\n                (click)=\"onClickConciliate(assignment)\">\r\n                <span>DO NOT CONCILIATE</span>\r\n                <br>\r\n                <sub>({{ assignment?.doNotConciliateCounter }} REMAINING)</sub>\r\n              </button>\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" (click)=\"openPCS(assignment)\" \r\n              [disabled]=\"isPcsDisabled(assignment)\">\r\n                PARTICIPANT CHANGE OF STATUS\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"participant-details time-sheet-row border-bottom padding\">\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Site Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.siteName?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Type</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentType?.displayValue }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Status</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStatus?.displayValue\r\n                  }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Start Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStartDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment End Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentEndDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hour Group</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourGroup }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hours Assigned</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourAssigned }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Skill Code</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.skillCode?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Course Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.courseName?.displayValue}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"left-label\">\r\n                  <mat-icon fxFlex=\"10%\" class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"isVisible()\" (click)=\"addActivity(assignment)\">add_circle\r\n                    </mat-icon>\r\n              <mat-form-field fxFlex=\"90%\" appearance=\"outline\" class=\"left-label-2 activity-form-field\" floatLabel=\"auto\">\r\n                <mat-label>Select Activity</mat-label>\r\n                <mat-select [formControl]=\"control\" [disabled]=\"!isVisible()\">\r\n                  <mat-option *ngFor=\"let activity of assignment.filteredActivities\" [value]=\"activity\">\r\n                    <span [title]=\"activity?.displayValue\">\r\n                      {{ activity?.displayValue }}\r\n                    </span>\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n\r\n              <div fxFlex=\"12%\" *ngFor=\"let item of assignment.currentCycleDates\" class=\"time-label\">\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\r\n                  <div>{{ item?.dayOfWeek }}</div>\r\n                  <div>{{ item?.date | date: dateFormat }}</div>\r\n                </div>\r\n              </div>\r\n              <div fxFlex=\"12%\" class=\"time-label\"><span>Weekly</span></div>\r\n\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"!!assignment.formGroup\">\r\n            <form [formGroup]=\"assignment.formGroup\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"20px\"\r\n              class=\"time-sheet-row\" *ngFor=\"let item of assignment.timesheetByActivity\">\r\n              <div fxFlex=\"15%\" class=\"left-label\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n                <mat-icon class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"isVisible()\" (click)=\"removeActivity(item?.id, assignment)\">remove_circle\r\n                </mat-icon>\r\n                <span class=\"left-label-2\">{{ item?.name }}</span>\r\n              </div>\r\n              <div formGroupName=\"{{item?.id}}\" fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n                <mat-form-field fxFlex=\"12%\" appearance=\"outline\" *ngFor=\"let path of dayOfWeeks\" class=\"time-input\">\r\n                  <input matInput [formControlName]=\"path\" [readonly]=\"!isAttestedCheckValue?assignment.isSelfAttestedSchool:false\" (ngModelChange)=\"updateHours($event, item?.id, path, assignment)\" />\r\n                  <mat-error *ngIf=\"!!getErrorMessage(item?.id, path, assignment)\">{{ getErrorMessage(item?.id, path,\r\n                    assignment)\r\n                    }}</mat-error>\r\n                </mat-form-field>\r\n                <span fxFlex=\"12%\" class=\"time-label\">{{ getSum(item) }}</span>\r\n              </div>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!--Total-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" class=\"left-label\" [ngClass]=\"{ 'total': isVisible() }\"><span class=\"left-label-2\">Daily\r\n                Total</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n              <div fxFlex=\"12%\" *ngFor=\"let path of dayOfWeeks\" class=\"time-label\">{{ assignment?.dailyTotal[path] }}</div>\r\n              <div fxFlex=\"12%\" class=\"time-label\">{{ getTotalSum( assignment ) }}</div>\r\n            </div>\r\n          </div>\r\n          <!--Carfare-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\"><span>Carfare</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.carfareFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.carfareModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"item?.isDisable\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option [value]=\"defaultCarfareOption\">N/A</mat-option>\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n          <!--Assignment Mode-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\">\r\n              <span>Assignment Mode\r\n                <span class=\"prutech-dynamic-button-mandatory\">*</span>\r\n              </span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.assignmentModeFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.assignmentModeModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"!isVisible()\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"time-sheet-comment\">\r\n    <div *ngIf=\"showDcMessage()\" class=\"warning-text\">\r\n      <span>{{ this.getDcMessage() }}</span>\r\n    </div>\r\n    <div *ngIf=\"isParticipantChangeOfStatus()\" class=\"warning-text\">\r\n      <span>{{ this.details?.programAlert?.pcsType?.displayValue }} PCS</span><br>\r\n      <span>Performed on {{ this.details?.programAlert?.submittedOn | date: 'MM/dd/yyyy'}}</span><br>\r\n      <span>Reason: {{ this.details?.programAlert?.reason?.displayValue }}</span><br>\r\n      <span class=\"comment\">{{ this.details?.programAlert?.comments }}</span>\r\n    </div>\r\n    <span>- All hours entered into SEAMS are subject to audit and require back up documentation, either thru separate\r\n      manual or electronic tracking which matches the hours submitted for each client. </span><br>\r\n    <span *ngIf=\"!!timeFrameMessage\">- Data Entry must be completed by {{ timeFrameMessage }}.</span>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"30px\">\r\n    <button mat-flat-button (click)=\"exit()\">EXIT</button>\r\n    <button mat-raised-button color=\"primary\" *ngIf=\"isVisible()\" (click)=\"validateAndSave()\" [disabled]=\"isFormInValid()\">SAVE\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"showDeficitHoursMessage\" class=\"save-warning\" fxLayoutAlign=\"center center\">\r\n    <mat-icon>error</mat-icon>\r\n    <span> Total weekly hours entered have a deficit subject to infraction. </span>\r\n  </div>\r\n</div>", styles: [""] }]
+            args: [{ selector: 'prutech-participant-timesheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"space-around start\">\r\n    <div fxFlex=\"100%\">\r\n      <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"time-sheet-details\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n          <div fxFlex=\"5%\" fxLayoutAlign=\"end center\">\r\n            <mat-icon class=\"material-icons-outlined primary-icon\" [ngClass]=\"{ 'primary-icon': !isBackDisable(), 'grey-icon': isBackDisable() }\"\r\n              (click)=\"loadPastCycle()\">arrow_back_ios\r\n            </mat-icon>\r\n          </div>\r\n          <div fxFlex=\"60%\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n            <mat-label class=\"label time-sheet-header\">\r\n              Timesheet Cycle <span class=\"left-label\">{{ timeCycleDisplay }}</span>\r\n            </mat-label>\r\n          </div>\r\n          <mat-icon fxFlex=\"5%\" class=\"material-icons-outlined\" [ngClass]=\"{ 'primary-icon': !isForwardDisable(), 'grey-icon': isForwardDisable() }\"\r\n            (click)=\"loadForwardCycle()\">\r\n            arrow_forward_ios\r\n          </mat-icon>\r\n        </div>\r\n        <ng-container *ngFor=\"let assignment of assignments;let i=index\">\r\n          <div fxFlex fxLayoutAlign=\"center center\" class=\"time-sheet-row border-bottom padding\">\r\n            <div *ngIf=\"isHoursExceeded(assignment)\" class=\"warning-icon\">\r\n              <mat-icon>error</mat-icon>\r\n              <span> HOURS EXCEEDED </span>\r\n            </div>\r\n\r\n            <strong fxFlex=\"50%\" fxLayoutAlign=\"end center\">\r\n              ASSIGNMENT {{ i+1 }}  ATTRIBUTES\r\n            </strong>\r\n            <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" [disabled] = \"!this.details.isDue\"\r\n                (click)=\"onClickConciliate(assignment)\">\r\n                <span>DO NOT CONCILIATE</span>\r\n                <br>\r\n                <sub>({{ assignment?.doNotConciliateCounter }} REMAINING)</sub>\r\n              </button>\r\n              <button mat-stroked-button color=\"primary\" class=\"button-size\" (click)=\"openPCS(assignment)\" \r\n              [disabled]=\"isPcsDisabled(assignment)\">\r\n                PARTICIPANT CHANGE OF STATUS\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"participant-details time-sheet-row border-bottom padding\">\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Site Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.siteName?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Type</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentType?.displayValue }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Status</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStatus?.displayValue\r\n                  }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment Start Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentStartDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Assignment End Date</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.assignmentEndDate | date:\r\n                  fullDateFormat }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hour Group</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourGroup }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Hours Assigned</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.hourAssigned }}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"column\">\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Skill Code</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.skillCode?.displayValue }}</div>\r\n              </div>\r\n              <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"readonly-info\">\r\n                <div fxFlex class=\"label\" fxLayoutAlign=\"center center\">Course Name</div>\r\n                <div fxFlex class=\"value\" fxLayoutAlign=\"center center\">{{ assignment?.courseName?.displayValue}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-bottom\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"left-label\">\r\n              <mat-icon fxFlex=\"10%\" class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"(this.details.isCurrent||this.details.isDue)\" (click)=\"addActivity(assignment)\">add_circle\r\n                </mat-icon>\r\n          <mat-form-field fxFlex=\"90%\" appearance=\"outline\" class=\"left-label-2 activity-form-field\" floatLabel=\"auto\">\r\n            <mat-label>Select Activity</mat-label>\r\n            <mat-select [formControl]=\"control\" [disabled]=\"!isVisible() != true? (this.details.isDue || this.details.isCurrent)? (!this.isAttestedCheckValue? assignment.isSelfAttestedSchool:false):true:false\">\r\n              <mat-option *ngFor=\"let activity of assignment.filteredActivities\" [value]=\"activity\">\r\n                <span [title]=\"activity?.displayValue\">\r\n                  {{ activity?.displayValue }}\r\n                </span>\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n\r\n              <div fxFlex=\"12%\" *ngFor=\"let item of assignment.currentCycleDates\" class=\"time-label\">\r\n                <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\r\n                  <div>{{ item?.dayOfWeek }}</div>\r\n                  <div>{{ item?.date | date: dateFormat }}</div>\r\n                </div>\r\n              </div>\r\n              <div fxFlex=\"12%\" class=\"time-label\"><span>Weekly</span></div>\r\n\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"!!assignment.formGroup\">\r\n            <form [formGroup]=\"assignment.formGroup\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxLayoutGap=\"20px\"\r\n              class=\"time-sheet-row\" *ngFor=\"let item of assignment.timesheetByActivity\">\r\n              <div fxFlex=\"15%\" class=\"left-label\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n                <mat-icon class=\"material-icons-outlined\" color=\"primary\" *ngIf=\"isVisible()\" (click)=\"removeActivity(item?.id, assignment)\">remove_circle\r\n                </mat-icon>\r\n                <span class=\"left-label-2\">{{ item?.name }}</span>\r\n              </div>\r\n              <div formGroupName=\"{{item?.id}}\" fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n                <mat-form-field fxFlex=\"12%\" appearance=\"outline\" *ngFor=\"let path of dayOfWeeks\" class=\"time-input\">\r\n                  <input matInput [formControlName]=\"path\" [readonly]=\"!isAttestedCheckValue?assignment.isSelfAttestedSchool:false\" (ngModelChange)=\"updateHours($event, item?.id, path, assignment)\" />\r\n                  <mat-error *ngIf=\"!!getErrorMessage(item?.id, path, assignment)\">{{ getErrorMessage(item?.id, path,\r\n                    assignment)\r\n                    }}</mat-error>\r\n                </mat-form-field>\r\n                <span fxFlex=\"12%\" class=\"time-label\">{{ getSum(item) }}</span>\r\n              </div>\r\n            </form>\r\n          </ng-container>\r\n\r\n          <!--Total-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"15%\" class=\"left-label\" [ngClass]=\"{ 'total': isVisible() }\"><span class=\"left-label-2\">Daily\r\n                Total</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\r\n              <div fxFlex=\"12%\" *ngFor=\"let path of dayOfWeeks\" class=\"time-label\">{{ assignment?.dailyTotal[path] }}</div>\r\n              <div fxFlex=\"12%\" class=\"time-label\">{{ getTotalSum( assignment ) }}</div>\r\n            </div>\r\n          </div>\r\n          <!--Carfare-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\"><span>Carfare</span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.carfareFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.carfareModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"item?.isDisable\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option [value]=\"defaultCarfareOption\">N/A</mat-option>\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n          <!--Assignment Mode-->\r\n          <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"time-sheet-row border-top\" fxLayoutGap=\"20px\">\r\n            <div fxFlex=\"20%\" class=\"left-label total\">\r\n              <span>Assignment Mode\r\n                <span class=\"prutech-dynamic-button-mandatory\">*</span>\r\n              </span>\r\n            </div>\r\n            <div fxFlex=\"80%\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" [formGroup]=\"assignment.assignmentModeFormGroup\">\r\n              <mat-form-field appearance=\"outline\" fxFlex=\"12%\" *ngFor=\"let item of assignment.assignmentModeModels; let index=index;\"\r\n                class=\"time-input\">\r\n                <mat-select [disabled]=\"item?.isDisable ||!isAttestedCheckValue?assignment.isSelfAttestedSchool:false\" [formControlName]=\"item?.dayOfWeek\">\r\n                  <mat-option *ngFor=\"let option of item?.options\" [value]=\"option\">\r\n                    {{ option.displayValue }}\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n              <div fxFlex=\"12%\" class=\"time-label\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"time-sheet-comment\">\r\n    <div *ngIf=\"showDcMessage()\" class=\"warning-text\">\r\n      <span>{{ this.getDcMessage() }}</span>\r\n    </div>\r\n    <div *ngIf=\"isParticipantChangeOfStatus()\" class=\"warning-text\">\r\n      <span>{{ this.details?.programAlert?.pcsType?.displayValue }} PCS</span><br>\r\n      <span>Performed on {{ this.details?.programAlert?.submittedOn | date: 'MM/dd/yyyy'}}</span><br>\r\n      <span>Reason: {{ this.details?.programAlert?.reason?.displayValue }}</span><br>\r\n      <span class=\"comment\">{{ this.details?.programAlert?.comments }}</span>\r\n    </div>\r\n    <span>- All hours entered into SEAMS are subject to audit and require back up documentation, either thru separate\r\n      manual or electronic tracking which matches the hours submitted for each client. </span><br>\r\n    <span *ngIf=\"!!timeFrameMessage\">- Data Entry must be completed by {{ timeFrameMessage }}.</span>\r\n  </div>\r\n  <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"30px\">\r\n    <button mat-flat-button (click)=\"exit()\">EXIT</button>\r\n    <button mat-raised-button color=\"primary\" *ngIf=\"isVisible()&& (this.details.isDue ||this.details.isCurrent)\" (click)=\"validateAndSave()\" [disabled]=\"isFormInValid()\">SAVE\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"showDeficitHoursMessage\" class=\"save-warning\" fxLayoutAlign=\"center center\">\r\n    <mat-icon>error</mat-icon>\r\n    <span> Total weekly hours entered have a deficit subject to infraction. </span>\r\n  </div>\r\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TimeKeepingDetailsService }, { type: ParticipantChangeStatusService }, { type: i0.ChangeDetectorRef }, { type: i2$2.TabService }, { type: i1$2.Router }, { type: i5$1.UserService }, { type: i1$1.MatDialog }, { type: i7.FormBuilder }]; }, propDecorators: { isAttestedCheckValue: [{
                 type: Input
             }] } });