Initial Commit, final submission

src/lib/components/alertBox.ts

@@ -0,0 +1,59 @@
+interface AlertDetail {
+    type: 'alert-info' | 'alert-warning' | 'alert-success' | 'alert-error'
+    message: string
+}
+
+class AlertEvent extends CustomEvent<AlertDetail> {
+    constructor(detail: AlertDetail) {
+        super('alert', { detail })
+    }
+}
+
+const alertTemplate = document.createElement('template')
+alertTemplate.innerHTML = `
+    <div class="alert">
+        <span></span>
+    </div>
+`
+
+class Alert extends HTMLElement {
+    constructor(alertDetail: AlertDetail) {
+        super()
+        this.appendChild(alertTemplate.content.cloneNode(true))
+
+        const outer = this.querySelector<HTMLDivElement>('div')!
+        outer.classList.add(alertDetail.type)
+
+        const message = this.querySelector<HTMLSpanElement>('span')!
+        message.textContent = alertDetail.message
+    }
+}
+
+const alertBoxTemplate = document.createElement('template')
+alertBoxTemplate.innerHTML = `
+    <div id="alert-box" class="toast toast-top toast-end"></div>
+`
+
+class AlertBox extends HTMLElement {
+    private readonly alertBox: HTMLDivElement
+
+    constructor() {
+        super()
+        this.appendChild(alertBoxTemplate.content.cloneNode(true))
+        this.alertBox = this.querySelector<HTMLDivElement>('#alert-box')!
+    }
+
+    public add = (alertDetail: AlertDetail) => {
+        const alert = new Alert(alertDetail)
+        this.alertBox.appendChild(alert)
+        setTimeout(() => alert.remove(), 7000)
+    }
+
+    public static define() {
+        customElements.define('alert-element', Alert)
+        customElements.define('alert-box', AlertBox)
+    }
+}
+
+export default AlertBox
+export { AlertEvent, type AlertDetail }