feat: download data preview modal

assets/components/preview-content-dialog.js

@@ -0,0 +1,35 @@
+export default class PreviewContentDialog extends HTMLDialogElement {
+    #headingEl;
+    #contentEl;
+    #closeBtnEl;
+
+    constructor() {
+        super();
+        this.#headingEl = this.querySelector('.modal-heading');
+        this.#contentEl = this.querySelector('.modal-content');
+        this.#closeBtnEl = this.querySelector('.modal-close');
+
+        this.setHeading = this.setHeading.bind(this);
+        this.setContent = this.setContent.bind(this);
+
+        document.addEventListener('showPreviewContentModal',  (event) => {
+            this.display(event.detail);
+        });
+        document.addEventListener('hidePreviewContentModal', (e) => this.close());
+        this.#closeBtnEl.addEventListener('click', () => this.close());
+    }
+
+    setHeading(heading) {
+        this.#headingEl.innerHTML = heading;
+    }
+
+    setContent(content) {
+        this.#contentEl.innerHTML = content;
+    }
+
+    display({ heading, content }) {
+        this.setHeading(heading);
+        this.setContent(content);
+        this.showModal();
+    }
+}