Ride-The-Lightning-RTL/src/app/shared/components/data-modal/confirmation-message/confirmation-message.component.html

<div fxLayout="row">
  <div class="w-100">
    <mat-card-header [ngClass]="msgTypeBackground" fxLayoutAlign="end">
      <h2 fxFlex="91">{{data.type}}</h2>
      <mat-icon autoFocus fxFlex="3" fxLayoutAlign="end" type="button" (click)="onClose(false)" class="cursor-pointer" tabindex="1">close</mat-icon>
    </mat-card-header>
    <mat-card-content>
      <div class="pb-2 p-2 wrap-text new-line">
        <h4 *ngIf="data.titleMessage" fxLayoutAlign="start center" class="title-message pb-1 pl-1">{{data.titleMessage | titlecase}}</h4>
        <div *ngIf="flgShowInput" fxLayoutAlign="start center">
          <mat-form-field class="pl-2" *ngFor="let getInput of getInputs; index as i">
            <input matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [type]="getInput.inputType" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
          </mat-form-field>
        </div>
        <div *ngIf="messageObj?.length>0">
          <div *ngFor="let obj of messageObj" fxLayout="row" fxLayoutAlign="center flex-start">
            <div fxFlex="20">{{obj[0] | titlecase}}</div>
            <div fxFlex="2">:</div>
            <div fxFlex="75">
              <div *ngIf="isNumber(obj[1], obj[0]);else notNumberTemplate">
                <span>{{obj[1] | number:'1.0-3'}}</span>
              </div>
              <ng-template #notNumberTemplate>
                <span>{{obj[1]}}</span>
              </ng-template>
              <fa-icon *ngIf="showCopyOption(obj[0])" rtlClipboard [payload]="obj[1]" (copied)="copiedText($event)" [icon]="faCopy"></fa-icon>
              <span *ngIf="showCopyOption(obj[0])" [hidden]="!flgCopied">Copied</span>
            </div>
          </div>
        </div>
      </div>
      <mat-divider class="pb-1"></mat-divider>
      <div fxLayoutAlign="center">
        <button mat-stroked-button color="primary" fxFlex="20" type="button" fxLayoutAlign="center center" class="mr-2" (click)="onClose(false)" tabindex="2" default>{{noBtnText}}</button>
        <button *ngIf="flgShowInput" mat-raised-button [color]="msgTypeForeground" fxLayoutAlign="center center" fxFlex="20" type="button" tabindex="3" (click)="onClose(getInputs)" [disabled]="!getInputs[0].inputValue">{{yesBtnText}}</button>
        <button *ngIf="!flgShowInput" mat-raised-button [color]="msgTypeForeground" fxLayoutAlign="center center" fxFlex="20" type="button" tabindex="4" (click)="onClose(true)">{{yesBtnText}}</button>          
      </div>
    </mat-card-content>
  </div>
</div>