add to git

app/elements/notification-bubbles/notification-bubble.less

@@ -0,0 +1,32 @@
+notification-bubble {
+    margin: 10px;
+    padding: 10px;
+    color: black;
+    background-color: #a0ffa7;
+    display: block;
+    position: relative;
+    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.19);
+    border-radius: 4px;
+}
+
+notification-bubble.log {
+    background-color: #ffffff;
+}
+
+notification-bubble.info {
+    background-color: #e7e7b3;
+}
+
+notification-bubble.warn {
+    background-color: #fff9a0;
+}
+
+notification-bubble.error {
+    background-color: #ffa0a0;
+}
+
+notification-bubble.syntax-error {
+    background-color: #ff6262;
+    font-size: 22px;
+    padding: 30px;
+}

app/elements/notification-bubbles/notification-bubble.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from "../_base";
+import './notification-bubble.less';
+
+export class NotificationBubble extends BaseElement {
+    onInit(): void {
+
+        if (!this.classList.contains("syntax-error")) {
+            setTimeout(() => {
+                this.parentElement?.removeChild(this);
+            }, 4000);
+        }
+    }
+}

app/elements/notification-bubbles/notification-bubbles.less

@@ -0,0 +1,8 @@
+notification-bubbles {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 9999;
+    width: 380px;
+}

app/elements/notification-bubbles/notification-bubbles.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from "../_base";
+import { NotificationBubble } from "./notification-bubble";
+import './notification-bubbles.less';
+
+export class NotificationBubbles extends BaseElement {
+    add(text: string, type: 'log' | 'info' | 'warn' | 'error' | 'syntax-error') {
+        var bubble = <NotificationBubble>document.createElement("notification-bubble");
+        bubble.innerText = text;
+        bubble.classList.add(type);
+        this.appendChild(bubble);
+    }
+
+    reset() {
+        this.innerHTML = "";
+    }
+}