Move to libs

libs/components/src/callout/callout.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+type CalloutTypes = "success" | "info" | "warning" | "danger";
+
+const defaultIcon: Record<CalloutTypes, string> = {
+  success: "bwi-check",
+  info: "bwi-info-circle",
+  warning: "bwi-exclamation-triangle",
+  danger: "bwi-error",
+};
+
+const defaultI18n: Partial<Record<CalloutTypes, string>> = {
+  warning: "warning",
+  danger: "error",
+};
+
+@Component({
+  selector: "bit-callout",
+  templateUrl: "callout.component.html",
+})
+export class CalloutComponent implements OnInit {
+  @Input() type: CalloutTypes = "info";
+  @Input() icon: string;
+  @Input() title: string;
+  @Input() useAlertRole = false;
+
+  constructor(private i18nService: I18nService) {}
+
+  ngOnInit() {
+    this.icon ??= defaultIcon[this.type];
+    if (this.title == null && defaultI18n[this.type] != null) {
+      this.title = this.i18nService.t(defaultI18n[this.type]);
+    }
+  }
+
+  get calloutClass() {
+    switch (this.type) {
+      case "danger":
+        return "tw-border-l-danger-500";
+      case "info":
+        return "tw-border-l-info-500";
+      case "success":
+        return "tw-border-l-success-500";
+      case "warning":
+        return "tw-border-l-warning-500";
+    }
+  }
+
+  get headerClass() {
+    switch (this.type) {
+      case "danger":
+        return "!tw-text-danger";
+      case "info":
+        return "!tw-text-info";
+      case "success":
+        return "!tw-text-success";
+      case "warning":
+        return "!tw-text-warning";
+    }
+  }
+}