refactor(theme-shared): change toast component and its style

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html

@@ -0,0 +1,16 @@
+<div class="toast" [ngClass]="severityClass" (click)="tap()">
+  <div class="toast-icon">
+    <i class="fa icon" [ngClass]="iconClass"></i>
+  </div>
+  <div class="toast-content">
+    <button class="close-button" (click)="close()" *ngIf="toast.options.closable">
+      <i class="fa fa-times"></i>
+    </button>
+    <div class="toast-title">
+      {{ toast.title | abpLocalization: messageLocalizationParams }}
+    </div>
+    <div class="toast-message">
+      {{ toast.message | abpLocalization: titleLocalizationParams }}
+    </div>
+  </div>
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss

@@ -0,0 +1,77 @@
+@mixin fillColor($background, $color) {
+  border: 2px solid $background;
+  background-color: $background;
+  color: $color;
+  box-shadow: 0 0 10px -5px rgba(#000, 0.4);
+  &:hover {
+    border: 2px solid darken($background, 5);
+    background-color: darken($background, 5);
+    box-shadow: 0 0 15px -5px rgba(#000, 0.4);
+  }
+}
+
+.toast {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  gap: 10px;
+  margin: 5px 0;
+  padding: 10px;
+  border-radius: 0px;
+  width: 350px;
+  @include fillColor(#f0f0f0, #000);
+  user-select: none;
+  box-shadow: 0 0 10px -5px rgba(#000, 0.4);
+  &.toast-success {
+    @include fillColor(#51a351, #fff);
+  }
+  &.toast-info {
+    @include fillColor(#2f96b4, #fff);
+  }
+  &.toast-warning {
+    @include fillColor(#f89406, #fff);
+  }
+  &.toast-error {
+    @include fillColor(#bd362f, #fff);
+  }
+  .toast-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+    }
+  }
+  .toast-content {
+    position: relative;
+    .close-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 5px 10px 5px 5px;
+      width: 25px;
+      height: 25px;
+      border: none;
+      border-radius: 50%;
+      background: transparent;
+      &:focus {
+        outline: none;
+      }
+      .close-icon {
+        width: 16px;
+        height: 16px;
+        stroke: #000;
+      }
+    }
+    .toast-title {
+      margin: 0;
+      padding: 0;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    .toast-message {
+    }
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts

@@ -1,26 +1,69 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Toaster } from '../../models';
+import { ToasterService } from '../../services/toaster.service';
+import { LocalizationService } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-toast',
-  // tslint:disable-next-line: component-max-inline-declarations
+  templateUrl: './toast.component.html',
-  template: `
+  styleUrls: ['./toast.component.scss'],
-    <p-toast position="bottom-right" key="abpToast" styleClass="abp-toast" [baseZIndex]="1000">
-      <ng-template let-message pTemplate="message">
-        <span
-          class="ui-toast-icon pi"
-          [ngClass]="{
-            'pi-info-circle': message.severity === 'info',
-            'pi-exclamation-triangle': message.severity === 'warn',
-            'pi-times': message.severity === 'error',
-            'pi-check': message.severity === 'success'
-          }"
-        ></span>
-        <div class="ui-toast-message-text-content">
-          <div class="ui-toast-summary">{{ message.summary | abpLocalization: message.titleLocalizationParams }}</div>
-          <div class="ui-toast-detail">{{ message.detail | abpLocalization: message.messageLocalizationParams }}</div>
-        </div>
-      </ng-template>
-    </p-toast>
-  `,
 })
-export class ToastComponent {}
+export class ToastComponent implements OnInit {
+  @Input()
+  toast: Toaster.Toast;
+
+  get severityClass(): string {
+    if (!this.toast || !this.toast.severity) return '';
+    return `toast-${this.toast.severity}`;
+  }
+
+  get iconClass(): string {
+    switch (this.toast.severity) {
+      case 'success':
+        return 'fa-check-circle';
+      case 'info':
+        return 'fa-info-circle';
+      case 'warning':
+        return 'fa-exclamation-triangle';
+      case 'error':
+        return 'fa-times-circle';
+      default:
+        return 'fa-exclamation-circle';
+    }
+  }
+
+  get titleLocalizationParams(): string {
+    return this.localizationService.instant(
+      this.toast.title,
+      ...this.toast.options.titleLocalizationParams,
+    );
+  }
+
+  get messageLocalizationParams() {
+    return this.localizationService.instant(
+      this.toast.message,
+      ...this.toast.options.messageLocalizationParams,
+    );
+  }
+
+  constructor(
+    private toastService: ToasterService,
+    private localizationService: LocalizationService,
+  ) {}
+
+  ngOnInit() {
+    if (this.toast.options && this.toast.options.sticky) return;
+    const timeout = this.toast.options.life || 5000;
+    setTimeout(() => {
+      this.close();
+    }, timeout);
+  }
+
+  close() {
+    this.toastService.remove(this.toast.options.id);
+  }
+
+  tap() {
+    if (this.toast.options && this.toast.options.tapToDismiss) this.close();
+  }
+}