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

<div fxLayout="row">
  <div fxFlex="100" class="padding-gap-large">
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxFlex="95" fxLayoutAlign="start start">
        <span class="page-title">{{data.alertTitle || alertTypeEnum[data.type]}}</span>
      </div>
      <button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose(false)" mat-button>X</button>
    </mat-card-header>    
    <mat-card-content class="mt-5px">
      <form fxLayout="column">
        <p *ngIf="data.titleMessage && !flgShowInput" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
        <div *ngIf="messageObjs?.length>0">
          <div *ngFor="let objs of messageObjs; index as i;">
            <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.gt-md="space-between start">
              <div fxLayout="column" fxFlex="100" fxFlex.gt-md="{{obj.width}}" *ngFor="let obj of objs; index as j;">
                <h4 fxLayoutAlign="start" class="font-bold-500">{{obj.title}}</h4>
                <span *ngIf="obj && obj.value; else emptyField">
                  <span [ngSwitch]="obj.type" class="foreground-secondary-text">
                    <ng-container *ngSwitchCase="dataTypeEnum.ARRAY"><span *ngFor="let arrayObj of obj.value" class="display-block">{{arrayObj}}</span></ng-container>
                    <ng-container *ngSwitchCase="dataTypeEnum.NUMBER">{{obj.value | number:'1.0-3'}}</ng-container>
                    <ng-container *ngSwitchCase="dataTypeEnum.BOOLEAN">{{obj.value === true ? 'True' : 'False'}}</ng-container>
                    <ng-container *ngSwitchDefault>{{obj.value}}</ng-container>
                  </span>
                </span>
                <ng-template #emptyField>
                  <span fxFlex="100" class="foreground-secondary-text">&nbsp;</span>
                </ng-template>
                <mat-divider class="w-100 my-1"></mat-divider>
              </div>                
            </div>
          </div>
        </div>
        <div *ngIf="flgShowInput" fxLayout="column" class="bordered-box my-2 p-2">
          <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
          <div fxLayoutAlign="space-between center">
            <mat-form-field *ngFor="let getInput of getInputs; index as i" [fxFlex]="getInput.width">
              <input *ngIf="i === 0" autoFocus matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [step]="getInput.step" [type]="getInput.inputType | lowercase" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
              <input *ngIf="i !== 0" matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [step]="getInput.step" [type]="getInput.inputType | lowercase" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
              <mat-error *ngIf="!getInput.inputValue">{{getInput.placeholder}} is required.</mat-error>
            </mat-form-field>
          </div>        
        </div>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-stroked-button color="primary" type="reset" class="mr-1" (click)="onClose(false)" tabindex="2">{{noBtnText}}</button>
          <button autoFocus *ngIf="flgShowInput" mat-flat-button color="primary" type="submit" tabindex="3" (click)="onClose(getInputs)" default>{{yesBtnText}}</button>
          <button autoFocus *ngIf="!flgShowInput" mat-flat-button color="primary" type="submit" tabindex="4" (click)="onClose(true)" default>{{yesBtnText}}</button>
        </div>
      </form>
    </mat-card-content>
  </div>
</div>