[CL-18] toast component and service (#6490)

Update toast styles and new service to CL.

libs/components/src/toast/toast.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from "@angular/core";
+import { IndividualConfig, ToastrService } from "ngx-toastr";
+
+import type { ToastComponent } from "./toast.component";
+import { calculateToastTimeout } from "./utils";
+
+export type ToastOptions = {
+  /**
+   * The duration the toast will persist in milliseconds
+   **/
+  timeout?: number;
+} & Pick<ToastComponent, "message" | "variant" | "title">;
+
+/**
+ * Presents toast notifications
+ **/
+@Injectable({ providedIn: "root" })
+export class ToastService {
+  constructor(private toastrService: ToastrService) {}
+
+  showToast(options: ToastOptions) {
+    const toastrConfig: Partial<IndividualConfig> = {
+      payload: {
+        message: options.message,
+        variant: options.variant,
+        title: options.title,
+      },
+      timeOut:
+        options.timeout != null && options.timeout > 0
+          ? options.timeout
+          : calculateToastTimeout(options.message),
+    };
+
+    this.toastrService.show(null, options.title, toastrConfig);
+  }
+
+  /**
+   * @deprecated use `showToast` instead
+   *
+   * Converts options object from PlatformUtilsService
+   **/
+  _showToast(options: {
+    type: "error" | "success" | "warning" | "info";
+    title: string;
+    text: string | string[];
+    options?: {
+      timeout?: number;
+    };
+  }) {
+    this.showToast({
+      message: options.text,
+      variant: options.type,
+      title: options.title,
+      timeout: options.options?.timeout,
+    });
+  }
+}