styling update

src/app/annual-health-checkup/annual-health-checkup.component.html

@@ -2,7 +2,7 @@
     <main class="main-container">
         <section class="content">
             <div class="card">
-                <p>Employees who have attained the age of 40 years by 1st April 2022 will be covered under the Annual Health Check-up.</p>
+                <!-- <p>Employees who have attained the age of 40 years by 1st April 2022 will be covered under the Annual Health Check-up.</p> -->
                 <ul>
                     <li class="sub-card" (click)="selectedItem('generateLetter')">
                         <img class="icon" src="assets/images/generateLetter_thumb.png" />

src/app/annual-health-checkup/annual-health-checkup.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import {MatSnackBar, MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,} from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-annual-health-checkup',
@@ -7,17 +9,27 @@ import { Router } from '@angular/router';
   styleUrls: ['./annual-health-checkup.component.scss']
 })
 export class AnnualHealthCheckupComponent implements OnInit {
+  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(private router:Router) { }
+  constructor(private router:Router, private _snackBar: MatSnackBar) {
+    
+   }
 
   ngOnInit(): void {
+    this._snackBar.open('Employees who have attained the age of 40 years by 1st April 2022 will be covered under the Annual Health Check-up.', '',{
+        horizontalPosition: this.horizontalPosition,
+      verticalPosition: this.verticalPosition,
+
+      });
   }
 
   selectedItem(item:string):void{
+    this._snackBar.dismiss();
     if(item === 'generateLetter'){
-      this.router.navigate(['generateLetter'])
+      this.router.navigate(['generateLetter']);
     }else{
-      this.router.navigate(['scheduleAppointment'])
+      this.router.navigate(['scheduleAppointment']);
     }
     
   }

src/app/annual-health-checkup/generate-letter/generate-letter.component.html

@@ -1,4 +1,4 @@
-<div class="page-container" id="generateLetter">
+<div class="page-container" id="generateLetter" [ngClass]="printPDF ? 'downloadStatus' : ''">
     <form
       id="create-enquiry-form"
       class="create-enquiry-form"
@@ -541,7 +541,8 @@
                </div>
                <div class="align-middle flex-row">
                 <button mat-raised-button color="primary" (click)="sendMail()">Mail</button>
-                <button mat-raised-button color="primary" (click)="downloadPDF()">Download</button>
+                <button mat-raised-button color="primary" (click)="cancelClick()">Cancel</button>
+                <!-- downloadPDF -->
             </div>
             </div>
             

src/app/annual-health-checkup/generate-letter/generate-letter.component.scss

@@ -35,4 +35,13 @@
     left:5%;
     background: white !important;
   }
+  .table{
+    width: 100%;
+    table-layout:fixed;
+    word-break: break-all;
+    font-size: 0.688 rem;
+  }
+}
+.downloadStatus{
+  background: white !important;
 }

src/app/annual-health-checkup/generate-letter/generate-letter.component.ts

@@ -20,6 +20,7 @@ export class GenerateLetterComponent implements OnInit {
   letterDate: string = "";
   printPDF: boolean = false;
   level: string = "";
+  downloadStatus:any = '';
 
   @ViewChild("pdfTable", { static: false }) pdfTable: ElementRef | undefined;
 
@@ -154,6 +155,8 @@ export class GenerateLetterComponent implements OnInit {
    */
   createEnquirySubmitHandler() {
     this.printPDF = true;
+    this.downloadStatus = 'downloadStatus';
+
     if (this.level === "L3") {
       this.downloadPDFlevel3 = true;
     } else {
@@ -161,6 +164,16 @@ export class GenerateLetterComponent implements OnInit {
     }
   }
 
+  /**
+   * @description to cancel PDF
+   * @returns Void();
+   */
+  cancelClick(){
+    this.printPDF = false;
+    this.downloadPDFlevel3 = false;
+    this.downloadPDFlevel0 = false;
+  } 
+
   /**
    * @description to create the user details.
    * @returns Void();

src/app/annual-health-checkup/schedule-appointment/schedule-appointment.component.html

@@ -37,7 +37,7 @@
   <div class="align-middle">
       <mat-form-field class="input-field" appearance="fill">
           <mat-label>Select additonal Test</mat-label>
-          <mat-select (selectionChange)="selectedAdditonalTest($event)">
+          <mat-select (selectionChange)="selectedAdditonalTest($event)" multiple>
             <mat-option *ngFor="let healthTest of additionalTests" [value]="healthTest">
               {{healthTest}}
             </mat-option>