Tweaked data table to not have a border. Added new yes no dialog that can be reused.

data-table.js

@@ -126,9 +126,10 @@ class DataTable extends IgniteElement {
                     )
                 )
             ),
-
+            
+            //Rows
             new div().class("table-responsive rounded-2 mb-3").child(
-                new table().class("table table-striped align-middle mb-0").child(
+                new table().class("table table-striped align-middle mb-0 table-borderless").child(
                     //Table columns
                     new thead().class("table-dark").child(
                         new tr().child(

yes-no-dialog.js

@@ -0,0 +1,142 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
+import { IgniteTemplate, div, h2, h6, button } from "../ignite-html/ignite-template.js";
+
+class YesNoDialog extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get properties() {
+        return {
+            loading: false,
+            title: null,
+            description: null,
+            yesButton: "Yes",
+            yesCallback: null,
+            noButton: "No",
+            noCallback: null,
+            modalElement: null,
+            modal: null,
+            autoOpen: false
+        };
+    }
+
+    render() {
+        return this.template.child(
+            new div().class("modal").ref(this.modalElement).child(
+                new div().class("modal-dialog modal-dialog-centered").child(
+                    new div().class("modal-content").child(
+                        new div().class("modal-body d-flex flex-column align-items-center").child(
+                            //Title
+                            new h2().class("text-primary text-center mb-3").child(this.title),
+
+                            new h6().show(this.description, description => description != null && description != undefined).class("text-center mb-4").child(this.description),
+
+                            //Yes and No button
+                            new div().class("d-flex flex-row gap-3 w-100").child(
+                                new button()
+                                    .disabled(this.loading)
+                                    .class("btn btn-lg btn-secondary flex-1 rounded-pill d-flex flex-row align-items-center justify-content-center")
+                                    .child(
+                                        new div().show(this.loading).class("spinner-border me-2"),
+
+                                        this.yesButton
+                                    )
+                                    .onClick(() => this.yes()),
+
+                                new button()
+                                    .disabled(this.loading)
+                                    .class("btn btn-lg btn-primary rounded-pill flex-1")
+                                    .child(this.noButton)
+                                    .onClick(() => this.no())
+                            )
+                        )
+                    )
+                )
+            )
+        )
+    }
+
+    ready() {
+        this.modal = new bootstrap.Modal(this.modalElement, { backdrop: "static" });
+
+        if (this.autoOpen) {
+            this.open();
+        }
+    }
+
+    async yes() {
+        this.loading = true;
+
+        if (this.yesCallback) {
+            await this.yesCallback(this);
+        }
+
+        this.loading = false;
+
+        this.close();
+    }
+
+    async no() {
+        this.loading = true;
+
+        if (this.noCallback) {
+            await this.noCallback(this);
+        }
+
+        this.loading  =false;
+        
+        this.close();
+    }
+
+    open() {
+        this.modal.show();
+    }
+
+    close() {
+        this.modal.hide();
+    }
+}
+
+customElements.define("bt-yes-no-dialog", YesNoDialog);
+
+class Template extends IgniteTemplate {
+    constructor(...children) {
+        super("bt-yes-no-dialog", children);
+    }
+
+    /**
+     * Creates and opens a new Yes No dialog with a title, description, yesCallback, noCallback.
+     * @param {String|IgniteProperty} title 
+     * @param {String|IgniteProperty} description 
+     * @param {Function(YesNoDialog)} yesCallback 
+     * @param {Function(YesNoDialog)} noCallback 
+     */
+    static open(title, description, yesCallback = null, noCallback = null) {
+        var dialog = new Template();
+        dialog.property("autoOpen", true);
+        dialog.property("title", title);
+        dialog.property("description", description);
+        dialog.property("yesCallback", async (instance) => {
+            if (yesCallback) {
+                await yesCallback(instance);
+            }
+
+            dialog.deconstruct();
+        });
+        dialog.property("noCallback", async (instance) => {
+            if (noCallback) {
+                await noCallback(instance);
+            }
+
+            dialog.deconstruct();
+        });
+
+        dialog.construct(window.document.body, null);
+    }
+}
+
+export {
+    Template as YesNoDialog
+}