gd-bs 5.5.5 → 5.5.6

package/dist/gd-bs.d.ts

@@ -1977,6 +1977,7 @@ declare module 'gd-bs/components/nav/types' {
             isVertical?: boolean;
             onClick?: (newTab?: INavLink, prevTab?: INavLink) => void;
             onLinkRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
+            onRendered?: (el?: HTMLElement) => void;
             onTabRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
     }
     
@@ -2122,6 +2123,7 @@ declare module 'gd-bs/components/navbar/types' {
             itemsEnd?: Array<INavbarItem>;
             onClick?: (item?: INavbarItem, ev?: Event) => void;
             onItemRendered?: (el?: HTMLElement, item?: INavbarItem) => void;
+            onRendered?: (el?: HTMLElement) => void;
             searchBox?: INavbarSearchBox;
             type?: number;
     }

package/dist/gd-bs.js

@@ -1247,7 +1247,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Nav = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar link_1 = __webpack_require__(/*! ./link */ \"./build/components/nav/link.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/nav/templates.js\");\n/**\r\n * Navigation\r\n * @param props - The navigation properties.\r\n */\n\n\nvar _Nav =\n/** @class */\nfunction (_super) {\n  __extends(_Nav, _super); // Constructor\n\n\n  function _Nav(props, template, itemTemplate) {\n    if (template === void 0) {\n      template = props.isTabs ? props.isVertical ? templates_1.HTMLVerticalTabs : templates_1.HTMLTabs : templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._links = null; // Configure the collapse\n\n    _this.configure(itemTemplate); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Nav.prototype.configure = function (itemTemplate) {\n    // Update the navigation\n    var nav = this.el.querySelector(\".nav\");\n\n    if (nav) {\n      this.props.id ? nav.id = this.props.id : null;\n      this.props.enableFill ? this.el.classList.add(\"nav-fill\") : null;\n      this.props.isJustified ? this.el.classList.add(\"nav-justified\") : null;\n      this.props.isPills ? this.el.classList.add(\"nav-pills\") : null;\n      this.props.isTabs ? this.el.classList.add(\"nav-tabs\") : null;\n      this.props.isVertical ? this.el.classList.add(\"flex-column\") : null;\n    } // Render the nav links\n\n\n    this.renderItems(itemTemplate);\n  }; // Configures the link event\n\n\n  _Nav.prototype.configureEvents = function (tab) {\n    var _this = this; // Add a click event\n\n\n    tab.el.addEventListener(\"click\", function () {\n      var prevTab = null;\n      var newTab = tab; // Parse the links\n\n      for (var i = 0; i < _this._links.length; i++) {\n        var link = _this._links[i]; // See if it's active\n\n        if (link.isActive) {\n          // Set the old tab\n          prevTab = link; // Toggle it\n\n          link.toggle(_this.props.fadeTabs);\n        }\n      } // Toggle the link\n\n\n      tab.toggle(_this.props.fadeTabs); // Call the click event\n\n      _this.props.onClick ? _this.props.onClick(newTab, prevTab) : null;\n    });\n  }; // Renders the links\n\n\n  _Nav.prototype.renderItems = function (itemTemplate) {\n    // Clear the links\n    this._links = []; // Get the nav and tab elements\n\n    var nav = this.el.querySelector(\".nav\") || this.el;\n\n    if (nav) {\n      var tabs = this.el.querySelector(\".tab-content\"); // Parse the navigation items\n\n      var links = this.props.items || [];\n\n      for (var i = 0; i < links.length; i++) {\n        // Create the link\n        var link = new link_1.NavLink(links[i], tabs ? true : false, itemTemplate);\n        nav.appendChild(link.el);\n\n        this._links.push(link); // See if we are rendering tabs\n\n\n        if (tabs) {\n          // Configure the events\n          this.configureEvents(link); // Add the tab content\n\n          tabs.appendChild(link.elTabContent); // See if the fade option is enabled\n\n          if (this.props.fadeTabs) {\n            // Set the class name\n            link.elTabContent.classList.add(\"fade\"); // See if the tab is active\n\n            if (link.props.isActive) {\n              // Set the class name\n              link.elTabContent.classList.add(\"show\");\n            }\n          }\n        } // Call the render events\n\n\n        this.props.onLinkRendered ? this.props.onLinkRendered(link.elTab, links[i]) : null;\n        this.props.onTabRendered ? this.props.onTabRendered(link.elTabContent, links[i]) : null;\n      }\n    }\n  };\n\n  Object.defineProperty(_Nav.prototype, \"activeTab\", {\n    /**\r\n     * Public Interface\r\n     */\n    // The active tab\n    get: function get() {\n      // Parse the links\n      for (var i = 0; i < this._links.length; i++) {\n        var link = this._links[i]; // See if it's active\n\n        if (link.isActive) {\n          // Return the link\n          return link;\n        }\n      } // Active tab not found\n\n\n      return null;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Shows a tab\n\n  _Nav.prototype.showTab = function (tabId) {\n    // Ensure tabs exist\n    if (this.props.isTabs) {\n      // Parse the tabs\n      for (var i = 0; i < this._links.length; i++) {\n        var link = this._links[i]; // See if this is the target tab\n\n        if (tabId === i + 1 || link.elTabContent.getAttribute(\"data-title\") == tabId) {\n          // Toggle it if it's not active\n          link.isActive ? null : link.toggle(this.props.fadeTabs);\n        } // Else, see if it's active\n        else if (link.isActive) {\n          // Toggle it\n          link.toggle(this.props.fadeTabs);\n        }\n      }\n    }\n  };\n\n  return _Nav;\n}(base_1.Base);\n\nexports.Nav = function (props, template, itemTemplate) {\n  return new _Nav(props, template, itemTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/nav/index.js?");
+eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Nav = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar link_1 = __webpack_require__(/*! ./link */ \"./build/components/nav/link.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/nav/templates.js\");\n/**\r\n * Navigation\r\n * @param props - The navigation properties.\r\n */\n\n\nvar _Nav =\n/** @class */\nfunction (_super) {\n  __extends(_Nav, _super); // Constructor\n\n\n  function _Nav(props, template, itemTemplate) {\n    if (template === void 0) {\n      template = props.isTabs ? props.isVertical ? templates_1.HTMLVerticalTabs : templates_1.HTMLTabs : templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._links = null; // Configure the collapse\n\n    _this.configure(itemTemplate); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Nav.prototype.configure = function (itemTemplate) {\n    // Update the navigation\n    var nav = this.el.querySelector(\".nav\");\n\n    if (nav) {\n      this.props.id ? nav.id = this.props.id : null;\n      this.props.enableFill ? this.el.classList.add(\"nav-fill\") : null;\n      this.props.isJustified ? this.el.classList.add(\"nav-justified\") : null;\n      this.props.isPills ? this.el.classList.add(\"nav-pills\") : null;\n      this.props.isTabs ? this.el.classList.add(\"nav-tabs\") : null;\n      this.props.isVertical ? this.el.classList.add(\"flex-column\") : null;\n    } // Render the nav links\n\n\n    this.renderItems(itemTemplate);\n  }; // Configure the events\n\n\n  _Nav.prototype.configureEvents = function () {\n    // Execute the event(s)\n    this.props.onRendered ? this.props.onRendered(this.el) : null;\n  }; // Configures the tab link event\n\n\n  _Nav.prototype.configureTabEvents = function (tab) {\n    var _this = this; // Add a click event\n\n\n    tab.el.addEventListener(\"click\", function () {\n      var prevTab = null;\n      var newTab = tab; // Parse the links\n\n      for (var i = 0; i < _this._links.length; i++) {\n        var link = _this._links[i]; // See if it's active\n\n        if (link.isActive) {\n          // Set the old tab\n          prevTab = link; // Toggle it\n\n          link.toggle(_this.props.fadeTabs);\n        }\n      } // Toggle the link\n\n\n      tab.toggle(_this.props.fadeTabs); // Call the click event\n\n      _this.props.onClick ? _this.props.onClick(newTab, prevTab) : null;\n    });\n  }; // Renders the links\n\n\n  _Nav.prototype.renderItems = function (itemTemplate) {\n    // Clear the links\n    this._links = []; // Get the nav and tab elements\n\n    var nav = this.el.querySelector(\".nav\") || this.el;\n\n    if (nav) {\n      var tabs = this.el.querySelector(\".tab-content\"); // Parse the navigation items\n\n      var links = this.props.items || [];\n\n      for (var i = 0; i < links.length; i++) {\n        // Create the link\n        var link = new link_1.NavLink(links[i], tabs ? true : false, itemTemplate);\n        nav.appendChild(link.el);\n\n        this._links.push(link); // See if we are rendering tabs\n\n\n        if (tabs) {\n          // Configure the events\n          this.configureTabEvents(link); // Add the tab content\n\n          tabs.appendChild(link.elTabContent); // See if the fade option is enabled\n\n          if (this.props.fadeTabs) {\n            // Set the class name\n            link.elTabContent.classList.add(\"fade\"); // See if the tab is active\n\n            if (link.props.isActive) {\n              // Set the class name\n              link.elTabContent.classList.add(\"show\");\n            }\n          }\n        } // Call the render events\n\n\n        this.props.onLinkRendered ? this.props.onLinkRendered(link.elTab, links[i]) : null;\n        this.props.onTabRendered ? this.props.onTabRendered(link.elTabContent, links[i]) : null;\n      }\n    }\n  };\n\n  Object.defineProperty(_Nav.prototype, \"activeTab\", {\n    /**\r\n     * Public Interface\r\n     */\n    // The active tab\n    get: function get() {\n      // Parse the links\n      for (var i = 0; i < this._links.length; i++) {\n        var link = this._links[i]; // See if it's active\n\n        if (link.isActive) {\n          // Return the link\n          return link;\n        }\n      } // Active tab not found\n\n\n      return null;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Shows a tab\n\n  _Nav.prototype.showTab = function (tabId) {\n    // Ensure tabs exist\n    if (this.props.isTabs) {\n      // Parse the tabs\n      for (var i = 0; i < this._links.length; i++) {\n        var link = this._links[i]; // See if this is the target tab\n\n        if (tabId === i + 1 || link.elTabContent.getAttribute(\"data-title\") == tabId) {\n          // Toggle it if it's not active\n          link.isActive ? null : link.toggle(this.props.fadeTabs);\n        } // Else, see if it's active\n        else if (link.isActive) {\n          // Toggle it\n          link.toggle(this.props.fadeTabs);\n        }\n      }\n    }\n  };\n\n  return _Nav;\n}(base_1.Base);\n\nexports.Nav = function (props, template, itemTemplate) {\n  return new _Nav(props, template, itemTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/nav/index.js?");
 
 /***/ }),
 
@@ -1280,7 +1280,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Navbar = exports.NavbarTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./build/components/button/index.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/navbar/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/navbar/templates.js\");\n/**\r\n * Navbar Types\r\n */\n\n\nvar NavbarTypes;\n\n(function (NavbarTypes) {\n  NavbarTypes[NavbarTypes[\"Dark\"] = 1] = \"Dark\";\n  NavbarTypes[NavbarTypes[\"Light\"] = 2] = \"Light\";\n  NavbarTypes[NavbarTypes[\"Primary\"] = 3] = \"Primary\";\n})(NavbarTypes = exports.NavbarTypes || (exports.NavbarTypes = {}));\n/**\r\n * Navbar\r\n */\n\n\nvar _Navbar =\n/** @class */\nfunction (_super) {\n  __extends(_Navbar, _super); // Constructor\n\n\n  function _Navbar(props, template, itemTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._items = null; // Configure the collapse\n\n    _this.configure(itemTemplate); // Configure search\n\n\n    _this.configureSearch(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Navbar.prototype.configure = function (itemTemplate) {\n    // See if there is a brand\n    var brand = this.el.querySelector(\".navbar-brand\");\n\n    if (brand) {\n      if (this.props.brand) {\n        // Update the brand\n        this.props.brandUrl ? brand.href = this.props.brandUrl : null; // Append the content\n\n        common_1.appendContent(brand, this.props.brand);\n      } else {\n        // Remove the brand\n        brand.parentNode.removeChild(brand);\n      }\n    } // Update the nav bar\n\n\n    var navbar = this.el.querySelector(\".navbar-collapse\");\n\n    if (navbar) {\n      navbar.id = this.props.id || \"navbar_content\";\n    } // Set the toggle\n\n\n    var toggler = this.el.querySelector(\".navbar-toggler\");\n\n    if (toggler) {\n      toggler.setAttribute(\"aria-controls\", navbar.id);\n      toggler.setAttribute(\"data-bs-target\", \"#\" + navbar.id);\n    } // Set the scroll\n\n\n    var nav = this.el.querySelector(\".navbar-nav\");\n\n    if (nav && this.props.enableScrolling) {\n      // Add the class\n      nav.classList.add(\"navbar-nav-scroll\");\n    } // Add the classes based on the type\n\n\n    this._btnSearch = this.el.querySelector(\"button[type='submit']\"); // Set the type\n\n    this.setType(this.props.type); // Render the items\n\n    this.renderItems(itemTemplate);\n  }; // Configure the events\n\n\n  _Navbar.prototype.configureEvents = function () {\n    var _this = this;\n\n    var props = this.props.searchBox || {}; // See if search events exist\n\n    var searchbox = this.el.querySelector(\"form input\");\n\n    if (searchbox) {\n      // Set a keydown event to catch the \"Enter\" key being pressed\n      searchbox.addEventListener(\"keydown\", function (ev) {\n        // See if the \"Enter\" key was pressed\n        if (ev.code == \"13\") {\n          // Disable the postback\n          ev.preventDefault(); // See if there is a search event\n\n          if (props.onSearch) {\n            // Call the event\n            props.onSearch(searchbox.value, ev);\n          }\n        }\n      }); // See if a change event exists\n\n      if (props.onChange) {\n        // Add an input event\n        searchbox.addEventListener(\"input\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Add a clear event\n\n        searchbox.addEventListener(\"clear\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Edge has a bug where the clear event isn't triggered\n        // See if this is the Edge browser\n\n        if (window.navigator.userAgent.indexOf(\"Edge\") > 0) {\n          // Detect the mouse click event\n          searchbox.addEventListener(\"mouseup\", function () {\n            var currentValue = searchbox.value; // Set a timeout to see if the value is cleared\n\n            setTimeout(function () {\n              // Compare the values\n              if (currentValue != searchbox.value) {\n                // Call the event\n                props.onChange(searchbox.value);\n              }\n            }, 1);\n          });\n        }\n      }\n    } // See if a search event exists\n\n\n    var button = this.el.querySelector(\"form button\");\n\n    if (button && props.onSearch) {\n      // Add a click event\n      button.addEventListener(\"click\", function (ev) {\n        // Prevent the page from moving to the top\n        ev.preventDefault(); // Call the event\n\n        props.onSearch(searchbox.value);\n      });\n    } // See if the toggle exists\n\n\n    var btnToggle = this.el.querySelector(\".navbar-toggler\");\n\n    if (btnToggle) {\n      // Add a click event\n      btnToggle.addEventListener(\"click\", function (ev) {\n        var elNav = _this.el.querySelector(\".navbar-collapse\"); // See if it's visible\n\n\n        if (!btnToggle.classList.contains(\"collapsed\") && elNav.classList.contains(\"show\")) {\n          // Start the animation\n          elNav.style.height = elNav.getBoundingClientRect()[\"height\"] + \"px\";\n          setTimeout(function () {\n            elNav.classList.add(\"collapsing\");\n            elNav.classList.remove(\"collapse\");\n            elNav.classList.remove(\"show\");\n            elNav.style.height = \"\";\n            btnToggle.classList.add(\"collapsed\");\n          }, 10); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n          }, 250);\n        } else {\n          // Start the animation\n          elNav.classList.remove(\"collapse\");\n          elNav.classList.add(\"collapsing\");\n          elNav.style.height = _this.el.scrollHeight + \"px\";\n          btnToggle.classList.remove(\"collapsed\"); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n            elNav.classList.add(\"show\");\n            elNav.style.height = \"\";\n          }, 250);\n        }\n      });\n    }\n  }; // Configures search\n\n\n  _Navbar.prototype.configureSearch = function () {\n    // See if we are rendering a search box\n    var search = this.el.querySelector(\"form\");\n\n    if (search) {\n      if (this.props.enableSearch != false && this.props.searchBox) {\n        var props = this.props.searchBox || {}; // Update the searchbox\n\n        var searchbox = search.querySelector(\"input\");\n        searchbox.placeholder = props.placeholder || searchbox.placeholder;\n        searchbox.value = props.value || \"\";\n        props.btnText ? searchbox.setAttribute(\"aria-label\", props.btnText) : null; // See if we are rendering a button\n\n        var button = search.querySelector(\"button\");\n\n        if (props.hideButton == true) {\n          // Remove the button\n          search.removeChild(button);\n        } else {\n          // Set the button type class name\n          var className = button_1.ButtonClassNames.getByType(props.btnType);\n          className ? button.classList.add(className) : null;\n        }\n      } else {\n        // Remove the searchbox\n        search.parentNode.removeChild(search);\n      }\n    }\n  }; // Render the items\n\n\n  _Navbar.prototype.renderItems = function (itemTemplate) {\n    // Clear the list\n    this._items = []; // Create the navbar list\n\n    var list = this.el.querySelector(\"ul.navbar-nav\");\n\n    if (list) {\n      // Parse the items\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        // Create the item\n        var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n        this._items.push(item);\n\n        list.appendChild(item.el); // Call the render events\n\n        this.props.onItemRendered ? this.props.onItemRendered(item.el, items[i]) : null;\n      }\n    } // Create the navbar right list\n\n\n    list = this.el.querySelectorAll(\"ul.navbar-nav\")[1];\n\n    if (list) {\n      // See if no items exist\n      var items = this.props.itemsEnd || [];\n\n      if (items.length == 0) {\n        // Remove the element\n        list.remove();\n      } else {\n        // Parse the items\n        for (var i = 0; i < items.length; i++) {\n          // Create the item\n          var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n          this._items.push(item);\n\n          list.appendChild(item.el);\n        }\n      }\n    }\n  };\n  /**\r\n   * Public Methods\r\n   */\n  // Updates the navbar template type\n\n\n  _Navbar.prototype.setType = function (navbarType) {\n    // Remove the classes\n    this.el.classList.remove(\"navbar-dark\");\n    this.el.classList.remove(\"navbar-light\");\n    this.el.classList.remove(\"bg-dark\");\n    this.el.classList.remove(\"bg-light\");\n    this.el.classList.remove(\"bg-primary\");\n\n    this._btnSearch.classList.remove(\"btn-outline-info\");\n\n    this._btnSearch.classList.remove(\"btn-outline-light\");\n\n    this._btnSearch.classList.remove(\"btn-outline-primary\"); // See which classes to add\n\n\n    switch (navbarType) {\n      // Dark\n      case NavbarTypes.Dark:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-dark\");\n\n        this._btnSearch.classList.add(\"btn-outline-info\");\n\n        break;\n      // Primary\n\n      case NavbarTypes.Primary:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-primary\");\n\n        this._btnSearch.classList.add(\"btn-outline-light\");\n\n        break;\n      // Default - Light\n\n      default:\n        // Add the class\n        this.el.classList.add(\"navbar-light\");\n        this.el.classList.add(\"bg-light\");\n\n        this._btnSearch.classList.add(\"btn-outline-primary\");\n\n        break;\n    }\n  };\n\n  return _Navbar;\n}(base_1.Base);\n\nexports.Navbar = function (props, template, itemTemplate) {\n  return new _Navbar(props, template, itemTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/navbar/index.js?");
+eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Navbar = exports.NavbarTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./build/components/button/index.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/navbar/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/navbar/templates.js\");\n/**\r\n * Navbar Types\r\n */\n\n\nvar NavbarTypes;\n\n(function (NavbarTypes) {\n  NavbarTypes[NavbarTypes[\"Dark\"] = 1] = \"Dark\";\n  NavbarTypes[NavbarTypes[\"Light\"] = 2] = \"Light\";\n  NavbarTypes[NavbarTypes[\"Primary\"] = 3] = \"Primary\";\n})(NavbarTypes = exports.NavbarTypes || (exports.NavbarTypes = {}));\n/**\r\n * Navbar\r\n */\n\n\nvar _Navbar =\n/** @class */\nfunction (_super) {\n  __extends(_Navbar, _super); // Constructor\n\n\n  function _Navbar(props, template, itemTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._items = null; // Configure the collapse\n\n    _this.configure(itemTemplate); // Configure search\n\n\n    _this.configureSearch(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Navbar.prototype.configure = function (itemTemplate) {\n    // See if there is a brand\n    var brand = this.el.querySelector(\".navbar-brand\");\n\n    if (brand) {\n      if (this.props.brand) {\n        // Update the brand\n        this.props.brandUrl ? brand.href = this.props.brandUrl : null; // Append the content\n\n        common_1.appendContent(brand, this.props.brand);\n      } else {\n        // Remove the brand\n        brand.parentNode.removeChild(brand);\n      }\n    } // Update the nav bar\n\n\n    var navbar = this.el.querySelector(\".navbar-collapse\");\n\n    if (navbar) {\n      navbar.id = this.props.id || \"navbar_content\";\n    } // Set the toggle\n\n\n    var toggler = this.el.querySelector(\".navbar-toggler\");\n\n    if (toggler) {\n      toggler.setAttribute(\"aria-controls\", navbar.id);\n      toggler.setAttribute(\"data-bs-target\", \"#\" + navbar.id);\n    } // Set the scroll\n\n\n    var nav = this.el.querySelector(\".navbar-nav\");\n\n    if (nav && this.props.enableScrolling) {\n      // Add the class\n      nav.classList.add(\"navbar-nav-scroll\");\n    } // Add the classes based on the type\n\n\n    this._btnSearch = this.el.querySelector(\"button[type='submit']\"); // Set the type\n\n    this.setType(this.props.type); // Render the items\n\n    this.renderItems(itemTemplate);\n  }; // Configure the events\n\n\n  _Navbar.prototype.configureEvents = function () {\n    var _this = this;\n\n    var props = this.props.searchBox || {}; // See if search events exist\n\n    var searchbox = this.el.querySelector(\"form input\");\n\n    if (searchbox) {\n      // Set a keydown event to catch the \"Enter\" key being pressed\n      searchbox.addEventListener(\"keydown\", function (ev) {\n        // See if the \"Enter\" key was pressed\n        if (ev.code == \"13\") {\n          // Disable the postback\n          ev.preventDefault(); // See if there is a search event\n\n          if (props.onSearch) {\n            // Call the event\n            props.onSearch(searchbox.value, ev);\n          }\n        }\n      }); // See if a change event exists\n\n      if (props.onChange) {\n        // Add an input event\n        searchbox.addEventListener(\"input\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Add a clear event\n\n        searchbox.addEventListener(\"clear\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Edge has a bug where the clear event isn't triggered\n        // See if this is the Edge browser\n\n        if (window.navigator.userAgent.indexOf(\"Edge\") > 0) {\n          // Detect the mouse click event\n          searchbox.addEventListener(\"mouseup\", function () {\n            var currentValue = searchbox.value; // Set a timeout to see if the value is cleared\n\n            setTimeout(function () {\n              // Compare the values\n              if (currentValue != searchbox.value) {\n                // Call the event\n                props.onChange(searchbox.value);\n              }\n            }, 1);\n          });\n        }\n      }\n    } // See if a search event exists\n\n\n    var button = this.el.querySelector(\"form button\");\n\n    if (button && props.onSearch) {\n      // Add a click event\n      button.addEventListener(\"click\", function (ev) {\n        // Prevent the page from moving to the top\n        ev.preventDefault(); // Call the event\n\n        props.onSearch(searchbox.value);\n      });\n    } // See if the toggle exists\n\n\n    var btnToggle = this.el.querySelector(\".navbar-toggler\");\n\n    if (btnToggle) {\n      // Add a click event\n      btnToggle.addEventListener(\"click\", function (ev) {\n        var elNav = _this.el.querySelector(\".navbar-collapse\"); // See if it's visible\n\n\n        if (!btnToggle.classList.contains(\"collapsed\") && elNav.classList.contains(\"show\")) {\n          // Start the animation\n          elNav.style.height = elNav.getBoundingClientRect()[\"height\"] + \"px\";\n          setTimeout(function () {\n            elNav.classList.add(\"collapsing\");\n            elNav.classList.remove(\"collapse\");\n            elNav.classList.remove(\"show\");\n            elNav.style.height = \"\";\n            btnToggle.classList.add(\"collapsed\");\n          }, 10); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n          }, 250);\n        } else {\n          // Start the animation\n          elNav.classList.remove(\"collapse\");\n          elNav.classList.add(\"collapsing\");\n          elNav.style.height = _this.el.scrollHeight + \"px\";\n          btnToggle.classList.remove(\"collapsed\"); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n            elNav.classList.add(\"show\");\n            elNav.style.height = \"\";\n          }, 250);\n        }\n      });\n    } // Execute the event(s)\n\n\n    this.props.onRendered ? this.props.onRendered(this.el) : null;\n  }; // Configures search\n\n\n  _Navbar.prototype.configureSearch = function () {\n    // See if we are rendering a search box\n    var search = this.el.querySelector(\"form\");\n\n    if (search) {\n      if (this.props.enableSearch != false && this.props.searchBox) {\n        var props = this.props.searchBox || {}; // Update the searchbox\n\n        var searchbox = search.querySelector(\"input\");\n        searchbox.placeholder = props.placeholder || searchbox.placeholder;\n        searchbox.value = props.value || \"\";\n        props.btnText ? searchbox.setAttribute(\"aria-label\", props.btnText) : null; // See if we are rendering a button\n\n        var button = search.querySelector(\"button\");\n\n        if (props.hideButton == true) {\n          // Remove the button\n          search.removeChild(button);\n        } else {\n          // Set the button type class name\n          var className = button_1.ButtonClassNames.getByType(props.btnType);\n          className ? button.classList.add(className) : null;\n        }\n      } else {\n        // Remove the searchbox\n        search.parentNode.removeChild(search);\n      }\n    }\n  }; // Render the items\n\n\n  _Navbar.prototype.renderItems = function (itemTemplate) {\n    // Clear the list\n    this._items = []; // Create the navbar list\n\n    var list = this.el.querySelector(\"ul.navbar-nav\");\n\n    if (list) {\n      // Parse the items\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        // Create the item\n        var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n        this._items.push(item);\n\n        list.appendChild(item.el); // Call the render events\n\n        this.props.onItemRendered ? this.props.onItemRendered(item.el, items[i]) : null;\n      }\n    } // Create the navbar right list\n\n\n    list = this.el.querySelectorAll(\"ul.navbar-nav\")[1];\n\n    if (list) {\n      // See if no items exist\n      var items = this.props.itemsEnd || [];\n\n      if (items.length == 0) {\n        // Remove the element\n        list.remove();\n      } else {\n        // Parse the items\n        for (var i = 0; i < items.length; i++) {\n          // Create the item\n          var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n          this._items.push(item);\n\n          list.appendChild(item.el);\n        }\n      }\n    }\n  };\n  /**\r\n   * Public Methods\r\n   */\n  // Updates the navbar template type\n\n\n  _Navbar.prototype.setType = function (navbarType) {\n    // Remove the classes\n    this.el.classList.remove(\"navbar-dark\");\n    this.el.classList.remove(\"navbar-light\");\n    this.el.classList.remove(\"bg-dark\");\n    this.el.classList.remove(\"bg-light\");\n    this.el.classList.remove(\"bg-primary\");\n\n    this._btnSearch.classList.remove(\"btn-outline-info\");\n\n    this._btnSearch.classList.remove(\"btn-outline-light\");\n\n    this._btnSearch.classList.remove(\"btn-outline-primary\"); // See which classes to add\n\n\n    switch (navbarType) {\n      // Dark\n      case NavbarTypes.Dark:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-dark\");\n\n        this._btnSearch.classList.add(\"btn-outline-info\");\n\n        break;\n      // Primary\n\n      case NavbarTypes.Primary:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-primary\");\n\n        this._btnSearch.classList.add(\"btn-outline-light\");\n\n        break;\n      // Default - Light\n\n      default:\n        // Add the class\n        this.el.classList.add(\"navbar-light\");\n        this.el.classList.add(\"bg-light\");\n\n        this._btnSearch.classList.add(\"btn-outline-primary\");\n\n        break;\n    }\n  };\n\n  return _Navbar;\n}(base_1.Base);\n\nexports.Navbar = function (props, template, itemTemplate) {\n  return new _Navbar(props, template, itemTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/navbar/index.js?");
 
 /***/ }),