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

<div perfectScrollbar fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
  <div fxFlex="30" fxLayoutAlign="center start" class="modal-qr-code-container padding-gap-large" [ngClass]="{'display-none': showQRField === '' || screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
    <qrcode [qrdata]="showQRField" [size]="210" [level]="'L'" [allowEmptyString]="true" class="qr-border"></qrcode>
  </div>
  <div [fxFlex]="showQRField === '' || screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '100' : '70'" class="padding-gap-large pl-3">
    <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="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
    </mat-card-header>
    <mat-card-content class="mt-5px mb-0 pr-2">
      <div fxLayout="column">
        <div fxFlex="50" fxLayoutAlign="center start" class="modal-qr-code-container padding-gap-large mb-1" [ngClass]="{'display-none': showQRField === '' || (screenSize !== screenSizeEnum.XS && screenSize !== screenSizeEnum.SM)}">
          <qrcode [qrdata]="showQRField" [size]="210" [level]="'L'" [allowEmptyString]="true" class="qr-border"></qrcode>
        </div>
        <div fxLayout="row" fxFlex="100">
          <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
          <div *ngIf="messageObjs?.length>0" fxFlex="100">
            <div *ngFor="let objs of messageObjs; index as i;">
              <div fxLayout="row wrap" fxFlex="100" 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" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
                      <ng-container *ngSwitchCase="dataTypeEnum.ARRAY"><span *ngFor="let arrayObj of obj.value" class="display-block w-100">{{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' : '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>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button *ngIf="(!showQRField || showQRField == '') && (showCopyName === '')" fxFlex="20" fxLayoutAlign="center center" tabindex="1" autoFocus mat-raised-button color="primary" type="submit" [mat-dialog-close]="false" default>OK</button>
          <button *ngIf="showCopyName !== ''" fxFlex="20" class="mr-2" fxLayoutAlign="center center" tabindex="1" mat-stroked-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
          <button *ngIf="showCopyName !== ''" fxFlex="30" fxLayoutAlign="center center" autoFocus mat-raised-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showCopyField" (copied)="onCopyField($event)">Copy {{showCopyName}}</button>
          <button *ngIf="showQRField !== ''" fxFlex="20" class="mr-2" fxLayoutAlign="center center" tabindex="1" class="mr-2" mat-stroked-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
          <button *ngIf="showQRField !== ''" fxFlex="30" fxLayoutAlign="center center" autoFocus mat-raised-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showQRField" (copied)="onCopyField($event)">Copy {{showQRName}}</button>
        </div>
      </div>
    </mat-card-content>
  </div>
</div>