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

<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
  <div fxFlex="30" fxLayoutAlign="center start" class="modal-qr-code-container padding-gap-large ml-1" [ngClass]="{'display-none': showQRField === '' || screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
    <qr-code *ngIf="showQRField !== ''" [value]="showQRField" [size]="200" [errorCorrectionLevel]="'L'"></qr-code>
  </div>
  <div [fxFlex]="showQRField === '' || screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '100' : '70'">
    <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>
    <ng-container *ngIf="data.scrollable">
      <mat-card-content [perfectScrollbar] class="padding-gap-x-large" [ngClass]="{'h-40': data.scrollable}" #scrollContainer>
        <ng-container *ngTemplateOutlet="contentBlock"></ng-container>        
      </mat-card-content>
    </ng-container>
    <ng-container *ngIf="!data.scrollable">
      <mat-card-content class="padding-gap-x-large">
        <ng-container *ngTemplateOutlet="contentBlock"></ng-container>        
      </mat-card-content>
    </ng-container>
    <div *ngIf="data.scrollable && shouldScroll" fxLayout="row" fxLayoutAlign="start end" class="btn-sticky-container padding-gap-x-large">
      <button mat-mini-fab aria-label="Scroll" fxLayoutAlign="center center" (click)="onScroll()">
        <mat-icon *ngIf="scrollDirection === 'DOWN'" fxLayoutAlign="center center">arrow_downward</mat-icon>
        <mat-icon *ngIf="scrollDirection === 'UP'" fxLayoutAlign="center center">arrow_upward</mat-icon>
      </button>
    </div>
    <div fxLayout="row" fxLayoutAlign="end center" class="padding-gap-x-large padding-gap-bottom-large">
      <button *ngIf="(!showQRField || showQRField === '') && (showCopyName === '')" tabindex="1" autoFocus mat-button color="primary" type="submit" [mat-dialog-close]="false" default>OK</button>
      <button *ngIf="showCopyName !== ''" class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
      <button *ngIf="showCopyName !== ''" autoFocus mat-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showCopyField" (copied)="onCopyField($event)">Copy {{showCopyName}}</button>
      <button *ngIf="showQRField !== ''" class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-button color="primary" type="button" [mat-dialog-close]="false" default>Close</button>
      <button *ngIf="showQRField !== ''" autoFocus mat-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="showQRField" (copied)="onCopyField($event)">Copy {{showQRName}}</button>
    </div>
  </div>
</div>

<ng-template #contentBlock>
  <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)}">
      <qr-code *ngIf="showQRField !== ''" [value]="showQRField" [size]="200" [errorCorrectionLevel]="'L'"></qr-code>
    </div>
    <div fxLayout="column" fxFlex="100">
      <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-2">{{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 || obj.value === 0); 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" [innerHTML]="arrayObj"></span>
                  </ng-container>
                  <ng-container *ngSwitchCase="dataTypeEnum.DATE_TIME">{{(obj.value * 1000) | date:'dd/MMM/y HH:mm'}}</ng-container>
                  <ng-container *ngSwitchCase="dataTypeEnum.NUMBER">{{obj.value | number: obj.digitsInfo ? obj.digitsInfo : '1.0-3'}}</ng-container>
                  <ng-container *ngSwitchCase="dataTypeEnum.BOOLEAN">{{obj.value ? 'True' : 'False'}}</ng-container>
                  <ng-container *ngSwitchDefault>
                    <p fxLayout="row" *ngIf="data.openedBy === 'SWAP' && obj.key === 'state'; else noStyleBlock" [ngClass]="{'failed-status': obj.value === LoopStateEnum.FAILED}">
                      {{obj.value}}
                      <mat-icon *ngIf="obj.value === LoopStateEnum.FAILED" fxLayoutAlign="end end" class="icon-failed-status">info</mat-icon>
                    </p>
                    <ng-template #noStyleBlock>{{obj.value}}</ng-template>
                  </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>
</ng-template>