<div
  class="toast-main"
  [style.width]="width"
  [@slideAnimation]="{ value: animationState }"
  (@slideAnimation.done)="onSlideFinished($event)"
>
  <button class="absolute top-2 right-2 p-6 border-none bg-transparent" (click)="close()">
    <ui-icon icon="close" size="20px"></ui-icon>
  </button>
  <div class="toast-content flex flex-col justify-center items-center">
    <h1 class="text-card-sub font-bold text-center py-3 whitespace-pre-wrap">{{ data.title }}</h1>
    <ng-container *ngIf="data.text; else templateRef">
      <p class="block text-base overflow-y-hidden pb-3 text-center overflow-x-hidden">{{ data.text }}</p>
    </ng-container>
  </div>
</div>

<ng-template #templateRef>
  <ng-container *ngTemplateOutlet="data.template; context: data.templateContext"> </ng-container>
</ng-template>
