dspace-angular/src/app/shared/notifications/notification/notification.component.html

<div class="notification alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
  [@enterLeave]="animate">

  @if (showProgressBar) {
    <div class="notification-progress-loader position-absolute w-100">
      <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-start"></span>
    </div>
  }

  @if (notification.options.clickToClose) {
    <button
      (click)="remove()"
      type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-bs-dismiss="alert" aria-label="Close">
    </button>
  }


  <div class="d-flex flex-row">
    <div class="d-flex flex-column justify-content-center align-items-center">
      <div class="notification-icon d-flex justify-content-center"><i
        [ngClass]="{'fas fa-2x': true,
      'fa-check-circle': notification.type === 'alert-success',
      'fa-times-circle': notification.type === 'alert-danger',
      'fa-exclamation-triangle': notification.type === 'alert-warning',
      'fa-info-circle': notification.type === 'alert-info'
      }"></i></div>
    </div>
    <div class="d-flex flex-column justify-content-center align-content-stretch">
      @if (title) {
        <div class="p-2 me-3" >
          <strong>
            @if (titleIsTemplate) {
              <div class="notification-title ps-1">
                <ng-container *ngTemplateOutlet="title"></ng-container>
              </div>
            } @else {
              <div class="notification-title ps-1">{{(title | async)}}</div>
            }
          </strong>
        </div>
      }

      @if (content && !html) {
        <div class="p-2 me-3" >
          @if (contentIsTemplate) {
            <div class="notification-content ps-1">
              <ng-container *ngTemplateOutlet="content"></ng-container>
            </div>
          } @else {
            <div class="notification-content ps-1">{{(content | async)}}</div>
          }
        </div>
      }

      @if (content && html) {
        <div class="p-2 me-3">
          @if (contentIsTemplate) {
            <div class="notification-html ps-1">
              <ng-container *ngTemplateOutlet="content"></ng-container>
            </div>
          } @else {
            <div class="notification-html ps-1" [innerHTML]="content"></div>
          }
        </div>
      }
    </div>
  </div>


</div>