From 06d8aeb76e8cefbd5a2c3e2e112141f045f7814d Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Fri, 16 Nov 2018 18:41:52 +0530
Subject: [PATCH] user profile UI

---
 .../list-pd/add-pd/add-pd.component.html      | 545 +++++++++---------
 .../user-profile/user-profile-component.html  |  27 +-
 2 files changed, 286 insertions(+), 286 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html
index 6e2e4dda6..58a8e09a6 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html
@@ -1,293 +1,290 @@
 <mat-card>
-    <mat-card-content>
-        <form [formGroup]="_PDtriggerForm" (submit)="submitPdDetails(_PDtriggerForm.value,PDTriggerStatus)">
+        <mat-card-content>
+            <form [formGroup]="_PDtriggerForm" (submit)="submitPdDetails(_PDtriggerForm.value,PDTriggerStatus)">
+            
+                <mat-card-content>
+                        <div style="width: 100%;text-align:right;">
+                                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above"
+                                (click)="loadPdListCompoent(cancelStatus)"><mat-icon>close</mat-icon></button>                  
+                            </div>
+           <div fxLayout="row" fxLayoutWrap="wrap">
+              <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+                 <mat-card class="p-2">
+                    <h5>PD Details</h5>
+            
+                    <div fxLayout="column" fxLayoutAlign="start stretch">
+                       <!-- <mat-form-field style="width: 100%">
+                          <input matInput placeholder="First Name" type="text" name="name" required>
+                       </mat-form-field> -->
+                       <mat-form-field style="width: 100%">
+                        <mat-select placeholder="Lender Name" formControlName="fk_lender_id" (selectionChange)="getBillingDetails(pdMain.fk_lender_id.value)">
+                                <mat-option *ngFor="let LL of lenderList" [value]="LL.entity_id" >
+                                {{LL.full_name}}
+                                </mat-option>
+                        </mat-select>
+                        <!-- <mat-error *ngIf="pdMain.fk_lender_id.hasError('required')" class="mat-text-warn">Lender Name Required.</mat-error> -->
+    
+        </mat-form-field>
         
-            <mat-card-content>
-                    <div style="width: 100%;text-align:right;">
-                            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above"
-                            (click)="loadPdListCompoent(cancelStatus)"><mat-icon>close</mat-icon></button>                  
-                        </div>
-       <div fxLayout="row" fxLayoutWrap="wrap">
-          <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-             <mat-card class="p-2">
-                <h5>PD Details</h5>
-        
-                <div fxLayout="column" fxLayoutAlign="start stretch">
-                   <!-- <mat-form-field style="width: 100%">
-                      <input matInput placeholder="First Name" type="text" name="name" required>
-                   </mat-form-field> -->
-                   <mat-form-field style="width: 100%">
-                    <mat-select placeholder="Lender Name" formControlName="fk_lender_id" (selectionChange)="getBillingDetails(pdMain.fk_lender_id.value)">
-                            <mat-option *ngFor="let LL of lenderList" [value]="LL.entity_id" >
-                            {{LL.full_name}}
+           <mat-form-field style="width: 100%">
+                        <input matInput placeholder="Lender Applicant ID" formControlName="lender_applicant_id" type="text" required>
+                        <mat-error *ngIf="pdMain.lender_applicant_id.hasError('required')">Applicant ID Required</mat-error>
+                </mat-form-field>
+                <mat-form-field style="width: 100%">
+                    <mat-select  placeholder="Billing Address" formControlName="lender_billing">
+                            <mat-option *ngFor="let billL of billingList" [value]="billL.entity_billing_id" >
+                            {{billL.billing_name}}
                             </mat-option>
                     </mat-select>
-                    <!-- <mat-error *ngIf="pdMain.fk_lender_id.hasError('required')" class="mat-text-warn">Lender Name Required.</mat-error> -->
-
-    </mat-form-field>
-    
-       <mat-form-field style="width: 100%">
-                    <input matInput placeholder="Lender Applicant ID" formControlName="lender_applicant_id" type="text" required>
-                    <mat-error *ngIf="pdMain.lender_applicant_id.hasError('required')">Applicant ID Required</mat-error>
+                    <!-- <mat-error *ngIf="pdMain.lender_billing.hasError('required')">Billing Address Required</mat-error> -->
+            </mat-form-field>
+                <mat-form-field style="width: 100%">
+                    <input matInput placeholder="Contact Person" formControlName="lender_contact_person" type="text" required>
+                    <mat-error *ngIf="pdMain.lender_contact_person.hasError('required')">Contact Person Required</mat-error>
             </mat-form-field>
             <mat-form-field style="width: 100%">
-                <mat-select  placeholder="Billing Address" formControlName="lender_billing">
-                        <mat-option *ngFor="let billL of billingList" [value]="billL.entity_billing_id" >
-                        {{billL.billing_name}}
-                        </mat-option>
-                </mat-select>
-                <!-- <mat-error *ngIf="pdMain.lender_billing.hasError('required')">Billing Address Required</mat-error> -->
-        </mat-form-field>
-            <mat-form-field style="width: 100%">
-                <input matInput placeholder="Contact Person" formControlName="lender_contact_person" type="text" required>
-                <mat-error *ngIf="pdMain.lender_contact_person.hasError('required')">Contact Person Required</mat-error>
+                <input matInput placeholder="Contact Number" formControlName="lender_contact_mobile" type="text" required>
+                <mat-error *ngIf="pdMain.lender_contact_mobile.hasError('required')">Contact Number Required</mat-error>
+                <mat-error *ngIf="pdMain.lender_contact_mobile.hasError('pattern') || pdMain.lender_contact_mobile.hasError('maxlength') || pdMain.lender_contact_mobile.hasError('minlength')">Enter Valid Mobile Number. </mat-error>  
+    
         </mat-form-field>
         <mat-form-field style="width: 100%">
-            <input matInput placeholder="Contact Number" formControlName="lender_contact_mobile" type="text" required>
-            <mat-error *ngIf="pdMain.lender_contact_mobile.hasError('required')">Contact Number Required</mat-error>
-            <mat-error *ngIf="pdMain.lender_contact_mobile.hasError('pattern') || pdMain.lender_contact_mobile.hasError('maxlength') || pdMain.lender_contact_mobile.hasError('minlength')">Enter Valid Mobile Number. </mat-error>  
-
-    </mat-form-field>
-    <mat-form-field style="width: 100%">
-            <mat-select  placeholder="Product Name" formControlName="fk_product_id" (selectionChange)="getSubproductList(pdMain.fk_product_id.value)">
-                    <mat-option *ngFor="let PL of productList" [value]="PL.product_id" >
-                    {{PL.product_name}}
-                    </mat-option>
-            </mat-select>
-            <!-- <mat-error *ngIf="pdMain.fk_product_id.hasError('required')">Product Required.</mat-error> -->
-    </mat-form-field>
-
-    <mat-form-field style="width: 100%">
-
-                    <mat-select  placeholder="Sub product Name" formControlName="fk_subproduct_id">
-                            <mat-option *ngFor="let SPL of subProductList" [value]="SPL.subproduct_id" >
-                            {{SPL.subproduct_name}}
-                            </mat-option>
-
-                    </mat-select>
-                    <!-- <mat-error *ngIf="pdMain.fk_subproduct_id.hasError('required')">Sub Product Required.</mat-error> -->
-
-            </mat-form-field>   
-            <mat-form-field style="width: 100%">
-                <mat-select  placeholder="Customer Segment" formControlName="fk_customer_segment">
-                        <mat-option *ngFor="let CSL of customerSegmentList" [value]="CSL.customer_segment_id" >
-                {{CSL.customer_segment}}
+                <mat-select  placeholder="Product Name" formControlName="fk_product_id" (selectionChange)="getSubproductList(pdMain.fk_product_id.value)">
+                        <mat-option *ngFor="let PL of productList" [value]="PL.product_id" >
+                        {{PL.product_name}}
                         </mat-option>
                 </mat-select>
-                <!-- <mat-error *ngIf="pdMain.fk_customer_segment.hasError('required')">Customer Segment Required.</mat-error> -->
-            </mat-form-field>    
-            <mat-form-field style="width: 100%">
-                <mat-select  placeholder="PD Type" formControlName="fk_pd_type">
-                        <mat-option *ngFor="let PDL of pdTypeList" [value]="PDL.pd_type_id" >
-                        {{PDL.type_name}}
-                        </mat-option>
-
-                </mat-select>
-                <!-- <mat-error *ngIf="pdMain.fk_pd_type.hasError('required')">PD Type Required.</mat-error> -->
-
+                <!-- <mat-error *ngIf="pdMain.fk_product_id.hasError('required')">Product Required.</mat-error> -->
         </mat-form-field>
+    
         <mat-form-field style="width: 100%">
-                        <input matInput placeholder="Loan Amount" formControlName="loan_amount">
-                        <!-- <mat-error *ngIf="pdMain.loan_amount.hasError('required')">Amount Required.</mat-error> -->
-                        <mat-error *ngIf="pdMain.loan_amount.hasError('pattern')">Enter valid amount. </mat-error>  
-
-        </mat-form-field>
-        <mat-form-field style="width: 100%">
-          <textarea matInput placeholder="Address at which PD is to be done" formControlName="addressline1" oninput="this.value = this.value.toUpperCase()"></textarea>
-          <!-- <mat-error *ngIf="pdMain.addressline1.hasError('required')">Address1 required.</mat-error> -->
-                </mat-form-field>
-
-                <mat-form-field style="width: 100%">
-                    <textarea matInput placeholder="Address 2" formControlName="addressline2" oninput="this.value = this.value.toUpperCase()"></textarea>
-                </mat-form-field>
-
-                <mat-form-field style="width: 100%">
-                    <textarea matInput placeholder="Address 3" formControlName="addressline3" oninput="this.value = this.value.toUpperCase()"></textarea>
-                </mat-form-field>
-                <mat-form-field style="width: 100%;">
-                        <mat-select  placeholder="State" formControlName="fk_state" (selectionChange)="getCityList(pdMain.fk_state.value)">
-                            <mat-option *ngFor="let SL of stateList" [value]="SL.state_id">
-                                {{SL.state_name}}
-                            </mat-option>
-
-                        </mat-select>
-                        <!-- <mat-error *ngIf="pdMain.fk_state.hasError('required')">State Required.</mat-error> -->
-
-                </mat-form-field>
-                <mat-form-field style="width: 100%;">
-                            <mat-select  placeholder="City" formControlName="fk_city">
-`                                <mat-option *ngFor="let CL of cityList" [value]="CL.city_id">
-                                    {{CL.city_name}}
+    
+                        <mat-select  placeholder="Sub Product Name" formControlName="fk_subproduct_id">
+                                <mat-option *ngFor="let SPL of subProductList" [value]="SPL.subproduct_id" >
+                                {{SPL.subproduct_name}}
                                 </mat-option>
-
-                            </mat-select>
-                            <!-- <mat-error *ngIf="pdMain.fk_city.hasError('required')">City Required.</mat-error> -->
-                        </mat-form-field>
-                    
-
-                        <mat-form-field style="width: 100%;">
-                                <input matInput placeholder="Pincode" formControlName="pincode">
-                                <!-- <mat-error *ngIf="pdMain.pincode.hasError('required')">Pincode Required.</mat-error> -->
-                                <mat-error *ngIf="pdMain.pincode.hasError('pattern') || pdMain.pincode.hasError('maxlength') || pdMain.pincode.hasError('minlength')">Enter Valid Pincode. </mat-error>  
-
-                        </mat-form-field> 
-                        <mat-form-field style="width: 100%;">
-                            <textarea matInput placeholder="Remarks" formControlName="remarks"></textarea>
-                    </mat-form-field>
-						  <!-- <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" >
-							   <h4 mat-dialog-title style="width: 14%;margin-top: 0%;">Allocation</h4>
-								<div style="width: 20%;"> <mat-slide-toggle formControlName="allocation_type"
-															class="example-margin" id="type"
-															[(ngModel)]="allocationTypeCheck" (change)="changeAllocationType(allocationTypeCheck)"
-															checked="allocationTypeModel==1 ? false:allocationTypeModel==2 ? false:allocationTypeModel==3 ? true"> {{allocationLabel}}  
-														</mat-slide-toggle> </div>
-								<div style="width: 20%;">
-									<mat-slide-toggle *ngIf="allocationTypeModel==1 || allocationTypeModel==2" formControlName="sub_allocation_type"
-															class="example-margin" id="subType"
-															[(ngModel)]="subAllocationTypeCheck" (change)="changeSubAllocationType(subAllocationTypeCheck)" 
-															checked="allocationTypeModel==1 ? false:allocationTypeModel==2 ? true"> {{subAllocationLabel}} 
-														</mat-slide-toggle>
-									</div>
-                                    </div> -->
-						 
-                </div>
-             </mat-card>
-          </div>
-        </div>
-        <div fxLayout="row" fxLayoutWrap="wrap">
-          <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-             <mat-card class="p-2">
-                <h5>Main Applicant</h5>
-      
-               
+    
+                        </mat-select>
+                        <!-- <mat-error *ngIf="pdMain.fk_subproduct_id.hasError('required')">Sub Product Required.</mat-error> -->
+    
+                </mat-form-field>   
                 <mat-form-field style="width: 100%">
-                                <input matInput placeholder="Name" formControlName="applicant_name">
-                                <mat-error *ngIf="pdMain.applicant_name.hasError('required')">Name is Required.</mat-error>
-
-                            </mat-form-field>   
-                            <mat-form-field style="width: 100%">
-                                <input matInput placeholder="Phone" formControlName="mobile_no" type="text">
-                                <!-- <mat-error *ngIf="pdMain.mobile_no.hasError('required')">Mobile Required.</mat-error> -->
-                                <mat-error *ngIf="pdMain.mobile_no.hasError('pattern') || pdMain.mobile_no.hasError('maxlength') || pdMain.mobile_no.hasError('minlength')">Enter Valid Mobile Number. </mat-error>  
-
-                </mat-form-field>
-              
-                            <mat-form-field style="width: 100%">
-                                <input matInput placeholder="Email" formControlName="email" type="email">
-                                <!-- <mat-error *ngIf="pdMain.email.hasError('required')">Email Required.</mat-error> -->
-
-                </mat-form-field>
-                
-                
-             </mat-card>
-          </div>
-        </div>
-        <div fxLayout="row" fxLayoutWrap="wrap" formArrayName="items" *ngFor="let coDetails of pdCoApplicant.controls; let i = index;">
-		
-            <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-                 
-                  <mat-card class="p-2">
-                     <h5>{{coDetails.controls.label.value}} {{i+1}}</h5>
-        
-                     <div [formGroupName]="i">
-                          <mat-form-field style="width: 100%">
-                                  <input matInput placeholder="Name" formControlName="coapplicantName" type="text" required>
-                              </mat-form-field>
-                              <mat-form-field style="width: 100%">
-                                <input matInput placeholder="Phone" formControlName="coapplicant_mobile_no" type="text">
-                                <mat-error *ngIf="coDetails['controls'].coapplicant_mobile_no.hasError('pattern') || coDetails['controls'].coapplicant_mobile_no.hasError('maxlength') || coDetails['controls'].coapplicant_mobile_no.hasError('minlength')">Enter Valid Mobile Number. </mat-error>  
-
-
-                </mat-form-field>
-                
-                              <mat-form-field style="width: 100%">
-
-                                  <mat-select  placeholder="Relationship" formControlName="relationship">
-                                    <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
-                                    {{rel.name}}
-                                    </mat-option>
+                    <mat-select  placeholder="Customer Segment" formControlName="fk_customer_segment">
+                            <mat-option *ngFor="let CSL of customerSegmentList" [value]="CSL.customer_segment_id" >
+                    {{CSL.customer_segment}}
+                            </mat-option>
+                    </mat-select>
+                    <!-- <mat-error *ngIf="pdMain.fk_customer_segment.hasError('required')">Customer Segment Required.</mat-error> -->
+                </mat-form-field>    
+                <mat-form-field style="width: 100%">
+                    <mat-select  placeholder="PD Type" formControlName="fk_pd_type">
+                            <mat-option *ngFor="let PDL of pdTypeList" [value]="PDL.pd_type_id" >
+                            {{PDL.type_name}}
+                            </mat-option>
+    
+                    </mat-select>
+                    <!-- <mat-error *ngIf="pdMain.fk_pd_type.hasError('required')">PD Type Required.</mat-error> -->
+    
+            </mat-form-field>
+            <mat-form-field style="width: 100%">
+                            <input matInput placeholder="Loan Amount" formControlName="loan_amount">
+                            <!-- <mat-error *ngIf="pdMain.loan_amount.hasError('required')">Amount Required.</mat-error> -->
+                            <mat-error *ngIf="pdMain.loan_amount.hasError('pattern')">Enter valid amount. </mat-error>  
+    
+            </mat-form-field>
+            <mat-form-field style="width: 100%">
+              <textarea matInput placeholder="Address at which PD is to be done" formControlName="addressline1" oninput="this.value = this.value.toUpperCase()"></textarea>
+              <!-- <mat-error *ngIf="pdMain.addressline1.hasError('required')">Address1 required.</mat-error> -->
+                    </mat-form-field>
+    
+                    <mat-form-field style="width: 100%">
+                        <textarea matInput placeholder="Address 2" formControlName="addressline2" oninput="this.value = this.value.toUpperCase()"></textarea>
+                    </mat-form-field>
+    
+                    <mat-form-field style="width: 100%">
+                        <textarea matInput placeholder="Address 3" formControlName="addressline3" oninput="this.value = this.value.toUpperCase()"></textarea>
+                    </mat-form-field>
+                    <mat-form-field style="width: 100%;">
+                            <mat-select  placeholder="State" formControlName="fk_state" (selectionChange)="getCityList(pdMain.fk_state.value)">
+                                <mat-option *ngFor="let SL of stateList" [value]="SL.state_id">
+                                    {{SL.state_name}}
+                                </mat-option>
+    
                             </mat-select>
+                            <!-- <mat-error *ngIf="pdMain.fk_state.hasError('required')">State Required.</mat-error> -->
+    
+                    </mat-form-field>
+                    <mat-form-field style="width: 100%;">
+                                <mat-select  placeholder="City" formControlName="fk_city">
+    `                                <mat-option *ngFor="let CL of cityList" [value]="CL.city_id">
+                                        {{CL.city_name}}
+                                    </mat-option>
+    
+                                </mat-select>
+                                <!-- <mat-error *ngIf="pdMain.fk_city.hasError('required')">City Required.</mat-error> -->
+                            </mat-form-field>
+                        
+    
+                            <mat-form-field style="width: 100%;">
+                                    <input matInput placeholder="Pincode" formControlName="pincode">
+                                    <!-- <mat-error *ngIf="pdMain.pincode.hasError('required')">Pincode Required.</mat-error> -->
+                                    <mat-error *ngIf="pdMain.pincode.hasError('pattern') || pdMain.pincode.hasError('maxlength') || pdMain.pincode.hasError('minlength')">Enter Valid Pincode. </mat-error>  
+    
+                            </mat-form-field> 
+                            <mat-form-field style="width: 100%;">
+                                <textarea matInput placeholder="Remarks" formControlName="remarks"></textarea>
                         </mat-form-field>
-
-                                  <div style="width:20%">
-                                    <span (click)="removeCoApplicant(i)">
-                                     <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                                   </span>
-                                  </div>
-                        </div>
-                  </mat-card>
-               </div>
-               </div>
-               <div fxLayout="row" fxLayoutWrap="wrap">
-					
-            <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-                  <mat-card class="p-2" style="opacity: 0.5;">
-				  <h5>Co-Applicant</h5>
-                          <!-- <button _ngcontent-c29="" class="mr-1 mb-2 mat-fab1 mat-accent" mat-fab="" (click)="addCoApplicant(createWithLongContent)"><span class="mat-button-wrapper"><mat-icon _ngcontent-c29="" class="mat-icon material-icons" role="img" aria-hidden="true">add</mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button> -->
-                                      <!--<button mat-fab class="mr-1 mb-1" color="primary" (click)="addCoApplicant()"><mat-icon>add</mat-icon></button>-->
-					   <button  mat-fab class="mr-1 mb-1"  color="primary" style="opacity: 0.5;border:2px;border-radius: 50%;" (click)="addCoApplicant()"><mat-icon>group_add</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button> 
-                          <!-- <button mat-raised-button mat-button-sm color="primary" (click)="addCoApplicant()" type="button">Add More Co-Applicant</button> -->
-        
-                       </mat-card>
-          </div>
-         </div>
-         <div fxLayout="row" fxLayoutWrap="wrap">
+                              <!-- <div class="ml-xs mr-xs" style="width: 100%;" fxLayout="row" >
+                                   <h4 mat-dialog-title style="width: 14%;margin-top: 0%;">Allocation</h4>
+                                    <div style="width: 20%;"> <mat-slide-toggle formControlName="allocation_type"
+                                                                class="example-margin" id="type"
+                                                                [(ngModel)]="allocationTypeCheck" (change)="changeAllocationType(allocationTypeCheck)"
+                                                                checked="allocationTypeModel==1 ? false:allocationTypeModel==2 ? false:allocationTypeModel==3 ? true"> {{allocationLabel}}  
+                                                            </mat-slide-toggle> </div>
+                                    <div style="width: 20%;">
+                                        <mat-slide-toggle *ngIf="allocationTypeModel==1 || allocationTypeModel==2" formControlName="sub_allocation_type"
+                                                                class="example-margin" id="subType"
+                                                                [(ngModel)]="subAllocationTypeCheck" (change)="changeSubAllocationType(subAllocationTypeCheck)" 
+                                                                checked="allocationTypeModel==1 ? false:allocationTypeModel==2 ? true"> {{subAllocationLabel}} 
+                                                            </mat-slide-toggle>
+                                        </div>
+                                        </div> -->
+                             
+                    </div>
+                 </mat-card>
+              </div>
+            </div>
+            <div fxLayout="row" fxLayoutWrap="wrap">
+              <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+                 <mat-card class="p-2">
+                    <h5>Main Applicant</h5>
+          
+                   
+                    <mat-form-field style="width: 100%">
+                                    <input matInput placeholder="Name" formControlName="applicant_name">
+                                    <mat-error *ngIf="pdMain.applicant_name.hasError('required')">Name is Required.</mat-error>
+    
+                                </mat-form-field>   
+                                <mat-form-field style="width: 100%">
+                                    <input matInput placeholder="Phone" formControlName="mobile_no" type="text">
+                                    <!-- <mat-error *ngIf="pdMain.mobile_no.hasError('required')">Mobile Required.</mat-error> -->
+                                    <mat-error *ngIf="pdMain.mobile_no.hasError('pattern') || pdMain.mobile_no.hasError('maxlength') || pdMain.mobile_no.hasError('minlength')">Enter Valid Mobile Number. </mat-error>  
+    
+                    </mat-form-field>
+                  
+                                <mat-form-field style="width: 100%">
+                                    <input matInput placeholder="Email" formControlName="email" type="email">
+                                    <!-- <mat-error *ngIf="pdMain.email.hasError('required')">Email Required.</mat-error> -->
+    
+                    </mat-form-field>
+                    
+                    
+                 </mat-card>
+              </div>
+            </div>
+            <div fxLayout="row" fxLayoutWrap="wrap" formArrayName="items" *ngFor="let coDetails of pdCoApplicant.controls; let i = index;">
+            
+                <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+                     
+                      <mat-card class="p-2">
+                         <h5>{{coDetails.controls.label.value}} {{i+1}}</h5>
+            
+                         <div [formGroupName]="i">
+                              <mat-form-field style="width: 100%">
+                                      <input matInput placeholder="Name" formControlName="coapplicantName" type="text" required>
+                                  </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                    <input matInput placeholder="Phone" formControlName="coapplicant_mobile_no" type="text">
+                                    <mat-error *ngIf="coDetails['controls'].coapplicant_mobile_no.hasError('pattern') || coDetails['controls'].coapplicant_mobile_no.hasError('maxlength') || coDetails['controls'].coapplicant_mobile_no.hasError('minlength')">Enter Valid Mobile Number. </mat-error>  
+    
+    
+                    </mat-form-field>
+                    
+                                  <mat-form-field style="width: 100%">
+    
+                                      <mat-select  placeholder="Relationship" formControlName="relationship">
+                                        <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
+                                        {{rel.name}}
+                                        </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+    
+                                      <div style="width:20%">
+                                        <span (click)="removeCoApplicant(i)">
+                                         <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                       </span>
+                                      </div>
+                            </div>
+                      </mat-card>
+                   </div>
+                   </div>
+                   <div fxLayout="row" fxLayoutWrap="wrap">
+                        
+                <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+                      <mat-card class="p-2">
+                      <h5>Co-Applicant</h5>
+                              <!-- <button _ngcontent-c29="" class="mr-1 mb-2 mat-fab1 mat-accent" mat-fab="" (click)="addCoApplicant(createWithLongContent)"><span class="mat-button-wrapper"><mat-icon _ngcontent-c29="" class="mat-icon material-icons" role="img" aria-hidden="true">add</mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button> -->
+                                          <!--<button mat-fab class="mr-1 mb-1" color="primary" (click)="addCoApplicant()"><mat-icon>add</mat-icon></button>-->
+                           <button  mat-fab class="mr-1 mb-1"  color="primary" matTooltip="Add Co-Applicant" matTooltipPosition="above" style="opacity: 0.8;border:2px;border-radius: 50%;" (click)="addCoApplicant()"><mat-icon>group_add</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button> 
+                              <!-- <button mat-raised-button mat-button-sm color="primary" (click)="addCoApplicant()" type="button">Add More Co-Applicant</button> -->
+            
+                           </mat-card>
+              </div>
+             </div>
+             <div fxLayout="row" fxLayoutWrap="wrap">
+                    
+                <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
                 
-            <div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
-            
-             <mat-card class="p-2" formArrayName="documents">
-			 <h5>Document</h5>
-                <mat-list>
-                    <mat-list-item>
-                <!-- <button mat-raised-button mat-button-sm color="primary"  type="button">Add Document</button> -->
-                <button mat-fab class="mr-1 mb-1"  color="primary" style="opacity: 0.5;" (click)="addMoreDocs()" class="mat-button-wrapper"><mat-icon>attach_file</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button>
-
-              </mat-list-item>
-              </mat-list>
-                            <mat-list *ngFor="let docList of documents.controls; let d = index;" [formGroupName]="d">
-                              <!-- <h3 mat-subheader>Upload Documents</h3> -->
-                              <mat-list-item>
-                                            <mat-form-field style="width: 100%">
-                                                            <input matInput placeholder="Document Name" formControlName="doc_name" type="text">
-                                                        </mat-form-field>
-
-                              </mat-list-item>
-                              <mat-list-item>
-                                            <input type="file" title="Browse Document" (change)="fileSelectionEvent($event,d)" formControlName="documentFile">
-                              </mat-list-item>
-                              <mat-list-item>
-                                  <!-- <button mat-button color="accent" (click)="removeItem(d)" type="button">Remove</button> -->
-                                  <div style="width:20%">
-                                    <span (click)="removeItem(d)">
-                                     <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                                   </span>
-                                  </div>
-                                </mat-list-item>
-                            </mat-list>
-                          </mat-card>
-                          </div>
-                          </div>
+                 <mat-card class="p-2" formArrayName="documents">
+                 <h5>Document</h5>
+                    <mat-list>
+                        <mat-list-item>
+                    <!-- <button mat-raised-button mat-button-sm color="primary"  type="button">Add Document</button> -->
+                    <button mat-fab matTooltip="Add Document" matTooltipPosition="above" class="mr-1 mb-1"  color="primary"   (click)="addMoreDocs()" class="mat-button-wrapper"><mat-icon>attach_file</mat-icon><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button>
+    
+                  </mat-list-item><br>
+                  </mat-list>
+                                <mat-list *ngFor="let docList of documents.controls; let d = index;" [formGroupName]="d">
+                                  <!-- <h3 mat-subheader>Upload Documents</h3> -->
+                                  <mat-list-item>
+                                                <mat-form-field style="width: 50%">
+                                                                <input matInput placeholder="Document Name" formControlName="doc_name" type="text">
+                                                            </mat-form-field>
+    
+                                                            
+                                                            <div style="width:50%">
+                                                                    <input type="file" title="Browse Document" (change)="fileSelectionEvent($event,d)" formControlName="documentFile">
                                   
-       </mat-card-content>
-       <!-- <mat-card-actions style="text-align: right">
-            <button mat-button color="accent" type="button" (click)="loadPdListCompoent()">Cancel</button>
-
-                <button mat-button color="primary" type="submit" [disabled]="!PDtriggerForm.valid">Submit</button>
-        </mat-card-actions> -->
-
-        <mat-card-actions style="text-align: right">
-            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="button"
-                (click)="onReset()"><mat-icon>settings_backup_restore</mat-icon></button>
+                                                                    <span (click)="removeItem(d)">
+                                                                     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                                                                   </span>
+                                                                  </div>
+                                  </mat-list-item> 
+                                </mat-list>
+                              </mat-card>
+                              </div>
+                              </div>
+                                      
+           </mat-card-content>
+           <!-- <mat-card-actions style="text-align: right">
+                <button mat-button color="accent" type="button" (click)="loadPdListCompoent()">Cancel</button>
+    
+                    <button mat-button color="primary" type="submit" [disabled]="!PDtriggerForm.valid">Submit</button>
+            </mat-card-actions> -->
+    
+            <mat-card-actions style="text-align: right">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="button"
+                    (click)="onReset()"><mat-icon>settings_backup_restore</mat-icon></button>
+                
+                <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Click To Draft" matTooltipPosition="above" type="button" (click)="addCoApplicant()"><mat-icon>drafts</mat-icon></button> -->
+                <button  mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" (click)="submitPdDetails(_PDtriggerForm.value,draftStatus)" matTooltip="PD Draft" matTooltipPosition="above" type="button"><mat-icon>description</mat-icon></button> 
+    
+              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="PD Process" matTooltipPosition="above" [disabled]="!enablePDButton || !_PDtriggerForm.valid "><mat-icon>save</mat-icon></button>
+          </mat-card-actions>
+           </form>
+        </mat-card-content>
+    </mat-card>
             
-            <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Click To Draft" matTooltipPosition="above" type="button" (click)="addCoApplicant()"><mat-icon>drafts</mat-icon></button> -->
-            <button  mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" (click)="submitPdDetails(_PDtriggerForm.value,draftStatus)" matTooltip="PD Draft" matTooltipPosition="above" type="button"><mat-icon>description</mat-icon></button> 
-
-          <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="PD Process" matTooltipPosition="above" [disabled]="!enablePDButton || !_PDtriggerForm.valid "><mat-icon>save</mat-icon></button>
-      </mat-card-actions>
-       </form>
-    </mat-card-content>
-</mat-card>
-        
-     
-      
-                  
\ No newline at end of file
+         
+          
+                      
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/users/user-profile/user-profile-component.html b/ng6-seed/src/app/settings/users/user-profile/user-profile-component.html
index 4b0fc9fb6..d65d984fd 100755
--- a/ng6-seed/src/app/settings/users/user-profile/user-profile-component.html
+++ b/ng6-seed/src/app/settings/users/user-profile/user-profile-component.html
@@ -12,29 +12,32 @@
                    </div>
                     
                 </div> 
-                <div fxLayout="row wrap" fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
-                    <div fxFlex.gt-sm="50" fxFlex.gt-xs="50"  fxFlex="50" class="align-self-center pt-1"  >
+                <div style="width:100%;display: inline-flex;">
+                    <div style="width:65%" class="align-self-center pt-1"  >
                         <div fxLayout="row">
-                            <div class="pl-1 pr-1 profile-i" fxFlex.xs="85" fxFlex.sm="85" fxFlex.md="85" fxFlex.lg="85" fxFlex.xl="85">
+                            <div class="pl-1 pr-1 profile-i">
                               <p> {{userDetails.user_first_name}} {{userDetails.user_last_name}}</p>
-                              <p>{{userDetails.role_name}}</p>
-                              <p>  {{userDetails.email}}</p>  
-                              <p> {{userDetails.mobile_no}}</p> 
+                              <p>{{userDetails.role_name}}</p> 
                               <p> {{userDetails.city_name}} ,{{userDetails.state_name}} </p> 
                             </div>
                         </div> 
                      </div> 
-                   <div fxFlex.gt-sm="50" fxFlex.gt-xs="50"  fxFlex="50" class="align-self-center pt-1">
-                           <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button" (click)="changePassword()">
-                           <span class="button-text">Change Password</span>
+                   <div  style="width:35%" class="align-self-center pt-1">
+                        <div fxLayout="row">
+                          <p>  {{userDetails.email}}</p>
+                        <p> {{userDetails.mobile_no}}</p> 
+                        
+                           <button mat-raised-button mat-icon-button   type="button" matTooltip="Change Password" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" data-scribe-element="profile_edit_button" (click)="changePassword()">
+                           <mat-icon>https</mat-icon>
                            </button>
-                           <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button" (click)="editprofile()">
-                               <span class="button-text">Edit Profile</span>
+                           <button mat-raised-button mat-icon-button   type="button" matTooltip="Edit Profile" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" data-scribe-element="profile_edit_button" (click)="editprofile()">
+                               <mat-icon>edit</mat-icon>
                            </button>
+                           </div>
                        </div> 
                      
                 </div>
-                
+             
              </div> 
        </div>
   </mat-card-content>