gd-bs 6.2.7 → 6.2.9

package/index.html

@@ -206,7 +206,7 @@
                 text: "Popover Demo",
                 id: "popover-demo"
             });
-            GD.Components.Popover({
+            window["popover1"] = GD.Components.Popover({
                 target: btnPopover.el,
                 title: "My Popover",
                 placement: 10,
@@ -215,7 +215,7 @@
                     trigger: "click"
                 }
             });
-            GD.Components.Popover({
+            window["popover2"] = GD.Components.Popover({
                 el: document.querySelector("#popover1"),
                 btnProps: {
                     id: "popover-demo2",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.2.7",
+    "version": "6.2.9",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/popover/index.ts

@@ -221,6 +221,7 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
 
         // Create the popover content element
         this._elContent = document.createElement("div") as HTMLDivElement;
+        this._elContent.classList.add("popover");
         this._elContent.classList.add("popover-content");
         this._elContent.innerHTML = '<div class="popover-header"></div><div class="popover-body"></div>';
         appendContent(this._elContent.querySelector(".popover-header"), this.props.title);
@@ -286,12 +287,36 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
     // The tippy instance
     get tippy() { return this._tippy; }
 
+    // Sets the popover body element
+    setBody(content: string | Element) {
+        let elBody: HTMLElement = this.tippy.popper.querySelector(".popover-body");
+        if (elBody) {
+            // Clear the content
+            while (elBody.firstChild) { elBody.removeChild(elBody.firstChild); }
+
+            // Update the content
+            appendContent(elBody, content);
+        }
+    }
+
     // Sets the tippy content
     setContent(content: string | Element) {
         // Set the tippy content
         this.tippy.setContent(content);
     }
 
+    // Sets the popover header element
+    setHeader(content: string | Element) {
+        let elHeader: HTMLElement = this.tippy.popper.querySelector(".popover-header");
+        if (elHeader) {
+            // Clear the content
+            while (elHeader.firstChild) { elHeader.removeChild(elHeader.firstChild); }
+
+            // Update the content
+            appendContent(elHeader, content);
+        }
+    }
+
     // Shows the popover
     show() {
         // See if it's hidden

package/src/components/popover/types.d.ts

@@ -84,9 +84,15 @@ export interface IPopover {
     /** Toggles an element's popover. */
     toggle: () => void;
 
+    /** Sets the body element of the popover. */
+    setBody: (content: string | Element) => void;
+
     /** Sets the tippy content. */
     setContent: (content: string | Element) => void;
 
+    /** Sets the header element of the popover. */
+    setHeader: (content: string | Element) => void;
+
     /** Reveals an element’s popover. */
     show: () => void;
 }

package/src/styles/_core.scss

@@ -35,8 +35,8 @@
     @import "~bootstrap/scss/modal";
     /* We are using tippyjs styling
     @import "~bootstrap/scss/tooltip";
-    @import "~bootstrap/scss/popover";
     */
+    @import "~bootstrap/scss/popover";
     @import "~bootstrap/scss/carousel";
     @import "~bootstrap/scss/spinners";
     @import "~bootstrap/scss/offcanvas";