gd-bs 6.6.41 → 6.6.43

package/index.html

@@ -1351,6 +1351,7 @@
             });
             window["navbar"] = GD.Components.Navbar({
                 el: document.querySelector("#navbar"),
+                brand: "Test",
                 onClick: function(item) {
                     // Log
                     console.log("Nav Item Clicked: " + item.text);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.6.41",
+    "version": "6.6.43",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",
@@ -34,9 +34,9 @@
     "homepage": "https://dattabase.com/extras/bs",
     "dependencies": {
         "@popperjs/core": "^2.11.8",
-        "bootstrap": "^5.3.2",
+        "bootstrap": "^5.3.3",
         "bootstrap-icons": "^1.11.3",
-        "core-js": "^3.33.3",
+        "core-js": "^3.38.1",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {

package/src/components/navbar/index.ts

@@ -40,19 +40,36 @@ class _Navbar extends Base<INavbarProps> implements INavbar {
 
     // Configure the card group
     private configure(itemTemplate: string) {
-        // See if there is a brand
-        let brand = this.el.querySelector(".navbar-brand") as HTMLAnchorElement;
-        if (brand) {
-            if (this.props.brand) {
+        // See if we are applying a brand
+        if (this.props.brand) {
+            let elBrand = this.el.querySelector("span.navbar-brand") as HTMLSpanElement;
+            let elBrandLink = this.el.querySelector("a.navbar-brand") as HTMLAnchorElement;
+
+            // See if we are using a link
+            if (this.props.brandUrl || this.props.onClickBrand) {
+                // Remove the element
+                elBrand ? elBrand.parentElement.removeChild(elBrand) : null;
+
                 // Update the brand
-                this.props.brandUrl ? brand.href = this.props.brandUrl : null;
+                elBrandLink ? elBrandLink.href = this.props.brandUrl : null;
 
                 // Append the content
-                appendContent(brand, this.props.brand);
+                appendContent(elBrandLink, this.props.brand);
             } else {
-                // Remove the brand
-                brand.parentNode.removeChild(brand);
+                // Remove the link element
+                elBrandLink ? elBrandLink.parentElement.removeChild(elBrandLink) : null;
+
+                // Append the content
+                appendContent(elBrand, this.props.brand);
             }
+        } else {
+            // Remove the brand link
+            let elBrandLink = this.el.querySelector("a.navbar-brand");
+            if (elBrandLink) { elBrandLink.parentNode.removeChild(elBrandLink); }
+
+            // Remove the brand element
+            let elBrand = this.el.querySelector("span.navbar-brand");
+            if (elBrand) { elBrand.parentNode.removeChild(elBrand); }
         }
 
         // Update the nav bar

package/src/components/navbar/templates.ts

@@ -3,6 +3,7 @@ export const HTML = `
 <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
         <a class="navbar-brand" href="#"></a>
+        <span class="navbar-brand mb-0 h1"></span>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-expanded="false"
             aria-label="Toggle Navigation">
             <span class="navbar-toggler-icon"></span>

package/src/styles/_custom.scss

@@ -277,6 +277,7 @@
     }
     /* Adjust checkbox size */
     .form-check:not(.form-switch) .form-check-input[type=checkbox] {
+        display: inline;
         height: 1.25rem;
         width: 1.25rem;
     }