From 78e4429bcc3ea6e707097b3ba243072d5e3652ed Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Thu, 9 Jan 2020 19:18:01 +0300
Subject: [PATCH] feat(theme-shared): add toast-container component

related issue: #2537
---
 .../toast-container.component.html            | 11 +++++
 .../toast-container.component.scss            | 12 +++++
 .../toast-container.component.ts              | 46 +++++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
new file mode 100644
index 0000000000..c3529e99ff
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
@@ -0,0 +1,11 @@
+<div
+  class="toast-container"
+  [style.top]="top || 'auto'"
+  [style.right]="right || 'auto'"
+  [style.bottom]="bottom || 'auto'"
+  [style.left]="left || 'auto'"
+  [style.display]="toasts.length ? 'flex' : 'none'"
+  [@toastInOut]="toasts.length - 1 || 0"
+>
+  <abp-toast [toast]="toast" *ngFor="let toast of toasts; trackBy: trackByFunc"></abp-toast>
+</div>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss
new file mode 100644
index 0000000000..facbd8b838
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss
@@ -0,0 +1,12 @@
+.toast-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 350px;
+  min-height: 80px;
+  &.new-on-top {
+    flex-direction: column-reverse;
+  }
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts
new file mode 100644
index 0000000000..4c664bb5d2
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Toaster } from '../../models';
+import { toastInOut } from '../../animations';
+import { ToasterService } from '../../services/toaster.service';
+
+@Component({
+  selector: 'abp-toast-container',
+  templateUrl: './toast-container.component.html',
+  styleUrls: ['./toast-container.component.scss'],
+  animations: [toastInOut],
+})
+export class ToastContainerComponent implements OnInit {
+  toasts = [] as Toaster.Toast[];
+
+  @Input()
+  top: number;
+
+  @Input()
+  right: number;
+
+  @Input()
+  bottom: number;
+
+  @Input()
+  left: number;
+
+  @Input()
+  toastKey: string;
+
+  constructor(private toastService: ToasterService) {}
+
+  ngOnInit() {
+    this.toastService.toasts$.subscribe(toasts => {
+      this.toasts = this.toastKey
+        ? toasts.filter(t => {
+            return t.options && t.options.containerKey !== this.toastKey;
+          })
+        : toasts;
+    });
+  }
+
+  trackByFunc(index, toast) {
+    if (!toast) return null;
+    return toast.options.id;
+  }
+}