gd-bs 6.8.0 → 6.8.1

package/index.html

@@ -25,6 +25,7 @@
         <div id="card"></div>
         <div id="card-group"></div>
         <div id="tooltip"></div>
+        <div id="popover2"></div>
         <div id="toolbar"></div>
         <div id="ddl"></div>
         <div id="button"></div>
@@ -132,9 +133,64 @@
                 btnLoading.setText("Click Me");
             }, 5000);
 
+            var ddlMenu = GD.Components.Dropdown({
+                menuOnly: true,
+                items: [
+                    { text: "Item 1", value: 1 },
+                    { text: "Item 2", value: 2 },
+                    { text: "Item 3", value: 3 },
+                    { text: "Item 4", value: 4 },
+                    { text: "Item 5", value: 5 }
+                ],
+                onChange: (item) => {
+                    alert("Item Selected: " + (item ? item.value : "None"));
+                    tooltip.hide();
+                }
+            });
+            ddlMenu.el.querySelectorAll(".dropdown-item").forEach(item => {
+                item.addEventListener("click", ev => {
+                    console.log(ev.srcElement.innerHTML);
+                })
+            });
+            var btn = GD.Components.Button({
+                text: "Popover",
+            })
+            window["popover"] = GD.Components.Popover({
+                el: document.getElementById("popover2"),
+                btnProps: {
+                    id: "popover-demo2",
+                    text: "Popover Demo",
+                    type: 3
+                },
+                placement: 4,
+                options: {
+                    content: ddlMenu.el,
+                    trigger: "click"
+                }
+            });
+
+            var el = document.createElement("div");
+            el.innerHTML = '<h6 class="dropdown-header">Search Results for "testing"</h6>';
+            el.innerHTML += '<div class="dropdown-divider"></div>';
+            [
+                { text: "Item 1", value: 1 },
+                { text: "Item 2", value: 2 },
+                { text: "Item 3", value: 3 },
+                { text: "Item 4", value: 4 },
+                { text: "Item 5", value: 5 }
+            ].forEach(item => {
+                var elItem = document.createElement("a");
+                elItem.classList.add("dropdown-item");
+                elItem.innerHTML = item.text;
+                elItem.setAttribute("data-user", item.value);
+                elItem.addEventListener("click", ev => {
+                    console.log(ev.srcElement.innerHTML);
+                });
+                el.appendChild(elItem);
+            })
             window["tooltip"] = GD.Components.Tooltip({
                 el: document.getElementById("tooltip"),
-                content: "This is a tooltip.",
+                content: el,
                 placement: 15,
                 type: GD.Components.TooltipTypes.Primary,
                 btnProps: {
@@ -298,7 +354,7 @@
                 placement: 10,
                 options: {
                     content: "This is the content.",
-                    trigger: "click"
+                    trigger: "focus"
                 }
             });
             window["popover2"] = GD.Components.Popover({
@@ -316,7 +372,8 @@
                         onClick: function() {
                             alert("Take Action");
                         }
-                    }).el
+                    }).el,
+                    trigger: "click"
                 }
             });
             window["myForm"] = GD.Components.Form({
@@ -484,9 +541,6 @@
                                     value: 3
                                 }, ]);
                             },
-                            onChange: function(item) {
-                                alert("Selected Item: " + item.text);
-                            },
                             onValidate: function(props, result) {
                                 return {
                                     invalidMessage: "This is invalid.",

package/package.json

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

package/src/components/tooltip/index.ts

@@ -200,8 +200,10 @@ class _Tooltip extends Base<ITooltipProps> {
         if (typeof (this.props.content) === "string") {
             this._elContent = document.createElement("div") as HTMLElement;
             this._elContent.innerHTML = this.props.content;
-        } else {
+        } else if(this.props.content) {
             this._elContent = this.props.content as any;
+        } else {
+            this._elContent = document.createElement("div");
         }
 
         // Set the padding

package/src/styles/_custom.scss

@@ -321,6 +321,7 @@
     .dropdown-item:hover,
     .dropdown-item:focus {
         background-color: var(--sp-neutral-quaternary, #d2d0ce);
+        cursor: pointer;
     }
 
     /* Color match dropdown active */

package/src/styles/_floating-ui.scss

@@ -33,15 +33,15 @@
 
     &.floating-dropdown .dropdown-item {
         border-radius: var(--bs-dropdown-border-radius, 5px);
-    }
 
-    &.floating-dropdown .dropdown-item.active {
-        background-color: var(--sp-theme-primary, #0078d4);
-    }
+        :active {
+            background-color: var(--sp-theme-primary, #0078d4);
+        }
 
-    &.floating-dropdown .dropdown-item:hover {
-        background-color: var(--bs-dropdown-link-hover-bg, #faf9f8);
-        color: var(--bs-dropdown-link-hover-color, #201f1e);
+        :hover {
+            background-color: var(--bs-dropdown-link-hover-bg, #faf9f8);
+            color: var(--bs-dropdown-link-hover-color, #201f1e);
+        }
     }
 
     /* Style the Floating UI arrow */
@@ -124,6 +124,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-neutral-lighter);
+            color: var(--sp-info-icon, #605e5c);
         }
 
         &[data-placement='top']>.arrow {
@@ -173,6 +174,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-neutral-lighter);
+            color: var(--sp-success-icon, #107c10);
         }
 
         &[data-placement='top']>.arrow {
@@ -222,6 +224,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-neutral-dark);
+            color: var(--sp-accent, #8764b8);
         }
 
         &[data-placement='top']>.arrow {
@@ -271,6 +274,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-neutral-lighter);
+            color: var(--sp-severe-warning-icon, #d83b01);
         }
 
         &[data-placement='top']>.arrow {
@@ -320,6 +324,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-neutral-lighter);
+            color: var(--sp-error-icon, #a80000);
         }
 
         &[data-placement='top']>.arrow {
@@ -369,6 +374,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-white);
+            color: var(--sp-black, #000000);
         }
 
         &[data-placement='top']>.arrow {
@@ -413,6 +419,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-black);
+            color: var(--sp-white, #ffffff);
         }
 
         .dropdown-item.active {
@@ -465,6 +472,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-neutral-lighter);
+            color: var(--sp-white, #ffffff);
         }
 
         &[data-placement='top']>.arrow {
@@ -514,6 +522,7 @@
 
         .dropdown-item:hover {
             background-color: var(--sp-theme-dark, #005a9e);
+            color: var(--sp-white, #ffffff);
         }
 
         &[data-placement='top']>.arrow {