gd-bs 5.0.4 → 5.0.8

package/dist/gd-bs.d.ts

@@ -1,7 +1,7 @@
 // Generated by dts-bundle v0.7.3
 
 declare module 'gd-bs' {
-    import * as Components from "gd-bs/components";
+    import * as Components from "gd-bs/components/components";
     var tippy: Function;
     
     export {
@@ -9,7 +9,7 @@ declare module 'gd-bs' {
     }
 }
 
-declare module 'gd-bs/components' {
+declare module 'gd-bs/components/components' {
     export * from "gd-bs/components/accordion/types";
     export * from "gd-bs/components/alert/types";
     export * from "gd-bs/components/badge/types";
@@ -1597,6 +1597,7 @@ declare module 'gd-bs/components/listBox/types' {
             items: Array<IDropdownItem>;
             multi?: boolean;
             placeholder?: string;
+            onLoadData?: () => Array<IDropdownItem> | PromiseLike<Array<IDropdownItem>>;
             onChange?: (items: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
             value?: string | Array<string>;
     }
@@ -1891,8 +1892,10 @@ declare module 'gd-bs/components/nav/types' {
         * Navigation Link
         */
     export interface INavLink {
-            elTab: HTMLDivElement;
+            elTab: HTMLAnchorElement;
+            elTabContent: HTMLDivElement;
             isActive: boolean;
+            tabName: string;
             toggle: (fadeTabs?: boolean) => void;
     }
     

package/dist/gd-bs.js

@@ -1170,7 +1170,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.ListBox = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/listBox/templates.js\");\n/**\r\n * List Box\r\n * @property props - The list box properties.\r\n */\n\n\nvar _ListBox = function (_super) {\n  __extends(_ListBox, _super); // Constructor\n\n\n  function _ListBox(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._elLabel = null;\n    _this._elSearchBox = null;\n    _this._elDatalist = null;\n    _this._elValues = null;\n    _this._initFl = false;\n    _this._items = null;\n    _this._selectedItems = null; // Configure the list box\n\n    _this.configure(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent(); // Set the flag\n\n\n    _this._initFl = true;\n    return _this;\n  } // Configures the list box\n\n\n  _ListBox.prototype.configure = function () {\n    this._elLabel = this.el.querySelector(\"label\");\n    this._elSearchBox = this.el.querySelector(\"input\");\n    this._elDatalist = this.el.querySelector(\"datalist\");\n    this._elValues = this.el.querySelector(\"ul\"); // See if the placeholder exists\n\n    if (this.props.placeholder) {\n      // Update the placeholder\n      this._elSearchBox ? this._elSearchBox.placeholder = this.props.placeholder : null;\n    } // See if the id is set\n\n\n    if (this.props.id) {\n      // Update the ids\n      this.el.id = this.props.id;\n      this._elLabel ? this._elLabel.setAttribute(\"for\", this.props.id + \"-search\") : null;\n      this._elSearchBox ? this._elSearchBox.id = this.props.id + \"-search\" : null;\n      this._elSearchBox ? this._elSearchBox.setAttribute(\"list\", this.props.id + \"-list\") : null;\n      this._elDatalist ? this._elDatalist.id = this.props.id + \"-list\" : null;\n    } // See if the label exists\n\n\n    if (this._elLabel) {\n      if (this.props.label) {\n        this._elLabel.innerHTML = this.props.label;\n      } else {\n        // Remove the label\n        this.el.removeChild(this._elLabel);\n      }\n    } // See if this is read-only\n\n\n    if (this.props.isReadonly) {\n      // Disable the search box\n      this._elSearchBox ? this._elSearchBox.disabled = true : null;\n    } // Set the options\n\n\n    this.setOptions(this.props.items); // Set the value if it's been defined\n\n    if (this.props.value != undefined) {\n      this.setValue(this.props.value);\n    }\n  }; // Configures the events\n\n\n  _ListBox.prototype.configureEvents = function () {\n    var _this = this; // Set the change event on the search box\n\n\n    this._elSearchBox.addEventListener(\"input\", function (ev) {\n      var value = _this._elSearchBox.value; // Parse the items\n\n      for (var i = 0; i < _this._items.length; i++) {\n        var item = _this._items[i]; // See if this is the target item\n\n        if (item.text == value) {\n          // See if this is a multi-select\n          if (_this.props.multi) {\n            var existsFl = false; // Parse the selected items\n\n            for (var j = 0; j < _this._selectedItems.length; j++) {\n              var selectedItem = _this._selectedItems[j]; // See if this item is already selected\n\n              if (selectedItem.text == item.text) {\n                // Set the flag\n                existsFl = true;\n                break;\n              }\n            } // Ensure the item wasn't already selected\n\n\n            if (!existsFl) {\n              // Set the value\n              _this.setValue(_this._selectedItems.concat(item).sort(function (a, b) {\n                if (a.text < b.text) {\n                  return -1;\n                }\n\n                if (a.text > b.text) {\n                  return 1;\n                }\n\n                return 0;\n              })); // Call the change event\n\n\n              _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;\n            }\n          } else {\n            // Set the value\n            _this.setValue(value); // Call the change event\n\n\n            _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;\n          } // Clear the selected value\n\n\n          _this._elSearchBox.value = \"\"; // Bug - Edge (non-chromium)\n          // The menu is still visible, so we fill force a \"blur\" to hide the menu after selection\n\n          _this._elSearchBox.blur();\n        }\n      }\n    });\n  }; // Method to configure the item event\n\n\n  _ListBox.prototype.configureItemEvent = function (elRemove, elItem, item) {\n    var _this = this; // Ensure the remove element exists\n\n\n    if (elRemove) {\n      // Add a click event to the badge\n      var badge = elItem.querySelector(\".badge\");\n\n      if (badge) {\n        badge.addEventListener(\"click\", function (ev) {\n          // Remove the item\n          _this._elValues.removeChild(elItem); // Find the selected item\n\n\n          for (var i = 0; i < _this._selectedItems.length; i++) {\n            var selectedItem = _this._selectedItems[i]; // See if this is the target item\n\n            if (selectedItem.text == item.text) {\n              // Remove this item\n              _this._selectedItems.splice(i, 1); // Call the change event\n\n\n              _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;\n              break;\n            }\n          }\n        });\n      }\n    }\n  };\n  /**\r\n   * Public Interface\r\n   */\n\n\n  _ListBox.prototype.getValue = function () {\n    return this._selectedItems;\n  };\n\n  _ListBox.prototype.setOptions = function (items) {\n    if (items === void 0) {\n      items = [];\n    }\n\n    var elDatalist = this.el.querySelector(\"datalist\");\n\n    if (elDatalist) {\n      // Save a reference to the items\n      this._items = items; // Clear the options\n\n      while (elDatalist.firstChild) {\n        elDatalist.removeChild(elDatalist.firstChild);\n      } // Clear the value\n\n\n      this._elSearchBox.value = \"\";\n      this._selectedItems = []; // Parse the items\n\n      for (var i = 0; i < items.length; i++) {\n        var props = items[i]; // Add the option\n\n        var elOption = document.createElement(\"option\");\n        elOption.value = props.text;\n        elDatalist.appendChild(elOption); // See if the item is selected\n\n        if (props.isSelected) {\n          // Add the selected item\n          this._selectedItems.push(props);\n        }\n      } // See if items are selected\n\n\n      if (this._selectedItems.length > 0) {\n        // Set the value\n        this.setValue(this._selectedItems);\n      }\n    }\n  }; // Set the value\n\n\n  _ListBox.prototype.setValue = function (value) {\n    // Clear the items\n    this._selectedItems = [];\n\n    while (this._elValues.firstChild) {\n      this._elValues.removeChild(this._elValues.firstChild);\n    } // Parse the values\n\n\n    if (value) {\n      // Ensure this is an array\n      var values = typeof value === \"string\" || typeof value === \"number\" ? [value] : value; // Parse the values\n\n      for (var i = 0; i < values.length; i++) {\n        var itemValue = values[i];\n        itemValue = typeof itemValue === \"string\" || typeof itemValue === \"number\" ? itemValue : itemValue.text; // Parse the items\n\n        for (var j = 0; j < this._items.length; j++) {\n          var item = this._items[j]; // See if this is the target item\n\n          if (item.text == itemValue || item.value == itemValue) {\n            // Add the selected item\n            this._selectedItems.push(item); // Create the list item\n\n\n            var elItem = document.createElement(\"div\");\n            elItem.innerHTML = templates_1.HTMLItem;\n            elItem = elItem.firstChild;\n\n            this._elValues.appendChild(elItem); // Set the text value\n\n\n            var elRemove = elItem.querySelector(\"span\");\n\n            if (elRemove) {\n              var text = document.createTextNode(item.text);\n              elItem.insertBefore(text, elRemove);\n            } // See if this is read-only\n\n\n            if (this.props.isReadonly) {\n              // Delete the \"remove\" button\n              elItem.removeChild(elRemove);\n              elRemove = null;\n            } // Configure the event for this item\n\n\n            this.configureItemEvent(elRemove, elItem, item); // Break from the loop\n\n            break;\n          }\n        }\n      }\n    } // See if a change event exists\n\n\n    if (this._initFl && this.props.onChange) {\n      // Execute the change event\n      this.props.onChange(this.getValue());\n    }\n  };\n\n  return _ListBox;\n}(base_1.Base);\n\nexports.ListBox = function (props, template) {\n  return new _ListBox(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/listBox/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.ListBox = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/listBox/templates.js\");\n/**\r\n * List Box\r\n * @property props - The list box properties.\r\n */\n\n\nvar _ListBox = function (_super) {\n  __extends(_ListBox, _super); // Constructor\n\n\n  function _ListBox(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._elLabel = null;\n    _this._elSearchBox = null;\n    _this._elDatalist = null;\n    _this._elValues = null;\n    _this._initFl = false;\n    _this._items = null;\n    _this._selectedItems = null; // Configure the list box\n\n    _this.configure(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent(); // Set the flag\n\n\n    _this._initFl = true;\n    return _this;\n  } // Configures the list box\n\n\n  _ListBox.prototype.configure = function () {\n    this._elLabel = this.el.querySelector(\"label\");\n    this._elSearchBox = this.el.querySelector(\"input\");\n    this._elDatalist = this.el.querySelector(\"datalist\");\n    this._elValues = this.el.querySelector(\"ul\"); // See if the placeholder exists\n\n    if (this.props.placeholder) {\n      // Update the placeholder\n      this._elSearchBox ? this._elSearchBox.placeholder = this.props.placeholder : null;\n    } // See if the id is set\n\n\n    if (this.props.id) {\n      // Update the ids\n      this.el.id = this.props.id;\n      this._elLabel ? this._elLabel.setAttribute(\"for\", this.props.id + \"-search\") : null;\n      this._elSearchBox ? this._elSearchBox.id = this.props.id + \"-search\" : null;\n      this._elSearchBox ? this._elSearchBox.setAttribute(\"list\", this.props.id + \"-list\") : null;\n      this._elDatalist ? this._elDatalist.id = this.props.id + \"-list\" : null;\n    } // See if the label exists\n\n\n    if (this._elLabel) {\n      if (this.props.label) {\n        this._elLabel.innerHTML = this.props.label;\n      } else {\n        // Remove the label\n        this.el.removeChild(this._elLabel);\n      }\n    } // See if this is read-only\n\n\n    if (this.props.isReadonly) {\n      // Disable the search box\n      this._elSearchBox ? this._elSearchBox.disabled = true : null;\n    } // Set the options\n\n\n    this.setOptions(this.props.items); // Set the value if it's been defined\n\n    if (this.props.value != undefined) {\n      this.setValue(this.props.value);\n    }\n  }; // Configures the events\n\n\n  _ListBox.prototype.configureEvents = function () {\n    var _this = this; // Execute the load event\n\n\n    var returnVal = this.props.onLoadData ? this.props.onLoadData() : null;\n\n    if (returnVal) {\n      // See if a promise was returned\n      if (typeof returnVal.then === \"function\") {\n        // Wait for the promise to complete\n        returnVal.then(function (items) {\n          // Set the options\n          _this.setOptions(items);\n        });\n      } else {\n        // Set the options\n        this.setOptions(returnVal);\n      }\n    } // Set the change event on the search box\n\n\n    this._elSearchBox.addEventListener(\"input\", function (ev) {\n      var value = _this._elSearchBox.value; // Parse the items\n\n      for (var i = 0; i < _this._items.length; i++) {\n        var item = _this._items[i]; // See if this is the target item\n\n        if (item.text == value) {\n          // See if this is a multi-select\n          if (_this.props.multi) {\n            var existsFl = false; // Parse the selected items\n\n            for (var j = 0; j < _this._selectedItems.length; j++) {\n              var selectedItem = _this._selectedItems[j]; // See if this item is already selected\n\n              if (selectedItem.text == item.text) {\n                // Set the flag\n                existsFl = true;\n                break;\n              }\n            } // Ensure the item wasn't already selected\n\n\n            if (!existsFl) {\n              // Set the value\n              _this.setValue(_this._selectedItems.concat(item).sort(function (a, b) {\n                if (a.text < b.text) {\n                  return -1;\n                }\n\n                if (a.text > b.text) {\n                  return 1;\n                }\n\n                return 0;\n              })); // Call the change event\n\n\n              _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;\n            }\n          } else {\n            // Set the value\n            _this.setValue(value); // Call the change event\n\n\n            _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;\n          } // Clear the selected value\n\n\n          _this._elSearchBox.value = \"\"; // Bug - Edge (non-chromium)\n          // The menu is still visible, so we fill force a \"blur\" to hide the menu after selection\n\n          _this._elSearchBox.blur();\n        }\n      }\n    });\n  }; // Method to configure the item event\n\n\n  _ListBox.prototype.configureItemEvent = function (elRemove, elItem, item) {\n    var _this = this; // Ensure the remove element exists\n\n\n    if (elRemove) {\n      // Add a click event to the badge\n      var badge = elItem.querySelector(\".badge\");\n\n      if (badge) {\n        badge.addEventListener(\"click\", function (ev) {\n          // Remove the item\n          _this._elValues.removeChild(elItem); // Find the selected item\n\n\n          for (var i = 0; i < _this._selectedItems.length; i++) {\n            var selectedItem = _this._selectedItems[i]; // See if this is the target item\n\n            if (selectedItem.text == item.text) {\n              // Remove this item\n              _this._selectedItems.splice(i, 1); // Call the change event\n\n\n              _this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;\n              break;\n            }\n          }\n        });\n      }\n    }\n  };\n  /**\r\n   * Public Interface\r\n   */\n\n\n  _ListBox.prototype.getValue = function () {\n    return this._selectedItems;\n  };\n\n  _ListBox.prototype.setOptions = function (items) {\n    if (items === void 0) {\n      items = [];\n    }\n\n    var elDatalist = this.el.querySelector(\"datalist\");\n\n    if (elDatalist) {\n      // Save a reference to the items\n      this._items = items; // Clear the options\n\n      while (elDatalist.firstChild) {\n        elDatalist.removeChild(elDatalist.firstChild);\n      } // Clear the value\n\n\n      this._elSearchBox.value = \"\";\n      this._selectedItems = []; // Parse the items\n\n      for (var i = 0; i < items.length; i++) {\n        var props = items[i]; // Add the option\n\n        var elOption = document.createElement(\"option\");\n        elOption.value = props.text;\n        elDatalist.appendChild(elOption); // See if the item is selected\n\n        if (props.isSelected) {\n          // Add the selected item\n          this._selectedItems.push(props);\n        }\n      } // See if items are selected\n\n\n      if (this._selectedItems.length > 0) {\n        // Set the value\n        this.setValue(this._selectedItems);\n      }\n    }\n  }; // Set the value\n\n\n  _ListBox.prototype.setValue = function (value) {\n    // Clear the items\n    this._selectedItems = [];\n\n    while (this._elValues.firstChild) {\n      this._elValues.removeChild(this._elValues.firstChild);\n    } // Parse the values\n\n\n    if (value) {\n      // Ensure this is an array\n      var values = typeof value === \"string\" || typeof value === \"number\" ? [value] : value; // Parse the values\n\n      for (var i = 0; i < values.length; i++) {\n        var itemValue = values[i];\n        itemValue = typeof itemValue === \"string\" || typeof itemValue === \"number\" ? itemValue : itemValue.text; // Parse the items\n\n        for (var j = 0; j < this._items.length; j++) {\n          var item = this._items[j]; // See if this is the target item\n\n          if (item.text == itemValue || item.value == itemValue) {\n            // Add the selected item\n            this._selectedItems.push(item); // Create the list item\n\n\n            var elItem = document.createElement(\"div\");\n            elItem.innerHTML = templates_1.HTMLItem;\n            elItem = elItem.firstChild;\n\n            this._elValues.appendChild(elItem); // Set the text value\n\n\n            var elRemove = elItem.querySelector(\"span\");\n\n            if (elRemove) {\n              var text = document.createTextNode(item.text);\n              elItem.insertBefore(text, elRemove);\n            } // See if this is read-only\n\n\n            if (this.props.isReadonly) {\n              // Delete the \"remove\" button\n              elItem.removeChild(elRemove);\n              elRemove = null;\n            } // Configure the event for this item\n\n\n            this.configureItemEvent(elRemove, elItem, item); // Break from the loop\n\n            break;\n          }\n        }\n      }\n    } // See if a change event exists\n\n\n    if (this._initFl && this.props.onChange) {\n      // Execute the change event\n      this.props.onChange(this.getValue());\n    }\n  };\n\n  return _ListBox;\n}(base_1.Base);\n\nexports.ListBox = function (props, template) {\n  return new _ListBox(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/listBox/index.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 = function (_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.elTab); // See if the fade option is enabled\n\n          if (this.props.fadeTabs) {\n            // Set the class name\n            link.elTab.classList.add(\"fade\"); // See if the tab is active\n\n            if (link.props.isActive) {\n              // Set the class name\n              link.elTab.classList.add(\"show\");\n            }\n          }\n        } // Call the render events\n\n\n        this.props.onLinkRendered ? this.props.onLinkRendered(link.el, links[i]) : null;\n        this.props.onTabRendered ? this.props.onTabRendered(link.elTab, 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.elTab.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 = function (_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?");
 
 /***/ }),
 
@@ -1258,7 +1258,7 @@ eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extend
 /***/ (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.NavLink = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/nav/templates.js\");\n/**\r\n * Nav Link\r\n */\n\n\nvar NavLink = function (_super) {\n  __extends(NavLink, _super); // Constructor\n\n\n  function NavLink(props, isTab, template) {\n    if (template === void 0) {\n      template = templates_1.HTMLLink;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._elLink = null;\n    _this._elTab = null; // See if this is for a tab\n\n    if (isTab) {\n      // Create the tab element\n      var el = document.createElement(\"div\");\n      el.innerHTML = templates_1.HTMLTab;\n      _this._elTab = el.firstChild;\n    } // Configure the item\n\n\n    _this.configure(); // Configure the events\n\n\n    _this.configureEvents();\n\n    return _this;\n  } // Configure the item\n\n\n  NavLink.prototype.configure = function () {\n    // Update the link\n    this._elLink = this.el.querySelector(\"a.nav-link\");\n\n    if (this._elLink) {\n      // Set the class names\n      common_1.setClassNames(this._elLink, this.props.className);\n      this.props.isActive ? this._elLink.classList.add(\"active\") : null;\n      this.props.isDisabled ? this._elLink.classList.add(\"disabled\") : null; // Set the html\n\n      this._elLink.innerHTML = this.props.title == null ? \"\" : this.props.title; // See if this is a tab\n\n      if (this._elTab) {\n        var tabId = this.props.title.replace(/[^a-zA-Z]/g, \"\"); // Set the properties\n\n        this._elLink.id = tabId + \"-tab\";\n\n        this._elLink.setAttribute(\"href\", \"#\" + tabId);\n\n        this._elLink.setAttribute(\"data-bs-toggle\", \"tab\");\n\n        this._elLink.setAttribute(\"aria-controls\", tabId);\n\n        this._elLink.innerHTML = this.props.title == null ? \"\" : this.props.title; // Update the tab\n\n        this._elTab.id = tabId;\n\n        this._elTab.setAttribute(\"aria-labelledby\", tabId);\n\n        this._elTab.setAttribute(\"data-title\", this.props.title || \"\"); // See if this tab is active\n\n\n        if (this.props.isActive) {\n          // Update the classes\n          this._elTab.classList.add(\"active\");\n        } // Append the content\n\n\n        common_1.appendContent(this._elTab, this.props.tabContent);\n      } else {\n        // Set the properties\n        this._elLink.setAttribute(\"href\", this.props.href || \"#\");\n      }\n    }\n  }; // Configures the events\n\n\n  NavLink.prototype.configureEvents = function () {\n    var _this = this; // Add a click event\n\n\n    this.el.addEventListener(\"click\", function (ev) {\n      // Prevent the page from moving to the top\n      ev.preventDefault(); // Execute the event\n\n      _this.props.onClick ? _this.props.onClick(_this.props, ev) : null;\n    }); // Execute the render events\n\n    this.props.onRender ? this.props.onRender(this._elLink, this.props) : null;\n    this._elTab && this.props.onRenderTab ? this.props.onRenderTab(this.props, this._elTab) : null;\n  };\n\n  Object.defineProperty(NavLink.prototype, \"elTab\", {\n    /**\r\n     * Public Interface\r\n     */\n    // The HTML tab element\n    get: function get() {\n      return this._elTab;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(NavLink.prototype, \"isActive\", {\n    // Returns true if the link is active\n    get: function get() {\n      return this._elLink.classList.contains(\"active\");\n    },\n    enumerable: false,\n    configurable: true\n  }); // Toggles a link\n\n  NavLink.prototype.toggle = function (fadeTabs) {\n    // See if this item is currently active\n    if (this.isActive) {\n      // Hide this link and tab\n      this._elLink.classList.remove(\"active\");\n\n      this._elTab.classList.remove(\"active\");\n\n      this._elTab.classList.remove(\"show\");\n    } else {\n      // Show this link and tab\n      this._elLink.classList.add(\"active\");\n\n      this._elTab.classList.add(\"active\");\n\n      fadeTabs ? this._elTab.classList.add(\"show\") : null;\n    }\n  };\n\n  return NavLink;\n}(base_1.Base);\n\nexports.NavLink = NavLink;\n\n//# sourceURL=webpack://gd-bs/./build/components/nav/link.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.NavLink = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/nav/templates.js\");\n/**\r\n * Nav Link\r\n */\n\n\nvar NavLink = function (_super) {\n  __extends(NavLink, _super); // Constructor\n\n\n  function NavLink(props, isTab, template) {\n    if (template === void 0) {\n      template = templates_1.HTMLLink;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._elLink = null;\n    _this._elTab = null; // See if this is for a tab\n\n    if (isTab) {\n      // Create the tab element\n      var el = document.createElement(\"div\");\n      el.innerHTML = templates_1.HTMLTab;\n      _this._elTab = el.firstChild;\n    } // Configure the item\n\n\n    _this.configure(); // Configure the events\n\n\n    _this.configureEvents();\n\n    return _this;\n  } // Configure the item\n\n\n  NavLink.prototype.configure = function () {\n    // Update the link\n    this._elLink = this.el.querySelector(\"a.nav-link\");\n\n    if (this._elLink) {\n      // Set the class names\n      common_1.setClassNames(this._elLink, this.props.className);\n      this.props.isActive ? this._elLink.classList.add(\"active\") : null;\n      this.props.isDisabled ? this._elLink.classList.add(\"disabled\") : null; // Set the html\n\n      this._elLink.innerHTML = this.props.title == null ? \"\" : this.props.title; // See if this is a tab\n\n      if (this._elTab) {\n        var tabId = this.props.title.replace(/[^a-zA-Z]/g, \"\"); // Set the properties\n\n        this._elLink.id = tabId + \"-tab\";\n\n        this._elLink.setAttribute(\"href\", \"#\" + tabId);\n\n        this._elLink.setAttribute(\"data-bs-toggle\", \"tab\");\n\n        this._elLink.setAttribute(\"aria-controls\", tabId);\n\n        this._elLink.innerHTML = this.props.title == null ? \"\" : this.props.title; // Update the tab\n\n        this._elTab.id = tabId;\n\n        this._elTab.setAttribute(\"aria-labelledby\", tabId);\n\n        this._elTab.setAttribute(\"data-title\", this.props.title || \"\"); // See if this tab is active\n\n\n        if (this.props.isActive) {\n          // Update the classes\n          this._elTab.classList.add(\"active\");\n        } // Append the content\n\n\n        common_1.appendContent(this._elTab, this.props.tabContent);\n      } else {\n        // Set the properties\n        this._elLink.setAttribute(\"href\", this.props.href || \"#\");\n      }\n    }\n  }; // Configures the events\n\n\n  NavLink.prototype.configureEvents = function () {\n    var _this = this; // Add a click event\n\n\n    this.el.addEventListener(\"click\", function (ev) {\n      // Prevent the page from moving to the top\n      ev.preventDefault(); // Execute the event\n\n      _this.props.onClick ? _this.props.onClick(_this.props, ev) : null;\n    }); // Execute the render events\n\n    this.props.onRender ? this.props.onRender(this._elLink, this.props) : null;\n    this._elTab && this.props.onRenderTab ? this.props.onRenderTab(this.props, this._elTab) : null;\n  };\n\n  Object.defineProperty(NavLink.prototype, \"elTab\", {\n    /**\r\n     * Public Interface\r\n     */\n    // The HTML tab element\n    get: function get() {\n      return this._elLink;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(NavLink.prototype, \"elTabContent\", {\n    // The HTML tab content element\n    get: function get() {\n      return this._elTab;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(NavLink.prototype, \"isActive\", {\n    // Returns true if the link is active\n    get: function get() {\n      return this._elLink.classList.contains(\"active\");\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(NavLink.prototype, \"tabName\", {\n    // Gets the tab name\n    get: function get() {\n      return this._elLink.innerHTML.trim();\n    },\n    set: function set(value) {\n      this._elLink.innerHTML = (value || \"\").trim();\n    },\n    enumerable: false,\n    configurable: true\n  }); // Toggles a link\n\n  NavLink.prototype.toggle = function (fadeTabs) {\n    // See if this item is currently active\n    if (this.isActive) {\n      // Hide this link and tab\n      this._elLink.classList.remove(\"active\");\n\n      this._elTab.classList.remove(\"active\");\n\n      this._elTab.classList.remove(\"show\");\n    } else {\n      // Show this link and tab\n      this._elLink.classList.add(\"active\");\n\n      this._elTab.classList.add(\"active\");\n\n      fadeTabs ? this._elTab.classList.add(\"show\") : null;\n    }\n  };\n\n  return NavLink;\n}(base_1.Base);\n\nexports.NavLink = NavLink;\n\n//# sourceURL=webpack://gd-bs/./build/components/nav/link.js?");
 
 /***/ }),