Email Composition Panel - Copy this Angular, Css Component to your project
<p tabPanel header="Email"> <form [formGroup]="emailForm" (ngSubmit)="sendEmail()" class="p fluid"> <! To (Recipient) > <div class="p field mb 3"> <label for="toEmail" class="font medium">To:</label> <div class="p inputgroup"> <span class="p inputgroup addon bg primary text white"> <i class="ri user 3 line"></i> </span> <input type="text" id="toEmail" class="p inputtext" [value]="feedbackInfo?.email" readonly /> </div> </div> <! CC > <div class="p field mb 3"> <label for="ccSelect" class="font medium">CC:</label> <ng select id="ccSelect" formControlName="cc" [items]="ccEmails" [closeOnSelect]="false" [clearSearchOnAdd]="true" [multiple]="true" bindLabel="name" bindValue="email" placeholder="Select CC users" [appendTo]="'body'"> </ng select> </div> <! Include Super Admin > <div class="d flex align items center justify content between mb 3"> <label for="includeSuperAdmin" class="font medium mb 0">Include Super Admin:</label> <p inputSwitch inputId="includeSuperAdmin" formControlName="includeSuperAdmin"></p inputSwitch> </div> <! Subject > <div class="p field mb 3"> <label for="subject" class="font medium">Subject:</label> <input id="subject" type="text" class="p inputtext w 100" formControlName="subject" placeholder="Enter subject..." /> </div> <! Message > <div class="p field mb 3"> <label for="message" class="font medium">Message:</label> <textarea id="message" pInputTextarea formControlName="message" rows="5" class="p inputtextarea w 100" placeholder="Type your message here..."></textarea> </div> <! Attachments Upload > <div class="p field mb 3"> <label class="font medium">Attachments:</label> <div class="d flex align items center gap 3"> <p button icon="ri upload cloud line" label="Upload" (click)="onFileInputClick1()" class="p button outlined p button secondary"> </p button> <input type="file" id="emailFileInput" (change)="onEmailFilesSelected($event)" multiple hidden /> </div> <! Preview selected files > <div *ngIf="emailAttachments?.length" class="mt 3 d flex flex wrap gap 2"> <div *ngFor="let file of emailAttachments; let i = index" class="attachment preview d flex align items center border rounded p 2 bg light" style="max width: 250px;"> <i class="ri file line fs 5 text primary"></i> <span class="mx 2 text truncate flex grow 1">{{ file.name }}</span> <button type="button" class="btn btn sm btn link text danger" (click)="removeEmailAttachment(i)"> <i class="ri close line fs 5"></i> </button> </div> </div> </div> <! Sender Info > <div class="p field mt 3"> <small class="text muted"> From: </small> </div> <! Send Button > <div class="text end mt 4"> <p button type="submit" label="Send" icon="ri send plane line" [disabled]="emailForm.invalid || isSending" [loading]="isSending" styleClass="p button success px 5 py 2"> </p button> </div> </form> </p tabPanel>
