gd-bs 5.2.3 → 5.2.7

package/dist/gd-bs.d.ts

@@ -375,6 +375,7 @@ declare module 'gd-bs/components/button/types' {
             data?: any;
             dismiss?: string;
             href?: string;
+            iconClassName?: string;
             iconSize?: number;
             iconType?: Function;
             id?: string;
@@ -1029,6 +1030,7 @@ declare module 'gd-bs/components/dropdown/types' {
             className?: string;
             data?: any;
             href?: string;
+            iconClassName?: string;
             iconSize?: number;
             iconType?: Function;
             isDisabled?: boolean;
@@ -2063,6 +2065,7 @@ declare module 'gd-bs/components/navbar/types' {
             classNameItem?: string;
             data?: any;
             href?: string;
+            iconClassName?: string;
             iconSize?: number;
             iconType?: Function;
             isActive?: boolean;
@@ -2933,6 +2936,7 @@ declare module 'gd-bs/components/tooltipGroup/types' {
         */
     export const TooltipGroup: (props: ITooltipGroupProps, template?: string, btnTemplate?: string) => ITooltipGroup;
     
+    import { ITippyProps } from "gd-bs/types";
     import { IBaseProps } from "gd-bs/components/types";
     import { ITooltip, ITooltipProps } from "gd-bs/components/tooltip/types";
     
@@ -2964,6 +2968,8 @@ declare module 'gd-bs/components/tooltipGroup/types' {
             isSmall?: boolean;
             isVertical?: boolean;
             label?: string;
+            tooltipOptions?: ITippyProps;
+            tooltipPlacement?: number;
             tooltipType?: number;
     }
 }

package/dist/gd-bs.js

@@ -796,7 +796,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\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.Button = exports.ButtonClassNames = exports.ButtonTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar badge_1 = __webpack_require__(/*! ../badge */ \"./build/components/badge/index.js\");\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./build/components/classNames.js\");\n\nvar spinner_1 = __webpack_require__(/*! ../spinner */ \"./build/components/spinner/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/button/templates.js\");\n/**\r\n * Button Types\r\n */\n\n\nvar ButtonTypes;\n\n(function (ButtonTypes) {\n  ButtonTypes[ButtonTypes[\"Danger\"] = 1] = \"Danger\";\n  ButtonTypes[ButtonTypes[\"Dark\"] = 2] = \"Dark\";\n  ButtonTypes[ButtonTypes[\"Info\"] = 3] = \"Info\";\n  ButtonTypes[ButtonTypes[\"Light\"] = 4] = \"Light\";\n  ButtonTypes[ButtonTypes[\"Link\"] = 5] = \"Link\";\n  ButtonTypes[ButtonTypes[\"Primary\"] = 6] = \"Primary\";\n  ButtonTypes[ButtonTypes[\"Secondary\"] = 7] = \"Secondary\";\n  ButtonTypes[ButtonTypes[\"Success\"] = 8] = \"Success\";\n  ButtonTypes[ButtonTypes[\"Warning\"] = 9] = \"Warning\";\n  ButtonTypes[ButtonTypes[\"OutlineDanger\"] = 10] = \"OutlineDanger\";\n  ButtonTypes[ButtonTypes[\"OutlineDark\"] = 11] = \"OutlineDark\";\n  ButtonTypes[ButtonTypes[\"OutlineInfo\"] = 12] = \"OutlineInfo\";\n  ButtonTypes[ButtonTypes[\"OutlineLight\"] = 13] = \"OutlineLight\";\n  ButtonTypes[ButtonTypes[\"OutlineLink\"] = 14] = \"OutlineLink\";\n  ButtonTypes[ButtonTypes[\"OutlinePrimary\"] = 15] = \"OutlinePrimary\";\n  ButtonTypes[ButtonTypes[\"OutlineSecondary\"] = 16] = \"OutlineSecondary\";\n  ButtonTypes[ButtonTypes[\"OutlineSuccess\"] = 17] = \"OutlineSuccess\";\n  ButtonTypes[ButtonTypes[\"OutlineWarning\"] = 18] = \"OutlineWarning\";\n})(ButtonTypes = exports.ButtonTypes || (exports.ButtonTypes = {}));\n/**\r\n * Button Classes\r\n */\n\n\nexports.ButtonClassNames = new classNames_1.ClassNames([\"btn-danger\", \"btn-dark\", \"btn-info\", \"btn-light\", \"btn-link\", \"btn-primary\", \"btn-secondary\", \"btn-success\", \"btn-warning\", \"btn-outline-danger\", \"btn-outline-dark\", \"btn-outline-info\", \"btn-outline-light\", \"btn-outline-link\", \"btn-outline-primary\", \"btn-outline-secondary\", \"btn-outline-success\", \"btn-outline-warning\"]);\n/**\r\n * Button\r\n * @param props The button properties.\r\n */\n\nvar _Button =\n/** @class */\nfunction (_super) {\n  __extends(_Button, _super); // Constructor\n\n\n  function _Button(props, template) {\n    if (template === void 0) {\n      template = props.isBlock ? templates_1.HTMLBlock : props.href || props.isLink ? templates_1.HTMLLink : templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this; // Configure the button\n\n\n    _this.configure(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the button\n\n\n  _Button.prototype.configure = function () {\n    // Add the class names\n    this.props.isLarge ? this.el.classList.add(\"btn-lg\") : null;\n    this.props.isSmall ? this.el.classList.add(\"btn-sm\") : null; // Set the default type\n\n    this.setType(this.props.type || ButtonTypes.Primary); // Set the attributes\n\n    this.props.dismiss ? this.el.setAttribute(\"data-bs-dismiss\", this.props.dismiss) : null;\n    this.props.href ? this.el.href = this.props.href : null;\n    this.props.id ? this.el.id = this.props.id : null;\n    this.props.isDisabled ? this.el.setAttribute(\"disabled\", \"disabled\") : null;\n    this.props.tabIndex != null ? this.el.setAttribute(\"tabindex\", this.props.tabIndex) : null;\n    this.props.target ? this.el.setAttribute(\"data-bs-target\", this.props.target) : null;\n    this.props.title ? this.el.title = this.props.title : null;\n    this.props.toggle ? this.el.setAttribute(\"data-bs-toggle\", this.props.toggle) : null;\n    this.props.trigger ? this.el.setAttribute(\"data-bs-trigger\", this.props.trigger) : null;\n    typeof this.props.isExpanded === \"boolean\" ? this.el.setAttribute(\"aria-expanded\", this.props.isExpanded ? \"true\" : \"false\") : null; // See if controls are defined\n\n    if (this.props.controls) {\n      // See if this is a string\n      if (typeof this.props.controls === \"string\") {\n        // Set the controls\n        this.el.setAttribute(\"aria-controls\", this.props.controls);\n      } else {\n        // Set the controls\n        this.el.setAttribute(\"aria-controls\", this.props.controls.join(' '));\n      }\n    } // Set the text\n\n\n    this.setText(this.props.text); // Set the icon if it exists\n\n    if (this.props.iconType) {\n      if (typeof this.props.iconType === \"function\") {\n        // Append the icon\n        this.el.prepend(this.props.iconType(this.props.iconSize, this.props.iconSize)); // Update the styling of the button\n\n        this.el.classList.add(\"btn-icon\");\n      } // Else, it's an element\n      else if (_typeof(this.props.iconType === \"object\")) {\n        // Append the icon\n        this.el.prepend(this.props.iconType);\n      }\n    } // See if this is a spinner\n\n\n    if (this.props.spinnerProps) {\n      // Set the element to render to\n      this.props.spinnerProps.el = this.el; // Render the spinner\n\n      spinner_1.Spinner(this.props.spinnerProps);\n    } // See if there is a badge\n\n\n    if (this.props.badge) {\n      // Default the type\n      this.props.badge.type = this.props.badge.type || badge_1.BadgeTypes.Light; // Render the badge\n\n      this.el.appendChild(badge_1.Badge(this.props.badge).el);\n    }\n  }; // Configure the events\n\n\n  _Button.prototype.configureEvents = function () {\n    var _this = this; // See if there is a click event\n\n\n    if (this.props.onClick) {\n      // Add a click event\n      this.el.addEventListener(\"click\", function (ev) {\n        // Call the click event\n        _this.props.onClick(_this.props, ev);\n      });\n    } // See if we are toggling anything\n\n\n    if (this.props.toggleObj && typeof this.props.toggleObj.toggle === \"function\") {\n      // Add a click event\n      this.el.addEventListener(\"click\", function (ev) {\n        // Toggle the object\n        _this.props.toggleObj.toggle();\n      });\n    }\n  };\n  /**\r\n   * Public Properties\r\n   */\n  // Disables the button\n\n\n  _Button.prototype.disable = function () {\n    this.el.disabled = true;\n  }; // Enables the button\n\n\n  _Button.prototype.enable = function () {\n    this.el.disabled = false;\n  }; // Sets the button text\n\n\n  _Button.prototype.setText = function (btnText) {\n    // Clear the element\n    while (this.el.firstChild) {\n      this.el.removeChild(this.el.firstChild);\n    } // Set the text\n\n\n    var elText = document.createTextNode(btnText == null ? \"\" : btnText); // Append the text\n\n    this.el.appendChild(elText);\n  }; // Sets the button type\n\n\n  _Button.prototype.setType = function (buttonType) {\n    var _this = this; // Parse the class names\n\n\n    exports.ButtonClassNames.parse(function (className) {\n      // Remove the class names\n      _this.el.classList.remove(className);\n    }); // Set the class name\n\n    var className = exports.ButtonClassNames.getByType(buttonType) || exports.ButtonClassNames.getByType(ButtonTypes.Primary);\n    this.el.classList.add(className);\n  }; // Toggles the button\n\n\n  _Button.prototype.toggle = function () {\n    var btn = this.el; // Toggle the element\n\n    btn.classList.contains(\"active\") ? btn.classList.remove(\"active\") : btn.classList.add(\"active\");\n  };\n\n  return _Button;\n}(base_1.Base);\n\nexports.Button = function (props, template) {\n  return new _Button(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/button/index.js?");
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\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.Button = exports.ButtonClassNames = exports.ButtonTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar badge_1 = __webpack_require__(/*! ../badge */ \"./build/components/badge/index.js\");\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./build/components/classNames.js\");\n\nvar spinner_1 = __webpack_require__(/*! ../spinner */ \"./build/components/spinner/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/button/templates.js\");\n/**\r\n * Button Types\r\n */\n\n\nvar ButtonTypes;\n\n(function (ButtonTypes) {\n  ButtonTypes[ButtonTypes[\"Danger\"] = 1] = \"Danger\";\n  ButtonTypes[ButtonTypes[\"Dark\"] = 2] = \"Dark\";\n  ButtonTypes[ButtonTypes[\"Info\"] = 3] = \"Info\";\n  ButtonTypes[ButtonTypes[\"Light\"] = 4] = \"Light\";\n  ButtonTypes[ButtonTypes[\"Link\"] = 5] = \"Link\";\n  ButtonTypes[ButtonTypes[\"Primary\"] = 6] = \"Primary\";\n  ButtonTypes[ButtonTypes[\"Secondary\"] = 7] = \"Secondary\";\n  ButtonTypes[ButtonTypes[\"Success\"] = 8] = \"Success\";\n  ButtonTypes[ButtonTypes[\"Warning\"] = 9] = \"Warning\";\n  ButtonTypes[ButtonTypes[\"OutlineDanger\"] = 10] = \"OutlineDanger\";\n  ButtonTypes[ButtonTypes[\"OutlineDark\"] = 11] = \"OutlineDark\";\n  ButtonTypes[ButtonTypes[\"OutlineInfo\"] = 12] = \"OutlineInfo\";\n  ButtonTypes[ButtonTypes[\"OutlineLight\"] = 13] = \"OutlineLight\";\n  ButtonTypes[ButtonTypes[\"OutlineLink\"] = 14] = \"OutlineLink\";\n  ButtonTypes[ButtonTypes[\"OutlinePrimary\"] = 15] = \"OutlinePrimary\";\n  ButtonTypes[ButtonTypes[\"OutlineSecondary\"] = 16] = \"OutlineSecondary\";\n  ButtonTypes[ButtonTypes[\"OutlineSuccess\"] = 17] = \"OutlineSuccess\";\n  ButtonTypes[ButtonTypes[\"OutlineWarning\"] = 18] = \"OutlineWarning\";\n})(ButtonTypes = exports.ButtonTypes || (exports.ButtonTypes = {}));\n/**\r\n * Button Classes\r\n */\n\n\nexports.ButtonClassNames = new classNames_1.ClassNames([\"btn-danger\", \"btn-dark\", \"btn-info\", \"btn-light\", \"btn-link\", \"btn-primary\", \"btn-secondary\", \"btn-success\", \"btn-warning\", \"btn-outline-danger\", \"btn-outline-dark\", \"btn-outline-info\", \"btn-outline-light\", \"btn-outline-link\", \"btn-outline-primary\", \"btn-outline-secondary\", \"btn-outline-success\", \"btn-outline-warning\"]);\n/**\r\n * Button\r\n * @param props The button properties.\r\n */\n\nvar _Button =\n/** @class */\nfunction (_super) {\n  __extends(_Button, _super); // Constructor\n\n\n  function _Button(props, template) {\n    if (template === void 0) {\n      template = props.isBlock ? templates_1.HTMLBlock : props.href || props.isLink ? templates_1.HTMLLink : templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this; // Configure the button\n\n\n    _this.configure(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the button\n\n\n  _Button.prototype.configure = function () {\n    // Add the class names\n    this.props.isLarge ? this.el.classList.add(\"btn-lg\") : null;\n    this.props.isSmall ? this.el.classList.add(\"btn-sm\") : null; // Set the default type\n\n    this.setType(this.props.type || ButtonTypes.Primary); // Set the attributes\n\n    this.props.dismiss ? this.el.setAttribute(\"data-bs-dismiss\", this.props.dismiss) : null;\n    this.props.href ? this.el.href = this.props.href : null;\n    this.props.id ? this.el.id = this.props.id : null;\n    this.props.isDisabled ? this.el.setAttribute(\"disabled\", \"disabled\") : null;\n    this.props.tabIndex != null ? this.el.setAttribute(\"tabindex\", this.props.tabIndex) : null;\n    this.props.target ? this.el.setAttribute(\"data-bs-target\", this.props.target) : null;\n    this.props.title ? this.el.title = this.props.title : null;\n    this.props.toggle ? this.el.setAttribute(\"data-bs-toggle\", this.props.toggle) : null;\n    this.props.trigger ? this.el.setAttribute(\"data-bs-trigger\", this.props.trigger) : null;\n    typeof this.props.isExpanded === \"boolean\" ? this.el.setAttribute(\"aria-expanded\", this.props.isExpanded ? \"true\" : \"false\") : null; // See if controls are defined\n\n    if (this.props.controls) {\n      // See if this is a string\n      if (typeof this.props.controls === \"string\") {\n        // Set the controls\n        this.el.setAttribute(\"aria-controls\", this.props.controls);\n      } else {\n        // Set the controls\n        this.el.setAttribute(\"aria-controls\", this.props.controls.join(' '));\n      }\n    } // Set the text\n\n\n    this.setText(this.props.text); // Set the icon if it exists\n\n    if (this.props.iconType) {\n      if (typeof this.props.iconType === \"function\") {\n        // Append the icon\n        this.el.prepend(this.props.iconType(this.props.iconSize, this.props.iconSize, this.props.iconClassName)); // Update the styling of the button\n\n        this.el.classList.add(\"btn-icon\");\n      } // Else, it's an element\n      else if (_typeof(this.props.iconType === \"object\")) {\n        // Append the icon\n        this.el.prepend(this.props.iconType);\n      }\n    } // See if this is a spinner\n\n\n    if (this.props.spinnerProps) {\n      // Set the element to render to\n      this.props.spinnerProps.el = this.el; // Render the spinner\n\n      spinner_1.Spinner(this.props.spinnerProps);\n    } // See if there is a badge\n\n\n    if (this.props.badge) {\n      // Default the type\n      this.props.badge.type = this.props.badge.type || badge_1.BadgeTypes.Light; // Render the badge\n\n      this.el.appendChild(badge_1.Badge(this.props.badge).el);\n    }\n  }; // Configure the events\n\n\n  _Button.prototype.configureEvents = function () {\n    var _this = this; // See if there is a click event\n\n\n    if (this.props.onClick) {\n      // Add a click event\n      this.el.addEventListener(\"click\", function (ev) {\n        // Call the click event\n        _this.props.onClick(_this.props, ev);\n      });\n    } // See if we are toggling anything\n\n\n    if (this.props.toggleObj && typeof this.props.toggleObj.toggle === \"function\") {\n      // Add a click event\n      this.el.addEventListener(\"click\", function (ev) {\n        // Toggle the object\n        _this.props.toggleObj.toggle();\n      });\n    }\n  };\n  /**\r\n   * Public Properties\r\n   */\n  // Disables the button\n\n\n  _Button.prototype.disable = function () {\n    this.el.disabled = true;\n  }; // Enables the button\n\n\n  _Button.prototype.enable = function () {\n    this.el.disabled = false;\n  }; // Sets the button text\n\n\n  _Button.prototype.setText = function (btnText) {\n    // Clear the element\n    while (this.el.firstChild) {\n      this.el.removeChild(this.el.firstChild);\n    } // Set the text\n\n\n    var elText = document.createTextNode(btnText == null ? \"\" : btnText); // Append the text\n\n    this.el.appendChild(elText);\n  }; // Sets the button type\n\n\n  _Button.prototype.setType = function (buttonType) {\n    var _this = this; // Parse the class names\n\n\n    exports.ButtonClassNames.parse(function (className) {\n      // Remove the class names\n      _this.el.classList.remove(className);\n    }); // Set the class name\n\n    var className = exports.ButtonClassNames.getByType(buttonType) || exports.ButtonClassNames.getByType(ButtonTypes.Primary);\n    this.el.classList.add(className);\n  }; // Toggles the button\n\n\n  _Button.prototype.toggle = function () {\n    var btn = this.el; // Toggle the element\n\n    btn.classList.contains(\"active\") ? btn.classList.remove(\"active\") : btn.classList.add(\"active\");\n  };\n\n  return _Button;\n}(base_1.Base);\n\nexports.Button = function (props, template) {\n  return new _Button(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/button/index.js?");
 
 /***/ }),
 
@@ -1005,7 +1005,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.Dropdown = exports.DropdownTypes = 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 popover_1 = __webpack_require__(/*! ../popover */ \"./build/components/popover/index.js\");\n\nvar formItem_1 = __webpack_require__(/*! ./formItem */ \"./build/components/dropdown/formItem.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/dropdown/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/dropdown/templates.js\");\n/**\r\n * Dropdown Types\r\n */\n\n\nexports.DropdownTypes = button_1.ButtonTypes; // Gets the template\n\nvar GetHTML = function GetHTML(props) {\n  // See if we are rendering items for a form\n  if (props.formFl) {\n    return templates_1.HTMLForm;\n  } // See if we are rendering for a nav bar\n\n\n  if (props.navFl) {\n    return templates_1.HTMLNavItem;\n  } // See if we are rendering a split button dropdown\n\n\n  if (props.isSplit) {\n    return templates_1.HTMLSplit;\n  } // Return the default template\n\n\n  return templates_1.HTML;\n};\n/**\r\n * Dropdown\r\n * @property props - The dropdown properties.\r\n */\n\n\nvar _Dropdown =\n/** @class */\nfunction (_super) {\n  __extends(_Dropdown, _super); // Constructor\n\n\n  function _Dropdown(props, template) {\n    if (template === void 0) {\n      template = GetHTML(props);\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._autoSelect = null;\n    _this._initFl = false;\n    _this._items = null;\n    _this._popover = null; // Handles the click event outside of the menu to close it\n\n    _this.handleClick = function (ev) {\n      // See if we clicked within the menu\n      if (!ev.composedPath().includes(_this._elMenu)) {\n        if (_this.isVisible) {\n          // Hide the menu\n          _this.toggle();\n        } else {\n          // Remove this event (This shouldn't happen, but to be safe)\n          document.body.removeEventListener(\"click\", _this.handleClick);\n        }\n      }\n    }; // Configure the dropdown\n\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  } // Configure the card group\n\n\n  _Dropdown.prototype.configure = function () {\n    // See if this is for a form\n    if (this.props.formFl) {\n      // Configure the dropdown for a form\n      this.configureForm();\n    } // Else, see if this is for a nav bar\n    else if (this.props.navFl) {\n      // Configure the dropdown for a nav bar\n      this.configureNavBar();\n    } else {\n      // Configure the dropdown\n      this.configureDefault();\n    } // Render the items\n\n\n    this.renderItems(); // Set the menu element\n\n    this._elMenu = this.el.querySelector(\".dropdown-menu\");\n\n    if (this._elMenu) {\n      // See if we are only rendering a menu\n      if (this.props.menuOnly) {\n        // Update the element\n        this.el = this._elMenu;\n      }\n    } // Set the dark theme\n\n\n    this.props.isDark ? this.setTheme(true) : null;\n  }; // Configures the dropdown\n\n\n  _Dropdown.prototype.configureDefault = function () {\n    // Set the attributes\n    this.props.title ? this.el.title = this.props.title : null;\n    this.props.dropLeft ? this.el.classList.add(\"dropstart\") : null;\n    this.props.dropRight ? this.el.classList.add(\"dropend\") : null;\n    this.props.dropUp ? this.el.classList.add(\"dropup\") : null; // Set the type\n\n    var btnType = button_1.ButtonClassNames.getByType(this.props.type) || button_1.ButtonClassNames.getByType(exports.DropdownTypes.Primary); // See if this is a split button\n\n    if (this.props.isSplit) {\n      // Update a label\n      var label = this.el.querySelector(\"button\");\n\n      if (label) {\n        label.classList.add(btnType);\n        label.disabled = this.props.isReadonly ? true : false;\n        label.innerHTML = this.props.label == null ? \"\" : this.props.label; // Set the click event to disable the postback\n\n        label.addEventListener(\"click\", function (ev) {\n          ev.preventDefault();\n        });\n      }\n    } else {\n      // Update the label\n      var label = this.el.querySelector(\".dropdown-toggle\");\n\n      if (label) {\n        label.innerHTML = this.props.label == null ? \"\" : this.props.label;\n      }\n    } // Update the dropdown\n\n\n    var toggle = this.el.querySelector(\".dropdown-toggle\");\n\n    if (toggle) {\n      toggle.classList.add(btnType);\n      toggle.disabled = this.props.isReadonly ? true : false;\n    } // See if we are rendering the menu only\n\n\n    var menu = this.el.querySelector(\".dropdown-menu\");\n\n    if (menu) {\n      // See if we are rendering the menu only\n      if (this.props.menuOnly) {\n        // Update the menu\n        this.props.id ? menu.id = this.props.id : null;\n        this.props.className ? menu.classList.add(this.props.className) : null;\n      } else {\n        // Update the menu\n        this.props.id ? menu.setAttribute(\"aria-labelledby\", this.props.id) : null;\n      } // See if a button class name exists\n\n\n      var classNames = (this.props.btnClassName || \"\").split(' ');\n\n      for (var i = 0; i < classNames.length; i++) {\n        // Ensure the class name exists\n        var className = classNames[i];\n\n        if (className) {\n          // Add the class name\n          (this.props.menuOnly ? menu : toggle).classList.add(className);\n        }\n      }\n    }\n  }; // Configure the events\n\n\n  _Dropdown.prototype.configureEvents = function () {\n    var _this = this; // Set the auto select property\n\n\n    this._autoSelect = typeof this.props.autoSelect === \"boolean\" ? this.props.autoSelect : true; // See if this is a select element and a change event exists\n\n    var menu = this.el.querySelector(\"select\");\n\n    if (menu) {\n      // Add a change event\n      menu.addEventListener(\"change\", function (ev) {\n        // See if multiple options are allowed\n        if (_this.props.multi == true) {\n          // See if we are selecting the values\n          if (_this._autoSelect) {\n            // Parse the items\n            for (var i = 0; i < _this._items.length; i++) {\n              var item = _this._items[i]; // Update the flag\n\n              item.isSelected = item.el.selected;\n            }\n          } // Call the change event\n\n\n          _this.props.onChange ? _this.props.onChange(_this.getValue(), ev) : null;\n        } else {\n          // Get the selected value\n          var selectedValue = (ev.target.value || \"\").trim(); // Parse the items\n\n          for (var i = 0; i < _this._items.length; i++) {\n            var item = _this._items[i]; // Replace special characters\n\n            var value = item.props.text || \"\"; // See if this item was selected\n\n            if (selectedValue == value) {\n              // Ensure this item is selected\n              if (_this._autoSelect && !item.isSelected) {\n                item.toggle();\n              } // Call the change event\n\n\n              _this.props.onChange ? _this.props.onChange(item.props, ev) : null;\n            } else {\n              // Unselect the other values\n              if (_this._autoSelect && item.isSelected) {\n                item.toggle();\n              }\n            }\n          }\n        }\n      });\n    } // Get the toggle\n\n\n    var toggle = this.el.querySelector(\".dropdown-toggle\");\n\n    if (toggle && this._elMenu) {\n      // Set the type, based on the current dropdown type\n      var popoverType = popover_1.PopoverTypes.Light;\n\n      switch (this.props.type) {\n        case exports.DropdownTypes.Danger:\n        case exports.DropdownTypes.OutlineDanger:\n          popoverType = popover_1.PopoverTypes.Danger;\n          break;\n\n        case exports.DropdownTypes.Dark:\n        case exports.DropdownTypes.OutlineDark:\n          popoverType = popover_1.PopoverTypes.Dark;\n          break;\n\n        case exports.DropdownTypes.Info:\n        case exports.DropdownTypes.OutlineInfo:\n          popoverType = popover_1.PopoverTypes.Info;\n          break;\n\n        case exports.DropdownTypes.Light:\n        case exports.DropdownTypes.OutlineLight:\n        case exports.DropdownTypes.Link:\n        case exports.DropdownTypes.OutlineLink:\n          popoverType = popover_1.PopoverTypes.Light;\n          break;\n\n        case exports.DropdownTypes.Primary:\n        case exports.DropdownTypes.OutlinePrimary:\n          popoverType = popover_1.PopoverTypes.Primary;\n          break;\n\n        case exports.DropdownTypes.Secondary:\n        case exports.DropdownTypes.OutlineSecondary:\n          popoverType = popover_1.PopoverTypes.Secondary;\n          break;\n\n        case exports.DropdownTypes.Success:\n        case exports.DropdownTypes.OutlineSuccess:\n          popoverType = popover_1.PopoverTypes.Success;\n          break;\n\n        case exports.DropdownTypes.Warning:\n        case exports.DropdownTypes.OutlineWarning:\n          popoverType = popover_1.PopoverTypes.Warning;\n          break;\n      } // Create the props\n\n\n      var props = {\n        target: toggle,\n        placement: popover_1.PopoverPlacements.LeftEnd,\n        type: popoverType,\n        options: {\n          arrow: false,\n          trigger: \"click\",\n          content: this._elMenu,\n          offset: [4, 0],\n          popperOptions: {\n            modifiers: [{\n              name: \"preventOverflow\",\n              options: {\n                altAxis: true,\n                tether: false\n              }\n            }]\n          }\n        }\n      }; // Call the render event\n\n      props = this.props.onMenuRendering ? this.props.onMenuRendering(props) : props; // Create a popover to display the menu\n\n      this._popover = popover_1.Popover(props);\n    }\n  }; // Configures the dropdown for a form\n\n\n  _Dropdown.prototype.configureForm = function () {\n    // Configure the label\n    var elLabel = this.el.querySelector(\"label\");\n\n    if (elLabel) {\n      var label = this.props.label == null ? \"\" : this.props.label;\n\n      if (label) {\n        // Set the label\n        elLabel.innerHTML = label;\n      } else {\n        // Remove the label\n        elLabel.parentNode.removeChild(elLabel);\n      }\n    } // Update the dropdown\n\n\n    var dropdown = this.el.querySelector(\"select\");\n\n    if (dropdown) {\n      dropdown.className = this.props.className || \"\";\n      dropdown.classList.add(\"form-select\");\n      dropdown.disabled = this.props.isReadonly ? true : false;\n      dropdown.multiple = this.props.multi ? true : false;\n      this.props.title ? dropdown.title = this.props.title : null;\n    }\n  }; // Configure the item events\n\n\n  _Dropdown.prototype.configureItemEvents = function (item) {\n    var _this = this; // Ensure this isn't a header/divider\n\n\n    if (item.props.isDivider || item.props.isHeader) {\n      return;\n    } // See if multi selections is not allowed\n\n\n    if (this.props.multi != true) {\n      // Add a click event\n      item.el.addEventListener(\"click\", function (ev) {\n        // See if an item was selected, and is disabled\n        if (item.props.isDisabled == true) {\n          // Ignore the click event\n          return;\n        } // Parse the items\n\n\n        for (var i = 0; i < _this._items.length; i++) {\n          var selectedItem = _this._items[i]; // Skip this item\n\n          if (item.el.innerHTML == selectedItem.el.innerHTML) {\n            continue;\n          } // Ensure this item is selected\n\n\n          if (selectedItem.isSelected) {\n            // Unselect the item\n            selectedItem.toggle();\n          }\n        }\n      });\n    } // Add a click event\n\n\n    item.el.addEventListener(\"click\", function (ev) {\n      // Prevent other events to occur\n      ev.stopPropagation(); // Toggle the menu if it's visible\n\n      _this.isVisible ? _this.toggle() : null; // Execute the event\n\n      _this.props.onChange ? _this.props.onChange(_this.getValue(), ev) : null;\n    });\n  }; // Configures the dropdown for a nav bar\n\n\n  _Dropdown.prototype.configureNavBar = function () {\n    // Update the link\n    var link = this.el.querySelector(\"a\");\n\n    if (link) {\n      link.id = (\"navbarDDL\" + (this.props.label == null ? \"\" : this.props.label)).replace(/ /g, '');\n      this.props.title ? link.title = this.props.title : null;\n      this.props.isReadonly ? link.setAttribute(\"aria-disabled\", \"true\") : null;\n      link.innerHTML = this.props.label == null ? \"\" : this.props.label;\n    } // See if we are rendering the menu only\n\n\n    var menu = this.el.querySelector(\".dropdown-menu\");\n\n    if (menu) {\n      if (this.props.menuOnly) {\n        // Update the menu\n        this.props.id ? menu.id = this.props.id : null;\n        menu.className = this.props.className ? this.props.className : \"\";\n        menu.classList.add(\"dropdown-menu\");\n      } else {\n        // Update the menu\n        this.props.id ? menu.setAttribute(\"aria-labelledby\", this.props.id) : null;\n      }\n    }\n  }; // Renders the items\n\n\n  _Dropdown.prototype.renderItems = function () {\n    // Clear the items\n    this._items = []; // Get the menu\n\n    var menu = this.el.querySelector(\".dropdown-menu\") || this.el.querySelector(\"select\");\n\n    if (menu) {\n      var isForm = menu.nodeName == \"SELECT\"; // Parse the items\n\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        // Create the item\n        var item = isForm ? new formItem_1.DropdownFormItem(items[i], this.props) : new item_1.DropdownItem(items[i], this.props);\n\n        this._items.push(item); // See if this isn't for a form\n\n\n        if (!isForm) {\n          // Configure the item events\n          this.configureItemEvents(item);\n        } // Add the item to the menu\n\n\n        menu.appendChild(item.el);\n      } // See if this is a form\n\n\n      if (isForm) {\n        // Ensure the selected values match the index\n        var idx = menu.selectedIndex;\n\n        if (this._items[idx] && this._items[idx].isSelected == false) {\n          // Select the item\n          this._items[idx].toggle();\n        }\n      }\n    }\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Disables the button\n\n\n  _Dropdown.prototype.disable = function () {\n    // Get the buttons\n    var buttons = this.el.querySelectorAll(\"button\");\n\n    for (var i = 0; i < buttons.length; i++) {\n      // Disable the button\n      buttons[i].disabled = true;\n    }\n  }; // Enables the button\n\n\n  _Dropdown.prototype.enable = function () {\n    // Get the buttons\n    var buttons = this.el.querySelectorAll(\"button\");\n\n    for (var i = 0; i < buttons.length; i++) {\n      // Enable the button\n      buttons[i].disabled = false;\n    }\n  }; // Gets the value\n\n\n  _Dropdown.prototype.getValue = function () {\n    var values = []; // Parse the items\n\n    for (var i = 0; i < this._items.length; i++) {\n      var item = this._items[i]; // See if this item is selected\n\n      if (item.isSelected) {\n        // Add the value\n        values.push(item.props);\n      }\n    } // Return the value\n\n\n    return this.props.multi ? values : values[0];\n  };\n\n  Object.defineProperty(_Dropdown.prototype, \"isMulti\", {\n    // Returns true if the dropdown allows multiple selections\n    get: function get() {\n      return this.props.multi;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(_Dropdown.prototype, \"isVisible\", {\n    // Returns true if the dropdown menu is visible\n    get: function get() {\n      return this._popover.tippy.state.isVisible;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(_Dropdown.prototype, \"popover\", {\n    // The popover menu\n    get: function get() {\n      return this._popover;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Sets the dropdown items\n\n  _Dropdown.prototype.setItems = function (newItems) {\n    if (newItems === void 0) {\n      newItems = [];\n    } // Update the properties\n\n\n    this.props.items = newItems; // Get the menu\n\n    var menu = this.el.querySelector(\".dropdown-menu\") || this.el.querySelector(\"select\");\n\n    if (menu) {\n      // Clear the menu\n      while (menu.firstChild) {\n        menu.removeChild(menu.firstChild);\n      } // Clear the current value\n\n\n      menu.value = \"\"; // Render the items\n\n      this.renderItems(); // Parse the items\n\n      for (var i = 0; i < newItems.length; i++) {\n        var item = newItems[i]; // See if the item is selected\n\n        if (item.isSelected) {\n          menu.value = item.text;\n          break;\n        }\n      }\n    }\n  }; // Enables/Disables the dark theme\n\n\n  _Dropdown.prototype.setTheme = function (isDark) {\n    // Get the menu\n    // See if we are setting the dark theme\n    if (isDark) {\n      // Set the theme\n      this._elMenu.classList.add(\"dropdown-menu-dark\");\n    } else {\n      // Set the theme\n      this._elMenu.classList.remove(\"dropdown-menu-dark\");\n    }\n  }; // Sets the button type\n\n\n  _Dropdown.prototype.setType = function (ddlType) {\n    // Parse the element types to search for\n    var elTypes = [\"button\", \".dropdown-toggle\"];\n\n    var _loop_1 = function _loop_1(i) {\n      var el = this_1.el.querySelector(elTypes[i]);\n\n      if (el) {\n        // Parse the class names\n        button_1.ButtonClassNames.parse(function (className) {\n          // Remove the class names\n          el.classList.remove(className);\n        }); // Set the class name\n\n        var className = button_1.ButtonClassNames.getByType(ddlType);\n        className ? el.classList.add(className) : null;\n      }\n    };\n\n    var this_1 = this;\n\n    for (var i = 0; i < elTypes.length; i++) {\n      _loop_1(i);\n    }\n  }; // Sets the dropdown value\n\n\n  _Dropdown.prototype.setValue = function (value) {\n    // Ensure it's an array\n    var values = value == null ? [] : typeof value.length === \"number\" && typeof value !== \"string\" ? value : [value]; // Parse the items\n\n    for (var i = 0; i < this._items.length; i++) {\n      var item = this._items[i]; // Toggle checked items\n\n      item.isSelected ? item.toggle() : null;\n    } // Parse the values\n\n\n    for (var i = 0; i < values.length; i++) {\n      var value_1 = values[i];\n      var ddlText = value_1 ? value_1.text || value_1 : null;\n      var ddlValue = value_1 ? value_1.value || value_1 : null; // 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.props.value == undefined) {\n          // Select this item if the text matches\n          item.props.text == ddlText ? item.toggle() : null;\n        } else {\n          // Select this item if the value matches\n          item.props.value == ddlValue ? item.toggle() : null;\n        }\n      }\n    } // See if this is a form\n\n\n    var ddl = this.el.querySelector(\"select\");\n\n    if (ddl) {\n      // Ensure the selected values match the index\n      if (this._items[ddl.selectedIndex] && this._items[ddl.selectedIndex].isSelected == false) {\n        // Select the item\n        this._items[ddl.selectedIndex].toggle();\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  }; // Toggles the menu\n\n\n  _Dropdown.prototype.toggle = function () {\n    // Toggle the popover\n    this._popover ? this._popover.toggle() : null;\n  };\n\n  return _Dropdown;\n}(base_1.Base);\n\nexports.Dropdown = function (props, template) {\n  return new _Dropdown(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/dropdown/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.Dropdown = exports.DropdownTypes = 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 popover_1 = __webpack_require__(/*! ../popover */ \"./build/components/popover/index.js\");\n\nvar formItem_1 = __webpack_require__(/*! ./formItem */ \"./build/components/dropdown/formItem.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/dropdown/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/dropdown/templates.js\");\n/**\r\n * Dropdown Types\r\n */\n\n\nexports.DropdownTypes = button_1.ButtonTypes; // Gets the template\n\nvar GetHTML = function GetHTML(props) {\n  // See if we are rendering items for a form\n  if (props.formFl) {\n    return templates_1.HTMLForm;\n  } // See if we are rendering for a nav bar\n\n\n  if (props.navFl) {\n    return templates_1.HTMLNavItem;\n  } // See if we are rendering a split button dropdown\n\n\n  if (props.isSplit) {\n    return templates_1.HTMLSplit;\n  } // Return the default template\n\n\n  return templates_1.HTML;\n};\n/**\r\n * Dropdown\r\n * @property props - The dropdown properties.\r\n */\n\n\nvar _Dropdown =\n/** @class */\nfunction (_super) {\n  __extends(_Dropdown, _super); // Constructor\n\n\n  function _Dropdown(props, template) {\n    if (template === void 0) {\n      template = GetHTML(props);\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._autoSelect = null;\n    _this._initFl = false;\n    _this._items = null;\n    _this._popover = null; // Handles the click event outside of the menu to close it\n\n    _this.handleClick = function (ev) {\n      // See if we clicked within the menu\n      if (!ev.composedPath().includes(_this._elMenu)) {\n        if (_this.isVisible) {\n          // Hide the menu\n          _this.toggle();\n        } else {\n          // Remove this event (This shouldn't happen, but to be safe)\n          document.body.removeEventListener(\"click\", _this.handleClick);\n        }\n      }\n    }; // Configure the dropdown\n\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  } // Configure the card group\n\n\n  _Dropdown.prototype.configure = function () {\n    // See if this is for a form\n    if (this.props.formFl) {\n      // Configure the dropdown for a form\n      this.configureForm();\n    } // Else, see if this is for a nav bar\n    else if (this.props.navFl) {\n      // Configure the dropdown for a nav bar\n      this.configureNavBar();\n    } else {\n      // Configure the dropdown\n      this.configureDefault();\n    } // Render the items\n\n\n    this.renderItems(); // Set the menu element\n\n    this._elMenu = this.el.querySelector(\".dropdown-menu\");\n\n    if (this._elMenu) {\n      // See if we are only rendering a menu\n      if (this.props.menuOnly) {\n        // Update the element\n        this.el = this._elMenu;\n      }\n    } // Set the dark theme\n\n\n    this.props.isDark ? this.setTheme(true) : null;\n  }; // Configures the dropdown\n\n\n  _Dropdown.prototype.configureDefault = function () {\n    // Set the attributes\n    this.props.title ? this.el.title = this.props.title : null;\n    this.props.dropLeft ? this.el.classList.add(\"dropstart\") : null;\n    this.props.dropRight ? this.el.classList.add(\"dropend\") : null;\n    this.props.dropUp ? this.el.classList.add(\"dropup\") : null; // Set the type\n\n    var btnType = button_1.ButtonClassNames.getByType(this.props.type) || button_1.ButtonClassNames.getByType(exports.DropdownTypes.Primary); // See if this is a split button\n\n    if (this.props.isSplit) {\n      // Update a label\n      var label = this.el.querySelector(\"button\");\n\n      if (label) {\n        label.classList.add(btnType);\n        label.disabled = this.props.isReadonly ? true : false;\n        label.innerHTML = this.props.label == null ? \"\" : this.props.label; // Set the click event to disable the postback\n\n        label.addEventListener(\"click\", function (ev) {\n          ev.preventDefault();\n        });\n      }\n    } else {\n      // Update the label\n      var label = this.el.querySelector(\".dropdown-toggle\");\n\n      if (label) {\n        label.innerHTML = this.props.label == null ? \"\" : this.props.label;\n      }\n    } // Update the dropdown\n\n\n    var toggle = this.el.querySelector(\".dropdown-toggle\");\n\n    if (toggle) {\n      toggle.classList.add(btnType);\n      toggle.disabled = this.props.isReadonly ? true : false;\n    } // See if we are rendering the menu only\n\n\n    var menu = this.el.querySelector(\".dropdown-menu\");\n\n    if (menu) {\n      // See if we are rendering the menu only\n      if (this.props.menuOnly) {\n        // Update the menu\n        this.props.id ? menu.id = this.props.id : null;\n        this.props.className ? menu.classList.add(this.props.className) : null;\n      } else {\n        // Update the menu\n        this.props.id ? menu.setAttribute(\"aria-labelledby\", this.props.id) : null;\n      } // See if a button class name exists\n\n\n      var classNames = (this.props.btnClassName || \"\").split(' ');\n\n      for (var i = 0; i < classNames.length; i++) {\n        // Ensure the class name exists\n        var className = classNames[i];\n\n        if (className) {\n          // Add the class name\n          (this.props.menuOnly ? menu : toggle).classList.add(className);\n        }\n      }\n    }\n  }; // Configure the events\n\n\n  _Dropdown.prototype.configureEvents = function () {\n    var _this = this; // Set the auto select property\n\n\n    this._autoSelect = typeof this.props.autoSelect === \"boolean\" ? this.props.autoSelect : true; // See if this is a select element and a change event exists\n\n    var menu = this.el.querySelector(\"select\");\n\n    if (menu) {\n      // Add a change event\n      menu.addEventListener(\"change\", function (ev) {\n        // See if multiple options are allowed\n        if (_this.props.multi == true) {\n          // See if we are selecting the values\n          if (_this._autoSelect) {\n            // Parse the items\n            for (var i = 0; i < _this._items.length; i++) {\n              var item = _this._items[i]; // Update the flag\n\n              item.isSelected = item.el.selected;\n            }\n          } // Call the change event\n\n\n          _this.props.onChange ? _this.props.onChange(_this.getValue(), ev) : null;\n        } else {\n          // Get the selected value\n          var selectedValue = (ev.target.value || \"\").trim(); // Parse the items\n\n          for (var i = 0; i < _this._items.length; i++) {\n            var item = _this._items[i]; // Replace special characters\n\n            var value = item.props.text || \"\"; // See if this item was selected\n\n            if (selectedValue == value) {\n              // Ensure this item is selected\n              if (_this._autoSelect && !item.isSelected) {\n                item.toggle();\n              } // Call the change event\n\n\n              _this.props.onChange ? _this.props.onChange(item.props, ev) : null;\n            } else {\n              // Unselect the other values\n              if (_this._autoSelect && item.isSelected) {\n                item.toggle();\n              }\n            }\n          }\n        }\n      });\n    } // Get the toggle\n\n\n    var toggle = this.el.querySelector(\".dropdown-toggle\");\n\n    if (toggle && this._elMenu) {\n      // Set the type, based on the current dropdown type\n      var popoverType = popover_1.PopoverTypes.Light;\n\n      switch (this.props.type) {\n        case exports.DropdownTypes.Danger:\n        case exports.DropdownTypes.OutlineDanger:\n          popoverType = popover_1.PopoverTypes.Danger;\n          break;\n\n        case exports.DropdownTypes.Dark:\n        case exports.DropdownTypes.OutlineDark:\n          popoverType = popover_1.PopoverTypes.Dark;\n          break;\n\n        case exports.DropdownTypes.Info:\n        case exports.DropdownTypes.OutlineInfo:\n          popoverType = popover_1.PopoverTypes.Info;\n          break;\n\n        case exports.DropdownTypes.Light:\n        case exports.DropdownTypes.OutlineLight:\n        case exports.DropdownTypes.Link:\n        case exports.DropdownTypes.OutlineLink:\n          popoverType = popover_1.PopoverTypes.Light;\n          break;\n\n        case exports.DropdownTypes.Primary:\n        case exports.DropdownTypes.OutlinePrimary:\n          popoverType = popover_1.PopoverTypes.Primary;\n          break;\n\n        case exports.DropdownTypes.Secondary:\n        case exports.DropdownTypes.OutlineSecondary:\n          popoverType = popover_1.PopoverTypes.Secondary;\n          break;\n\n        case exports.DropdownTypes.Success:\n        case exports.DropdownTypes.OutlineSuccess:\n          popoverType = popover_1.PopoverTypes.Success;\n          break;\n\n        case exports.DropdownTypes.Warning:\n        case exports.DropdownTypes.OutlineWarning:\n          popoverType = popover_1.PopoverTypes.Warning;\n          break;\n      } // Create the props\n\n\n      var props = {\n        target: toggle,\n        placement: popover_1.PopoverPlacements.BottomStart,\n        type: popoverType,\n        options: {\n          arrow: false,\n          trigger: \"click\",\n          content: this._elMenu,\n          offset: [0, 4]\n        }\n      }; // Call the render event\n\n      props = this.props.onMenuRendering ? this.props.onMenuRendering(props) : props; // Create a popover to display the menu\n\n      this._popover = popover_1.Popover(props);\n    }\n  }; // Configures the dropdown for a form\n\n\n  _Dropdown.prototype.configureForm = function () {\n    // Configure the label\n    var elLabel = this.el.querySelector(\"label\");\n\n    if (elLabel) {\n      var label = this.props.label == null ? \"\" : this.props.label;\n\n      if (label) {\n        // Set the label\n        elLabel.innerHTML = label;\n      } else {\n        // Remove the label\n        elLabel.parentNode.removeChild(elLabel);\n      }\n    } // Update the dropdown\n\n\n    var dropdown = this.el.querySelector(\"select\");\n\n    if (dropdown) {\n      dropdown.className = this.props.className || \"\";\n      dropdown.classList.add(\"form-select\");\n      dropdown.disabled = this.props.isReadonly ? true : false;\n      dropdown.multiple = this.props.multi ? true : false;\n      this.props.title ? dropdown.title = this.props.title : null;\n    }\n  }; // Configure the item events\n\n\n  _Dropdown.prototype.configureItemEvents = function (item) {\n    var _this = this; // Ensure this isn't a header/divider\n\n\n    if (item.props.isDivider || item.props.isHeader) {\n      return;\n    } // See if multi selections is not allowed\n\n\n    if (this.props.multi != true) {\n      // Add a click event\n      item.el.addEventListener(\"click\", function (ev) {\n        // See if an item was selected, and is disabled\n        if (item.props.isDisabled == true) {\n          // Ignore the click event\n          return;\n        } // Parse the items\n\n\n        for (var i = 0; i < _this._items.length; i++) {\n          var selectedItem = _this._items[i]; // Skip this item\n\n          if (item.el.innerHTML == selectedItem.el.innerHTML) {\n            continue;\n          } // Ensure this item is selected\n\n\n          if (selectedItem.isSelected) {\n            // Unselect the item\n            selectedItem.toggle();\n          }\n        }\n      });\n    } // Add a click event\n\n\n    item.el.addEventListener(\"click\", function (ev) {\n      // Prevent other events to occur\n      ev.stopPropagation(); // Toggle the menu if it's visible\n\n      _this.isVisible ? _this.toggle() : null; // Execute the event\n\n      _this.props.onChange ? _this.props.onChange(_this.getValue(), ev) : null;\n    });\n  }; // Configures the dropdown for a nav bar\n\n\n  _Dropdown.prototype.configureNavBar = function () {\n    // Update the link\n    var link = this.el.querySelector(\"a\");\n\n    if (link) {\n      link.id = (\"navbarDDL\" + (this.props.label == null ? \"\" : this.props.label)).replace(/ /g, '');\n      this.props.title ? link.title = this.props.title : null;\n      this.props.isReadonly ? link.setAttribute(\"aria-disabled\", \"true\") : null;\n      link.innerHTML = this.props.label == null ? \"\" : this.props.label;\n    } // See if we are rendering the menu only\n\n\n    var menu = this.el.querySelector(\".dropdown-menu\");\n\n    if (menu) {\n      if (this.props.menuOnly) {\n        // Update the menu\n        this.props.id ? menu.id = this.props.id : null;\n        menu.className = this.props.className ? this.props.className : \"\";\n        menu.classList.add(\"dropdown-menu\");\n      } else {\n        // Update the menu\n        this.props.id ? menu.setAttribute(\"aria-labelledby\", this.props.id) : null;\n      }\n    }\n  }; // Renders the items\n\n\n  _Dropdown.prototype.renderItems = function () {\n    // Clear the items\n    this._items = []; // Get the menu\n\n    var menu = this.el.querySelector(\".dropdown-menu\") || this.el.querySelector(\"select\");\n\n    if (menu) {\n      var isForm = menu.nodeName == \"SELECT\"; // Parse the items\n\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        // Create the item\n        var item = isForm ? new formItem_1.DropdownFormItem(items[i], this.props) : new item_1.DropdownItem(items[i], this.props);\n\n        this._items.push(item); // See if this isn't for a form\n\n\n        if (!isForm) {\n          // Configure the item events\n          this.configureItemEvents(item);\n        } // Add the item to the menu\n\n\n        menu.appendChild(item.el);\n      } // See if this is a form\n\n\n      if (isForm) {\n        // Ensure the selected values match the index\n        var idx = menu.selectedIndex;\n\n        if (this._items[idx] && this._items[idx].isSelected == false) {\n          // Select the item\n          this._items[idx].toggle();\n        }\n      }\n    }\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Disables the button\n\n\n  _Dropdown.prototype.disable = function () {\n    // Get the buttons\n    var buttons = this.el.querySelectorAll(\"button\");\n\n    for (var i = 0; i < buttons.length; i++) {\n      // Disable the button\n      buttons[i].disabled = true;\n    }\n  }; // Enables the button\n\n\n  _Dropdown.prototype.enable = function () {\n    // Get the buttons\n    var buttons = this.el.querySelectorAll(\"button\");\n\n    for (var i = 0; i < buttons.length; i++) {\n      // Enable the button\n      buttons[i].disabled = false;\n    }\n  }; // Gets the value\n\n\n  _Dropdown.prototype.getValue = function () {\n    var values = []; // Parse the items\n\n    for (var i = 0; i < this._items.length; i++) {\n      var item = this._items[i]; // See if this item is selected\n\n      if (item.isSelected) {\n        // Add the value\n        values.push(item.props);\n      }\n    } // Return the value\n\n\n    return this.props.multi ? values : values[0];\n  };\n\n  Object.defineProperty(_Dropdown.prototype, \"isMulti\", {\n    // Returns true if the dropdown allows multiple selections\n    get: function get() {\n      return this.props.multi;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(_Dropdown.prototype, \"isVisible\", {\n    // Returns true if the dropdown menu is visible\n    get: function get() {\n      return this._popover.tippy.state.isVisible;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(_Dropdown.prototype, \"popover\", {\n    // The popover menu\n    get: function get() {\n      return this._popover;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Sets the dropdown items\n\n  _Dropdown.prototype.setItems = function (newItems) {\n    if (newItems === void 0) {\n      newItems = [];\n    } // Update the properties\n\n\n    this.props.items = newItems; // Get the menu\n\n    var menu = this.el.querySelector(\".dropdown-menu\") || this.el.querySelector(\"select\");\n\n    if (menu) {\n      // Clear the menu\n      while (menu.firstChild) {\n        menu.removeChild(menu.firstChild);\n      } // Clear the current value\n\n\n      menu.value = \"\"; // Render the items\n\n      this.renderItems(); // Parse the items\n\n      for (var i = 0; i < newItems.length; i++) {\n        var item = newItems[i]; // See if the item is selected\n\n        if (item.isSelected) {\n          menu.value = item.text;\n          break;\n        }\n      }\n    }\n  }; // Enables/Disables the dark theme\n\n\n  _Dropdown.prototype.setTheme = function (isDark) {\n    // Get the menu\n    // See if we are setting the dark theme\n    if (isDark) {\n      // Set the theme\n      this._elMenu.classList.add(\"dropdown-menu-dark\");\n    } else {\n      // Set the theme\n      this._elMenu.classList.remove(\"dropdown-menu-dark\");\n    }\n  }; // Sets the button type\n\n\n  _Dropdown.prototype.setType = function (ddlType) {\n    // Parse the element types to search for\n    var elTypes = [\"button\", \".dropdown-toggle\"];\n\n    var _loop_1 = function _loop_1(i) {\n      var el = this_1.el.querySelector(elTypes[i]);\n\n      if (el) {\n        // Parse the class names\n        button_1.ButtonClassNames.parse(function (className) {\n          // Remove the class names\n          el.classList.remove(className);\n        }); // Set the class name\n\n        var className = button_1.ButtonClassNames.getByType(ddlType);\n        className ? el.classList.add(className) : null;\n      }\n    };\n\n    var this_1 = this;\n\n    for (var i = 0; i < elTypes.length; i++) {\n      _loop_1(i);\n    }\n  }; // Sets the dropdown value\n\n\n  _Dropdown.prototype.setValue = function (value) {\n    // Ensure it's an array\n    var values = value == null ? [] : typeof value.length === \"number\" && typeof value !== \"string\" ? value : [value]; // Parse the items\n\n    for (var i = 0; i < this._items.length; i++) {\n      var item = this._items[i]; // Toggle checked items\n\n      item.isSelected ? item.toggle() : null;\n    } // Parse the values\n\n\n    for (var i = 0; i < values.length; i++) {\n      var value_1 = values[i];\n      var ddlText = value_1 ? value_1.text || value_1 : null;\n      var ddlValue = value_1 ? value_1.value || value_1 : null; // 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.props.value == undefined) {\n          // Select this item if the text matches\n          item.props.text == ddlText ? item.toggle() : null;\n        } else {\n          // Select this item if the value matches\n          item.props.value == ddlValue ? item.toggle() : null;\n        }\n      }\n    } // See if this is a form\n\n\n    var ddl = this.el.querySelector(\"select\");\n\n    if (ddl) {\n      // Ensure the selected values match the index\n      if (this._items[ddl.selectedIndex] && this._items[ddl.selectedIndex].isSelected == false) {\n        // Select the item\n        this._items[ddl.selectedIndex].toggle();\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  }; // Toggles the menu\n\n\n  _Dropdown.prototype.toggle = function () {\n    // Toggle the popover\n    this._popover ? this._popover.toggle() : null;\n  };\n\n  return _Dropdown;\n}(base_1.Base);\n\nexports.Dropdown = function (props, template) {\n  return new _Dropdown(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/dropdown/index.js?");
 
 /***/ }),
 
@@ -1016,7 +1016,7 @@ eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extend
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.DropdownItem = void 0;\n/**\r\n * Dropdown Item\r\n */\n\nvar DropdownItem =\n/** @class */\nfunction () {\n  // Constructor\n  function DropdownItem(props, parent) {\n    this._el = null;\n    this._elLink = null;\n    this._isSelected = false;\n    this._parent = null;\n    this._props = null; // Save the properties\n\n    this._parent = parent;\n    this._props = props; // Configure the item\n\n    this.configure(); // Configure the events\n\n    this.configureEvents();\n  } // Configures the item\n\n\n  DropdownItem.prototype.configure = function () {\n    // See if this is a divider\n    if (this._props.isDivider) {\n      // Add the divider\n      this._el = document.createElement(\"div\");\n      this._el.className = this._props.className || \"\";\n\n      this._el.classList.add(\"dropdown-divider\");\n\n      this._props.isDisabled ? this._el.classList.add(\"disabled\") : null;\n    } // Else, see if this is a header\n    else if (this._props.isHeader) {\n      // Add the header\n      this._el = document.createElement(\"h6\");\n      this._el.className = this._props.className || \"\";\n\n      this._el.classList.add(\"dropdown-header\");\n\n      this._props.isDisabled ? this._el.classList.add(\"disabled\") : null;\n      this._el.innerText = this._props.text == null ? \"\" : this._props.text;\n    } else {\n      // See if we are rendering this in a nav bar\n      if (this._parent.navFl) {\n        // Create the link\n        this._elLink = document.createElement(\"a\");\n        this._elLink.className = this._props.className || \"\";\n\n        this._elLink.classList.add(\"dropdown-item\");\n\n        this._props.isDisabled ? this._elLink.classList.add(\"disabled\") : null;\n        this._props.target ? this._elLink.setAttribute(\"data-bs-target\", this._props.target) : null;\n        this._props.toggle ? this._elLink.setAttribute(\"data-bs-toggle\", this._props.toggle) : null;\n        this._elLink.href = this._props.href || \"#\";\n        this._elLink.innerText = this._props.text == null ? \"\" : this._props.text; // Add the item\n\n        this._el = document.createElement(\"li\");\n\n        this._el.appendChild(this._elLink);\n      } else {\n        // Create the item\n        this._elLink = document.createElement(\"a\");\n        this._elLink.className = this._props.className || \"\";\n\n        this._elLink.classList.add(\"dropdown-item\");\n\n        this._props.isDisabled ? this._elLink.classList.add(\"disabled\") : null;\n        this._props.target ? this._elLink.setAttribute(\"data-bs-target\", this._props.target) : null;\n        this._props.toggle ? this._elLink.setAttribute(\"data-bs-toggle\", this._props.toggle) : null;\n        this._elLink.href = this._props.href || \"#\";\n        this._elLink.innerText = this._props.text == null ? \"\" : this._props.text; // See if this item is selected\n\n        if (this._props.isSelected) {\n          // Select the item\n          this._elLink.classList.add(\"active\");\n        } // Else, see if a value exists\n        else if (this._parent.value != undefined) {\n          // Ensure it's an array\n          var values = this._parent.value && this._parent.value.length && typeof this._parent.value !== \"string\" ? this._parent.value : [this._parent.value]; // Parse the values\n\n          for (var j = 0; j < values.length; j++) {\n            var value = this._props.value == undefined ? this._props.text : this._props.value; // See if this item is selected\n\n            if (value == values[j]) {\n              // Select the item\n              this._elLink.classList.add(\"active\");\n\n              break;\n            }\n          }\n        } // Set the flag\n\n\n        this._isSelected = this._elLink.classList.contains(\"active\"); // Add the item\n\n        this._el = document.createElement(\"li\");\n\n        this._el.appendChild(this._elLink);\n      }\n    } // Set the icon if it exists\n\n\n    if (this.props.iconType) {\n      var elItem = this._elLink || this._el;\n      var iconSize = this.props.iconSize || 16; // See if it's a function\n\n      if (typeof this.props.iconType === \"function\") {\n        // Append the icon\n        elItem.prepend(this.props.iconType(iconSize, iconSize));\n      } // Else, it's an element\n      else if (_typeof(this.props.iconType === \"object\")) {\n        // Append the icon\n        elItem.prepend(this.props.iconType);\n      }\n    }\n  }; // Configures the events\n\n\n  DropdownItem.prototype.configureEvents = function () {\n    var _this = this; // Set the click event\n\n\n    this._el.addEventListener(\"click\", function (ev) {\n      // Prevent the page from moving to the top\n      ev.preventDefault(); // See if we are selecting items\n\n      if (_this._parent.autoSelect) {\n        // Toggle the item\n        _this.toggle();\n      } // See if there is a click event defined\n\n\n      if (_this._props.onClick) {\n        // Execute the event\n        _this._props.onClick(_this._props, ev);\n      }\n    });\n  };\n\n  Object.defineProperty(DropdownItem.prototype, \"el\", {\n    /**\r\n     * Public Interface\r\n     */\n    // The component HTML element\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(DropdownItem.prototype, \"isSelected\", {\n    // Returns true if the item is selected\n    get: function get() {\n      return this._isSelected;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(DropdownItem.prototype, \"props\", {\n    // The component properties\n    get: function get() {\n      return this._props;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Toggles the item selection\n\n  DropdownItem.prototype.toggle = function () {\n    // Skip the dividers, headers and nav items\n    if (this._props.isDivider || this._props.isHeader || this._parent.navFl) {\n      return;\n    } // Update the selected flag\n\n\n    this._isSelected = !this._isSelected; // Update the class\n\n    if (this._isSelected) {\n      // Add the active class\n      (this._elLink || this._el).classList.add(\"active\");\n    } else {\n      // Remove the active class\n      (this._elLink || this._el).classList.remove(\"active\");\n    }\n  };\n\n  return DropdownItem;\n}();\n\nexports.DropdownItem = DropdownItem;\n\n//# sourceURL=webpack://gd-bs/./build/components/dropdown/item.js?");
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.DropdownItem = void 0;\n/**\r\n * Dropdown Item\r\n */\n\nvar DropdownItem =\n/** @class */\nfunction () {\n  // Constructor\n  function DropdownItem(props, parent) {\n    this._el = null;\n    this._elLink = null;\n    this._isSelected = false;\n    this._parent = null;\n    this._props = null; // Save the properties\n\n    this._parent = parent;\n    this._props = props; // Configure the item\n\n    this.configure(); // Configure the events\n\n    this.configureEvents();\n  } // Configures the item\n\n\n  DropdownItem.prototype.configure = function () {\n    // See if this is a divider\n    if (this._props.isDivider) {\n      // Add the divider\n      this._el = document.createElement(\"div\");\n      this._el.className = this._props.className || \"\";\n\n      this._el.classList.add(\"dropdown-divider\");\n\n      this._props.isDisabled ? this._el.classList.add(\"disabled\") : null;\n    } // Else, see if this is a header\n    else if (this._props.isHeader) {\n      // Add the header\n      this._el = document.createElement(\"h6\");\n      this._el.className = this._props.className || \"\";\n\n      this._el.classList.add(\"dropdown-header\");\n\n      this._props.isDisabled ? this._el.classList.add(\"disabled\") : null;\n      this._el.innerText = this._props.text == null ? \"\" : this._props.text;\n    } else {\n      // See if we are rendering this in a nav bar\n      if (this._parent.navFl) {\n        // Create the link\n        this._elLink = document.createElement(\"a\");\n        this._elLink.className = this._props.className || \"\";\n\n        this._elLink.classList.add(\"dropdown-item\");\n\n        this._props.isDisabled ? this._elLink.classList.add(\"disabled\") : null;\n        this._props.target ? this._elLink.setAttribute(\"data-bs-target\", this._props.target) : null;\n        this._props.toggle ? this._elLink.setAttribute(\"data-bs-toggle\", this._props.toggle) : null;\n        this._elLink.href = this._props.href || \"#\";\n        this._elLink.innerText = this._props.text == null ? \"\" : this._props.text; // Add the item\n\n        this._el = document.createElement(\"li\");\n\n        this._el.appendChild(this._elLink);\n      } else {\n        // Create the item\n        this._elLink = document.createElement(\"a\");\n        this._elLink.className = this._props.className || \"\";\n\n        this._elLink.classList.add(\"dropdown-item\");\n\n        this._props.isDisabled ? this._elLink.classList.add(\"disabled\") : null;\n        this._props.target ? this._elLink.setAttribute(\"data-bs-target\", this._props.target) : null;\n        this._props.toggle ? this._elLink.setAttribute(\"data-bs-toggle\", this._props.toggle) : null;\n        this._elLink.href = this._props.href || \"#\";\n        this._elLink.innerText = this._props.text == null ? \"\" : this._props.text; // See if this item is selected\n\n        if (this._props.isSelected) {\n          // Select the item\n          this._elLink.classList.add(\"active\");\n        } // Else, see if a value exists\n        else if (this._parent.value != undefined) {\n          // Ensure it's an array\n          var values = this._parent.value && this._parent.value.length && typeof this._parent.value !== \"string\" ? this._parent.value : [this._parent.value]; // Parse the values\n\n          for (var j = 0; j < values.length; j++) {\n            var value = this._props.value == undefined ? this._props.text : this._props.value; // See if this item is selected\n\n            if (value == values[j]) {\n              // Select the item\n              this._elLink.classList.add(\"active\");\n\n              break;\n            }\n          }\n        } // Set the flag\n\n\n        this._isSelected = this._elLink.classList.contains(\"active\"); // Add the item\n\n        this._el = document.createElement(\"li\");\n\n        this._el.appendChild(this._elLink);\n      }\n    } // Set the icon if it exists\n\n\n    if (this.props.iconType) {\n      var elItem = this._elLink || this._el;\n      var iconSize = this.props.iconSize || 16; // See if it's a function\n\n      if (typeof this.props.iconType === \"function\") {\n        // Append the icon\n        elItem.prepend(this.props.iconType(iconSize, iconSize, this.props.iconClassName));\n      } // Else, it's an element\n      else if (_typeof(this.props.iconType === \"object\")) {\n        // Append the icon\n        elItem.prepend(this.props.iconType);\n      }\n    }\n  }; // Configures the events\n\n\n  DropdownItem.prototype.configureEvents = function () {\n    var _this = this; // Set the click event\n\n\n    this._el.addEventListener(\"click\", function (ev) {\n      // Prevent the page from moving to the top\n      ev.preventDefault(); // See if we are selecting items\n\n      if (_this._parent.autoSelect) {\n        // Toggle the item\n        _this.toggle();\n      } // See if there is a click event defined\n\n\n      if (_this._props.onClick) {\n        // Execute the event\n        _this._props.onClick(_this._props, ev);\n      }\n    });\n  };\n\n  Object.defineProperty(DropdownItem.prototype, \"el\", {\n    /**\r\n     * Public Interface\r\n     */\n    // The component HTML element\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(DropdownItem.prototype, \"isSelected\", {\n    // Returns true if the item is selected\n    get: function get() {\n      return this._isSelected;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(DropdownItem.prototype, \"props\", {\n    // The component properties\n    get: function get() {\n      return this._props;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Toggles the item selection\n\n  DropdownItem.prototype.toggle = function () {\n    // Skip the dividers, headers and nav items\n    if (this._props.isDivider || this._props.isHeader || this._parent.navFl) {\n      return;\n    } // Update the selected flag\n\n\n    this._isSelected = !this._isSelected; // Update the class\n\n    if (this._isSelected) {\n      // Add the active class\n      (this._elLink || this._el).classList.add(\"active\");\n    } else {\n      // Remove the active class\n      (this._elLink || this._el).classList.remove(\"active\");\n    }\n  };\n\n  return DropdownItem;\n}();\n\nexports.DropdownItem = DropdownItem;\n\n//# sourceURL=webpack://gd-bs/./build/components/dropdown/item.js?");
 
 /***/ }),
 
@@ -1291,7 +1291,7 @@ eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extend
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.NavbarItem = void 0;\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar dropdown_1 = __webpack_require__(/*! ../dropdown */ \"./build/components/dropdown/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/navbar/templates.js\");\n/**\r\n * Navbar Item\r\n */\n\n\nvar NavbarItem =\n/** @class */\nfunction () {\n  // Constructor\n  function NavbarItem(props, parent, template) {\n    if (template === void 0) {\n      template = props.isButton ? templates_1.HTMLItemButton : templates_1.HTMLItem;\n    }\n\n    this._el = null;\n    this._parent = null;\n    this._props = null; // Save the properties\n\n    this._parent = parent;\n    this._props = props; // Create the item\n\n    var el = document.createElement(\"div\");\n    el.innerHTML = template;\n    this._el = el.firstChild; // Configure the item\n\n    this.configure(); // Configure the events\n\n    this.configureEvents();\n  } // Configures the item\n\n\n  NavbarItem.prototype.configure = function () {\n    var link = null; // See if this is a dropdown\n\n    if (this._props.items) {\n      // Render a dropdown menu\n      this._el = dropdown_1.Dropdown({\n        isReadonly: this._props.isDisabled,\n        items: this._props.items,\n        label: this._props.text,\n        navFl: true,\n        onMenuRendering: this._props.onMenuRendering\n      }).el; // Update the link\n\n      link = this._el.querySelector(\".nav-link\");\n\n      if (link) {\n        this._props.isActive ? link.classList.add(\"active\") : null; // See if this is a button\n\n        if (this._props.isButton) {\n          link.classList.remove(\"nav-link\");\n          link.classList.add(\"btn\");\n          this._props.iconType ? link.classList.add(\"nav-icon\") : null;\n        }\n      }\n    } // Else, ensure there is text\n    else if (this._props.text) {\n      // Update the link\n      link = this._el.querySelector(\"a\");\n\n      if (link) {\n        this._props.isActive ? link.classList.add(\"active\") : link.removeChild(link.querySelector('span'));\n        link.innerHTML = this._props.text == null ? \"\" : this._props.text;\n      }\n    } // Set the class names\n\n\n    common_1.setClassNames(link, this._props.className);\n    common_1.setClassNames(this._el, this._props.classNameItem); // Update the link\n\n    if (link) {\n      this._props.target ? link.setAttribute(\"data-bs-target\", this._props.target) : null;\n      this._props.toggle ? link.setAttribute(\"data-bs-toggle\", this._props.toggle) : null; // See if the link is disabled\n\n      if (this._props.isDisabled) {\n        // Add the class and set the tab index\n        link.classList.add(\"disabled\");\n        link.setAttribute(\"aria-disabled\", \"true\");\n        link.tabIndex = -1;\n      } // Set the icon if it exists\n\n\n      if (this._props.iconType) {\n        var iconSize = this._props.iconSize || 16; // See if it's a function\n\n        if (typeof this._props.iconType === \"function\") {\n          // Append the icon\n          link.prepend(this._props.iconType(iconSize, iconSize));\n        } // Else, it's an element\n        else if (_typeof(this._props.iconType === \"object\")) {\n          // Append the icon\n          link.prepend(this._props.iconType);\n        }\n      }\n    }\n  }; // Configures the events\n\n\n  NavbarItem.prototype.configureEvents = function () {\n    var _this = this; // Ensure it's not disabled\n\n\n    if (this._props.isDisabled) {\n      return;\n    } // 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(); // See if we are toggling anything\n\n      if (_this._props.toggleObj && typeof _this._props.toggleObj.toggle === \"function\") {\n        // Toggle the object\n        _this._props.toggleObj.toggle();\n      } // Call the events\n\n\n      _this._props.onClick ? _this._props.onClick(_this._props, ev) : null;\n      _this._parent.onClick ? _this._parent.onClick(_this._props, ev) : null;\n    }); // Execute the render events\n\n\n    this._props.onRender ? this._props.onRender(this._el, this._props) : null;\n  };\n\n  Object.defineProperty(NavbarItem.prototype, \"el\", {\n    /**\r\n     * Public Interface\r\n     */\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return NavbarItem;\n}();\n\nexports.NavbarItem = NavbarItem;\n\n//# sourceURL=webpack://gd-bs/./build/components/navbar/item.js?");
+eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.NavbarItem = void 0;\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar dropdown_1 = __webpack_require__(/*! ../dropdown */ \"./build/components/dropdown/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/navbar/templates.js\");\n/**\r\n * Navbar Item\r\n */\n\n\nvar NavbarItem =\n/** @class */\nfunction () {\n  // Constructor\n  function NavbarItem(props, parent, template) {\n    if (template === void 0) {\n      template = props.isButton ? templates_1.HTMLItemButton : templates_1.HTMLItem;\n    }\n\n    this._el = null;\n    this._parent = null;\n    this._props = null; // Save the properties\n\n    this._parent = parent;\n    this._props = props; // Create the item\n\n    var el = document.createElement(\"div\");\n    el.innerHTML = template;\n    this._el = el.firstChild; // Configure the item\n\n    this.configure(); // Configure the events\n\n    this.configureEvents();\n  } // Configures the item\n\n\n  NavbarItem.prototype.configure = function () {\n    var link = null; // See if this is a dropdown\n\n    if (this._props.items) {\n      // Render a dropdown menu\n      this._el = dropdown_1.Dropdown({\n        isReadonly: this._props.isDisabled,\n        items: this._props.items,\n        label: this._props.text,\n        navFl: true,\n        onMenuRendering: this._props.onMenuRendering\n      }).el; // Update the link\n\n      link = this._el.querySelector(\".nav-link\");\n\n      if (link) {\n        this._props.isActive ? link.classList.add(\"active\") : null; // See if this is a button\n\n        if (this._props.isButton) {\n          link.classList.remove(\"nav-link\");\n          link.classList.add(\"btn\");\n          this._props.iconType ? link.classList.add(\"nav-icon\") : null;\n        }\n      }\n    } // Else, ensure there is text\n    else if (this._props.text) {\n      // Update the link\n      link = this._el.querySelector(\"a\");\n\n      if (link) {\n        this._props.isActive ? link.classList.add(\"active\") : link.removeChild(link.querySelector('span'));\n        link.innerHTML = this._props.text == null ? \"\" : this._props.text;\n      }\n    } // Set the class names\n\n\n    common_1.setClassNames(link, this._props.className);\n    common_1.setClassNames(this._el, this._props.classNameItem); // Update the link\n\n    if (link) {\n      this._props.target ? link.setAttribute(\"data-bs-target\", this._props.target) : null;\n      this._props.toggle ? link.setAttribute(\"data-bs-toggle\", this._props.toggle) : null; // See if the link is disabled\n\n      if (this._props.isDisabled) {\n        // Add the class and set the tab index\n        link.classList.add(\"disabled\");\n        link.setAttribute(\"aria-disabled\", \"true\");\n        link.tabIndex = -1;\n      } // Set the icon if it exists\n\n\n      if (this._props.iconType) {\n        var iconSize = this._props.iconSize || 16; // See if it's a function\n\n        if (typeof this._props.iconType === \"function\") {\n          // Append the icon\n          link.prepend(this._props.iconType(iconSize, iconSize, this._props.iconClassName));\n        } // Else, it's an element\n        else if (_typeof(this._props.iconType === \"object\")) {\n          // Append the icon\n          link.prepend(this._props.iconType);\n        }\n      }\n    }\n  }; // Configures the events\n\n\n  NavbarItem.prototype.configureEvents = function () {\n    var _this = this; // Ensure it's not disabled\n\n\n    if (this._props.isDisabled) {\n      return;\n    } // 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(); // See if we are toggling anything\n\n      if (_this._props.toggleObj && typeof _this._props.toggleObj.toggle === \"function\") {\n        // Toggle the object\n        _this._props.toggleObj.toggle();\n      } // Call the events\n\n\n      _this._props.onClick ? _this._props.onClick(_this._props, ev) : null;\n      _this._parent.onClick ? _this._parent.onClick(_this._props, ev) : null;\n    }); // Execute the render events\n\n\n    this._props.onRender ? this._props.onRender(this._el, this._props) : null;\n  };\n\n  Object.defineProperty(NavbarItem.prototype, \"el\", {\n    /**\r\n     * Public Interface\r\n     */\n    get: function get() {\n      return this._el;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return NavbarItem;\n}();\n\nexports.NavbarItem = NavbarItem;\n\n//# sourceURL=webpack://gd-bs/./build/components/navbar/item.js?");
 
 /***/ }),
 
@@ -1500,7 +1500,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.TooltipGroup = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar tooltip_1 = __webpack_require__(/*! ../tooltip */ \"./build/components/tooltip/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/tooltipGroup/templates.js\");\n/**\r\n * Tooltip Group\r\n * @property props - The tooltip group properties.\r\n */\n\n\nvar _TooltipGroup =\n/** @class */\nfunction (_super) {\n  __extends(_TooltipGroup, _super); // Constructor\n\n\n  function _TooltipGroup(props, template, btnTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._tooltips = null; // Configure the tooltip group\n\n    _this.configure(btnTemplate); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the tooltip group\n\n\n  _TooltipGroup.prototype.configure = function (btnTemplate) {\n    // Set the attributes\n    this.props.id ? this.el.id = this.props.id : null;\n    this.props.label ? this.el.setAttribute(\"aria-label\", this.props.label) : null; // Set the class names\n\n    this.el.classList.add(this.props.isVertical ? \"btn-group-vertical\" : \"btn-group\");\n    this.props.isLarge ? this.el.classList.add(\"btn-group-lg\") : null;\n    this.props.isSmall ? this.el.classList.add(\"btn-group-sm\") : null; // Render the tooltips\n\n    this.renderTooltips(btnTemplate);\n  }; // Render the tooltips\n\n\n  _TooltipGroup.prototype.renderTooltips = function (tooltipTemplate) {\n    // Clear the tooltips\n    this._tooltips = []; // Parse the tooltips\n\n    var tooltips = this.props.tooltips || [];\n\n    for (var i = 0; i < tooltips.length; i++) {\n      var tooltipProps = tooltips[i]; // Set the property\n\n      tooltipProps.type = tooltipProps.type || this.props.tooltipType; // See if the button props exists\n\n      if (tooltipProps.btnProps) {\n        // Set the button type\n        tooltipProps.btnProps.type = tooltipProps.btnProps.type || this.props.buttonType;\n      } // Create the tooltip\n\n\n      var tooltip = tooltip_1.Tooltip(tooltipProps, tooltipTemplate);\n\n      this._tooltips.push(tooltip); // Append the tooltip to the group\n\n\n      this.el.appendChild(tooltip.el);\n    }\n  };\n\n  Object.defineProperty(_TooltipGroup.prototype, \"tooltips\", {\n    /**\r\n     * Public Interface\r\n     */\n    // Reference to the tooltips\n    get: function get() {\n      return this._tooltips;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return _TooltipGroup;\n}(base_1.Base);\n\nexports.TooltipGroup = function (props, template, tooltipTemplate) {\n  return new _TooltipGroup(props, template, tooltipTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/tooltipGroup/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.TooltipGroup = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar tooltip_1 = __webpack_require__(/*! ../tooltip */ \"./build/components/tooltip/index.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/tooltipGroup/templates.js\");\n/**\r\n * Tooltip Group\r\n * @property props - The tooltip group properties.\r\n */\n\n\nvar _TooltipGroup =\n/** @class */\nfunction (_super) {\n  __extends(_TooltipGroup, _super); // Constructor\n\n\n  function _TooltipGroup(props, template, btnTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._tooltips = null; // Configure the tooltip group\n\n    _this.configure(btnTemplate); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the tooltip group\n\n\n  _TooltipGroup.prototype.configure = function (btnTemplate) {\n    // Set the attributes\n    this.props.id ? this.el.id = this.props.id : null;\n    this.props.label ? this.el.setAttribute(\"aria-label\", this.props.label) : null; // Set the class names\n\n    this.el.classList.add(this.props.isVertical ? \"btn-group-vertical\" : \"btn-group\");\n    this.props.isLarge ? this.el.classList.add(\"btn-group-lg\") : null;\n    this.props.isSmall ? this.el.classList.add(\"btn-group-sm\") : null; // Render the tooltips\n\n    this.renderTooltips(btnTemplate);\n  }; // Render the tooltips\n\n\n  _TooltipGroup.prototype.renderTooltips = function (tooltipTemplate) {\n    // Clear the tooltips\n    this._tooltips = []; // Parse the tooltips\n\n    var tooltips = this.props.tooltips || [];\n\n    for (var i = 0; i < tooltips.length; i++) {\n      var tooltipProps = tooltips[i]; // Set the properties\n\n      tooltipProps.options = tooltipProps.options || this.props.tooltipOptions;\n      tooltipProps.placement = tooltipProps.placement || this.props.tooltipPlacement;\n      tooltipProps.type = tooltipProps.type || this.props.tooltipType; // See if the button props exists\n\n      if (tooltipProps.btnProps) {\n        // Set the button type\n        tooltipProps.btnProps.type = tooltipProps.btnProps.type || this.props.buttonType;\n      } // Create the tooltip\n\n\n      var tooltip = tooltip_1.Tooltip(tooltipProps, tooltipTemplate);\n\n      this._tooltips.push(tooltip); // Append the tooltip to the group\n\n\n      this.el.appendChild(tooltip.el);\n    }\n  };\n\n  Object.defineProperty(_TooltipGroup.prototype, \"tooltips\", {\n    /**\r\n     * Public Interface\r\n     */\n    // Reference to the tooltips\n    get: function get() {\n      return this._tooltips;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return _TooltipGroup;\n}(base_1.Base);\n\nexports.TooltipGroup = function (props, template, tooltipTemplate) {\n  return new _TooltipGroup(props, template, tooltipTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/tooltipGroup/index.js?");
 
 /***/ }),
 
@@ -1522,7 +1522,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\nvar __assign = this && this.__assign || function () {\n  __assign = Object.assign || function (t) {\n    for (var s, i = 1, n = arguments.length; i < n; i++) {\n      s = arguments[i];\n\n      for (var p in s) {\n        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n      }\n    }\n\n    return t;\n  };\n\n  return __assign.apply(this, arguments);\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Tooltip = exports.TooltipPlacements = exports.TooltipTypes = void 0;\n\nvar tippy_js_1 = __webpack_require__(/*! tippy.js */ \"./node_modules/.pnpm/tippy.js@6.3.7/node_modules/tippy.js/dist/tippy.esm.js\");\n\nvar libs_1 = __webpack_require__(/*! ../../libs */ \"./build/libs.js\");\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/**\r\n * Tooltip Types\r\n */\n\n\nvar TooltipTypes;\n\n(function (TooltipTypes) {\n  TooltipTypes[TooltipTypes[\"Danger\"] = 1] = \"Danger\";\n  TooltipTypes[TooltipTypes[\"Dark\"] = 2] = \"Dark\";\n  TooltipTypes[TooltipTypes[\"Info\"] = 3] = \"Info\";\n  TooltipTypes[TooltipTypes[\"Light\"] = 4] = \"Light\";\n  TooltipTypes[TooltipTypes[\"LightBorder\"] = 5] = \"LightBorder\";\n  TooltipTypes[TooltipTypes[\"Material\"] = 6] = \"Material\";\n  TooltipTypes[TooltipTypes[\"Primary\"] = 7] = \"Primary\";\n  TooltipTypes[TooltipTypes[\"Secondary\"] = 8] = \"Secondary\";\n  TooltipTypes[TooltipTypes[\"Success\"] = 9] = \"Success\";\n  TooltipTypes[TooltipTypes[\"Translucent\"] = 10] = \"Translucent\";\n  TooltipTypes[TooltipTypes[\"Warning\"] = 11] = \"Warning\";\n})(TooltipTypes = exports.TooltipTypes || (exports.TooltipTypes = {}));\n/**\r\n * Tooltip Placements\r\n */\n\n\nvar TooltipPlacements;\n\n(function (TooltipPlacements) {\n  TooltipPlacements[TooltipPlacements[\"Auto\"] = 1] = \"Auto\";\n  TooltipPlacements[TooltipPlacements[\"AutoStart\"] = 2] = \"AutoStart\";\n  TooltipPlacements[TooltipPlacements[\"AutoEnd\"] = 3] = \"AutoEnd\";\n  TooltipPlacements[TooltipPlacements[\"Bottom\"] = 4] = \"Bottom\";\n  TooltipPlacements[TooltipPlacements[\"BottomStart\"] = 5] = \"BottomStart\";\n  TooltipPlacements[TooltipPlacements[\"BottomEnd\"] = 6] = \"BottomEnd\";\n  TooltipPlacements[TooltipPlacements[\"Left\"] = 7] = \"Left\";\n  TooltipPlacements[TooltipPlacements[\"LeftStart\"] = 8] = \"LeftStart\";\n  TooltipPlacements[TooltipPlacements[\"LeftEnd\"] = 9] = \"LeftEnd\";\n  TooltipPlacements[TooltipPlacements[\"Right\"] = 10] = \"Right\";\n  TooltipPlacements[TooltipPlacements[\"RightStart\"] = 11] = \"RightStart\";\n  TooltipPlacements[TooltipPlacements[\"RightEnd\"] = 12] = \"RightEnd\";\n  TooltipPlacements[TooltipPlacements[\"Top\"] = 13] = \"Top\";\n  TooltipPlacements[TooltipPlacements[\"TopStart\"] = 14] = \"TopStart\";\n  TooltipPlacements[TooltipPlacements[\"TopEnd\"] = 15] = \"TopEnd\";\n})(TooltipPlacements = exports.TooltipPlacements || (exports.TooltipPlacements = {}));\n/**\r\n * Tooltip\r\n */\n\n\nvar _Tooltip =\n/** @class */\nfunction (_super) {\n  __extends(_Tooltip, _super); // Constructor\n\n\n  function _Tooltip(props, template) {\n    if (template === void 0) {\n      template = \"\";\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._btn = null;\n    _this._elContent = null;\n    _this._tippy = null; // Configure the collapse\n\n    _this.configure(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the tooltip\n\n\n  _Tooltip.prototype.configure = function () {\n    // See if the target element was not defined\n    if (this.props.target == null) {\n      // Default the toggle property for the button\n      var btnProps = this.props.btnProps || {};\n      btnProps.type = btnProps.type || button_1.ButtonTypes.OutlineSecondary; // Create the button\n\n      this._btn = button_1.Button(btnProps); // Update the element\n\n      this.el = this._btn.el;\n    } // Configure the options\n\n\n    this.configureOptions();\n  }; // Configure the options\n\n\n  _Tooltip.prototype.configureOptions = function () {\n    var _this = this; // Set the placements\n\n\n    var placement = null;\n\n    switch (this.props.placement) {\n      // Auto\n      case TooltipPlacements.Auto:\n        placement = \"auto\";\n        break;\n\n      case TooltipPlacements.AutoEnd:\n        placement = \"auto-end\";\n        break;\n\n      case TooltipPlacements.AutoStart:\n        placement = \"auto-start\";\n        break;\n      // Bottom\n\n      case TooltipPlacements.Bottom:\n        placement = \"bottom\";\n        break;\n\n      case TooltipPlacements.BottomEnd:\n        placement = \"bottom-end\";\n        break;\n\n      case TooltipPlacements.BottomStart:\n        placement = \"bottom-start\";\n        break;\n      // Left\n\n      case TooltipPlacements.Left:\n        placement = \"left\";\n        break;\n\n      case TooltipPlacements.LeftEnd:\n        placement = \"left-end\";\n        break;\n\n      case TooltipPlacements.LeftStart:\n        placement = \"left-start\";\n        break;\n      // Right\n\n      case TooltipPlacements.Right:\n        placement = \"right\";\n        break;\n\n      case TooltipPlacements.RightEnd:\n        placement = \"right-end\";\n        break;\n\n      case TooltipPlacements.RightStart:\n        placement = \"right-start\";\n        break;\n      // Top\n\n      case TooltipPlacements.Top:\n        placement = \"top\";\n        break;\n\n      case TooltipPlacements.TopEnd:\n        placement = \"top-end\";\n        break;\n\n      case TooltipPlacements.TopStart:\n        placement = \"top-start\";\n        break;\n      // Default - Auto\n\n      default:\n        placement = \"top\";\n        break;\n    } // Set the theme\n\n\n    var theme = null;\n\n    switch (this.props.type) {\n      // Dark\n      case TooltipTypes.Dark:\n        theme = \"dark\";\n        break;\n      // Danger\n\n      case TooltipTypes.Danger:\n        theme = \"danger\";\n        break;\n      // Info\n\n      case TooltipTypes.Info:\n        theme = \"info\";\n        break;\n      // Light\n\n      case TooltipTypes.Light:\n        theme = \"light\";\n        break;\n\n      case TooltipTypes.LightBorder:\n        theme = \"light-border\";\n        break;\n      // Material\n\n      case TooltipTypes.Material:\n        theme = \"material\";\n        break;\n      // Primary\n\n      case TooltipTypes.Primary:\n        theme = \"primary\";\n        break;\n      // Secondary\n\n      case TooltipTypes.Secondary:\n        theme = \"secondary\";\n        break;\n      // Success\n\n      case TooltipTypes.Success:\n        theme = \"success\";\n        break;\n      // Translucent\n\n      case TooltipTypes.Translucent:\n        theme = \"translucent\";\n        break;\n      // Warning\n\n      case TooltipTypes.Warning:\n        theme = \"warning\";\n        break;\n      // Default - Secondary\n\n      default:\n        theme = \"secondary\";\n        break;\n    } // Set the options\n\n\n    var options = __assign({\n      allowHTML: false,\n      animation: \"scale\",\n      arrow: true,\n      content: this.props.content,\n      delay: 100,\n      inertia: true,\n      interactive: false,\n      placement: placement,\n      plugins: [tippy_js_1.animateFill, tippy_js_1.followCursor, tippy_js_1.inlinePositioning, tippy_js_1.sticky],\n      theme: theme\n    }, this.props.options); // Create the tooltip content element\n\n\n    this._elContent = document.createElement(\"div\");\n\n    this._elContent.classList.add(\"tooltip-content\");\n\n    common_1.appendContent(this._elContent, options.content);\n    options.content = this._elContent; // Set the on create event\n\n    options[\"onCreate\"] = function (tippyObj) {\n      // Get the content element\n      var elContent = tippyObj.popper.querySelector(\".tippy-content\");\n\n      if (elContent) {\n        // Set the class\n        elContent.classList.add(\"bs\"); // Get the custom class name(s)\n\n        var custom = (_this.props.className || \"\").trim().split(\" \");\n\n        for (var i = 0; i < custom.length; i++) {\n          var className = custom[i]; // Add the custom class name\n\n          className ? elContent.classList.add(custom[i]) : null;\n        }\n      } // Call the custom event if it's defined\n\n\n      _this.props.options && _this.props.options.onCreate ? _this.props.options.onCreate(tippyObj) : null;\n    }; // Create the tippy\n\n\n    this._tippy = libs_1.tippy(this.props.target || this.el, options);\n  };\n\n  Object.defineProperty(_Tooltip.prototype, \"button\", {\n    /**\r\n     * Public Interface\r\n     */\n    // Reference to the button\n    get: function get() {\n      return this._btn;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Disbles the tooltip\n\n  _Tooltip.prototype.disable = function () {\n    // Disable the button\n    this._btn ? this._btn.disable() : null;\n  }; // Enables the tooltip\n\n\n  _Tooltip.prototype.enable = function () {\n    // Enable the button\n    this._btn ? this._btn.enable() : null;\n  }; // Hides the tooltip\n\n\n  _Tooltip.prototype.hide = function () {\n    // See if it's visible\n    if (this.isVisible) {\n      this._tippy.hide();\n    }\n  };\n\n  Object.defineProperty(_Tooltip.prototype, \"isVisible\", {\n    // Determines if the tooltip is visible\n    get: function get() {\n      return this._tippy.state.isVisible;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(_Tooltip.prototype, \"tippy\", {\n    // The tippy instance\n    get: function get() {\n      return this._tippy;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Shows the tooltip\n\n  _Tooltip.prototype.show = function () {\n    // See if it's hidden\n    if (!this.isVisible) {\n      this._tippy.show();\n    }\n  }; // Toggles the tooltip\n\n\n  _Tooltip.prototype.toggle = function () {\n    // Toggle the element\n    if (this.isVisible) {\n      // Hide the element\n      this.hide();\n    } else {\n      // Show the element\n      this.show();\n    }\n  };\n\n  return _Tooltip;\n}(base_1.Base);\n\nexports.Tooltip = function (props, template) {\n  return new _Tooltip(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/tooltip/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\nvar __assign = this && this.__assign || function () {\n  __assign = Object.assign || function (t) {\n    for (var s, i = 1, n = arguments.length; i < n; i++) {\n      s = arguments[i];\n\n      for (var p in s) {\n        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n      }\n    }\n\n    return t;\n  };\n\n  return __assign.apply(this, arguments);\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Tooltip = exports.TooltipPlacements = exports.TooltipTypes = void 0;\n\nvar tippy_js_1 = __webpack_require__(/*! tippy.js */ \"./node_modules/.pnpm/tippy.js@6.3.7/node_modules/tippy.js/dist/tippy.esm.js\");\n\nvar libs_1 = __webpack_require__(/*! ../../libs */ \"./build/libs.js\");\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/**\r\n * Tooltip Types\r\n */\n\n\nvar TooltipTypes;\n\n(function (TooltipTypes) {\n  TooltipTypes[TooltipTypes[\"Danger\"] = 1] = \"Danger\";\n  TooltipTypes[TooltipTypes[\"Dark\"] = 2] = \"Dark\";\n  TooltipTypes[TooltipTypes[\"Info\"] = 3] = \"Info\";\n  TooltipTypes[TooltipTypes[\"Light\"] = 4] = \"Light\";\n  TooltipTypes[TooltipTypes[\"LightBorder\"] = 5] = \"LightBorder\";\n  TooltipTypes[TooltipTypes[\"Material\"] = 6] = \"Material\";\n  TooltipTypes[TooltipTypes[\"Primary\"] = 7] = \"Primary\";\n  TooltipTypes[TooltipTypes[\"Secondary\"] = 8] = \"Secondary\";\n  TooltipTypes[TooltipTypes[\"Success\"] = 9] = \"Success\";\n  TooltipTypes[TooltipTypes[\"Translucent\"] = 10] = \"Translucent\";\n  TooltipTypes[TooltipTypes[\"Warning\"] = 11] = \"Warning\";\n})(TooltipTypes = exports.TooltipTypes || (exports.TooltipTypes = {}));\n/**\r\n * Tooltip Placements\r\n */\n\n\nvar TooltipPlacements;\n\n(function (TooltipPlacements) {\n  TooltipPlacements[TooltipPlacements[\"Auto\"] = 1] = \"Auto\";\n  TooltipPlacements[TooltipPlacements[\"AutoStart\"] = 2] = \"AutoStart\";\n  TooltipPlacements[TooltipPlacements[\"AutoEnd\"] = 3] = \"AutoEnd\";\n  TooltipPlacements[TooltipPlacements[\"Bottom\"] = 4] = \"Bottom\";\n  TooltipPlacements[TooltipPlacements[\"BottomStart\"] = 5] = \"BottomStart\";\n  TooltipPlacements[TooltipPlacements[\"BottomEnd\"] = 6] = \"BottomEnd\";\n  TooltipPlacements[TooltipPlacements[\"Left\"] = 7] = \"Left\";\n  TooltipPlacements[TooltipPlacements[\"LeftStart\"] = 8] = \"LeftStart\";\n  TooltipPlacements[TooltipPlacements[\"LeftEnd\"] = 9] = \"LeftEnd\";\n  TooltipPlacements[TooltipPlacements[\"Right\"] = 10] = \"Right\";\n  TooltipPlacements[TooltipPlacements[\"RightStart\"] = 11] = \"RightStart\";\n  TooltipPlacements[TooltipPlacements[\"RightEnd\"] = 12] = \"RightEnd\";\n  TooltipPlacements[TooltipPlacements[\"Top\"] = 13] = \"Top\";\n  TooltipPlacements[TooltipPlacements[\"TopStart\"] = 14] = \"TopStart\";\n  TooltipPlacements[TooltipPlacements[\"TopEnd\"] = 15] = \"TopEnd\";\n})(TooltipPlacements = exports.TooltipPlacements || (exports.TooltipPlacements = {}));\n/**\r\n * Tooltip\r\n */\n\n\nvar _Tooltip =\n/** @class */\nfunction (_super) {\n  __extends(_Tooltip, _super); // Constructor\n\n\n  function _Tooltip(props, template) {\n    if (template === void 0) {\n      template = \"\";\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._btn = null;\n    _this._elContent = null;\n    _this._tippy = null; // Configure the collapse\n\n    _this.configure(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the tooltip\n\n\n  _Tooltip.prototype.configure = function () {\n    // See if the target element was not defined\n    if (this.props.target == null) {\n      // Default the toggle property for the button\n      var btnProps = this.props.btnProps || {};\n      btnProps.type = btnProps.type || button_1.ButtonTypes.OutlineSecondary; // Create the button\n\n      this._btn = button_1.Button(btnProps); // Update the element\n\n      this.el = this._btn.el;\n    } // Configure the options\n\n\n    this.configureOptions();\n  }; // Configure the options\n\n\n  _Tooltip.prototype.configureOptions = function () {\n    var _this = this; // Set the placements\n\n\n    var placement = null;\n\n    switch (this.props.placement) {\n      // Auto\n      case TooltipPlacements.Auto:\n        placement = \"auto\";\n        break;\n\n      case TooltipPlacements.AutoEnd:\n        placement = \"auto-end\";\n        break;\n\n      case TooltipPlacements.AutoStart:\n        placement = \"auto-start\";\n        break;\n      // Bottom\n\n      case TooltipPlacements.Bottom:\n        placement = \"bottom\";\n        break;\n\n      case TooltipPlacements.BottomEnd:\n        placement = \"bottom-end\";\n        break;\n\n      case TooltipPlacements.BottomStart:\n        placement = \"bottom-start\";\n        break;\n      // Left\n\n      case TooltipPlacements.Left:\n        placement = \"left\";\n        break;\n\n      case TooltipPlacements.LeftEnd:\n        placement = \"left-end\";\n        break;\n\n      case TooltipPlacements.LeftStart:\n        placement = \"left-start\";\n        break;\n      // Right\n\n      case TooltipPlacements.Right:\n        placement = \"right\";\n        break;\n\n      case TooltipPlacements.RightEnd:\n        placement = \"right-end\";\n        break;\n\n      case TooltipPlacements.RightStart:\n        placement = \"right-start\";\n        break;\n      // Top\n\n      case TooltipPlacements.Top:\n        placement = \"top\";\n        break;\n\n      case TooltipPlacements.TopEnd:\n        placement = \"top-end\";\n        break;\n\n      case TooltipPlacements.TopStart:\n        placement = \"top-start\";\n        break;\n      // Default - Auto\n\n      default:\n        placement = \"top\";\n        break;\n    } // Set the theme\n\n\n    var theme = null;\n\n    switch (this.props.type) {\n      // Danger\n      case TooltipTypes.Danger:\n        theme = \"danger\";\n        break;\n      // Dark\n\n      case TooltipTypes.Dark:\n        theme = \"dark\";\n        break;\n      // Info\n\n      case TooltipTypes.Info:\n        theme = \"info\";\n        break;\n      // Light\n\n      case TooltipTypes.Light:\n        theme = \"light\";\n        break;\n\n      case TooltipTypes.LightBorder:\n        theme = \"light-border\";\n        break;\n      // Material\n\n      case TooltipTypes.Material:\n        theme = \"material\";\n        break;\n      // Primary\n\n      case TooltipTypes.Primary:\n        theme = \"primary\";\n        break;\n      // Secondary\n\n      case TooltipTypes.Secondary:\n        theme = \"secondary\";\n        break;\n      // Success\n\n      case TooltipTypes.Success:\n        theme = \"success\";\n        break;\n      // Translucent\n\n      case TooltipTypes.Translucent:\n        theme = \"translucent\";\n        break;\n      // Warning\n\n      case TooltipTypes.Warning:\n        theme = \"warning\";\n        break;\n      // Default - Secondary\n\n      default:\n        // Set the default theme\n        theme = \"secondary\"; // See if a button exists\n\n        if (this.props.btnProps && this.props.btnProps.type > 0) {\n          // Match the theme to the button type\n          switch (this.props.type) {\n            // Danger\n            case button_1.ButtonTypes.Danger:\n            case button_1.ButtonTypes.OutlineDanger:\n              theme = \"danger\";\n              break;\n            // Dark\n\n            case button_1.ButtonTypes.Dark:\n            case button_1.ButtonTypes.OutlineDark:\n              theme = \"dark\";\n              break;\n            // Info\n\n            case button_1.ButtonTypes.Info:\n            case button_1.ButtonTypes.OutlineInfo:\n              theme = \"info\";\n              break;\n            // Light\n\n            case button_1.ButtonTypes.Light:\n            case button_1.ButtonTypes.OutlineLight:\n              theme = \"light\";\n              break;\n            // Link\n\n            case button_1.ButtonTypes.Link:\n            case button_1.ButtonTypes.OutlineLink:\n              theme = \"light-border\";\n              break;\n            // Primary\n\n            case button_1.ButtonTypes.Primary:\n            case button_1.ButtonTypes.OutlinePrimary:\n              theme = \"primary\";\n              break;\n            // Secondary\n\n            case button_1.ButtonTypes.Secondary:\n            case button_1.ButtonTypes.OutlineSecondary:\n              theme = \"secondary\";\n              break;\n            // Success\n\n            case button_1.ButtonTypes.Success:\n            case button_1.ButtonTypes.OutlineSuccess:\n              theme = \"success\";\n              break;\n            // Warning\n\n            case button_1.ButtonTypes.Warning:\n            case button_1.ButtonTypes.OutlineWarning:\n              theme = \"warning\";\n              break;\n          }\n        }\n\n        break;\n    } // Set the options\n\n\n    var options = __assign({\n      allowHTML: false,\n      animation: \"scale\",\n      arrow: true,\n      content: this.props.content,\n      delay: 100,\n      inertia: true,\n      interactive: false,\n      placement: placement,\n      plugins: [tippy_js_1.animateFill, tippy_js_1.followCursor, tippy_js_1.inlinePositioning, tippy_js_1.sticky],\n      theme: theme\n    }, this.props.options); // Create the tooltip content element\n\n\n    this._elContent = document.createElement(\"div\");\n\n    this._elContent.classList.add(\"tooltip-content\");\n\n    common_1.appendContent(this._elContent, options.content);\n    options.content = this._elContent; // Set the on create event\n\n    options[\"onCreate\"] = function (tippyObj) {\n      // Get the content element\n      var elContent = tippyObj.popper.querySelector(\".tippy-content\");\n\n      if (elContent) {\n        // Set the class\n        elContent.classList.add(\"bs\"); // Get the custom class name(s)\n\n        var custom = (_this.props.className || \"\").trim().split(\" \");\n\n        for (var i = 0; i < custom.length; i++) {\n          var className = custom[i]; // Add the custom class name\n\n          className ? elContent.classList.add(custom[i]) : null;\n        }\n      } // Call the custom event if it's defined\n\n\n      _this.props.options && _this.props.options.onCreate ? _this.props.options.onCreate(tippyObj) : null;\n    }; // Create the tippy\n\n\n    this._tippy = libs_1.tippy(this.props.target || this.el, options);\n  };\n\n  Object.defineProperty(_Tooltip.prototype, \"button\", {\n    /**\r\n     * Public Interface\r\n     */\n    // Reference to the button\n    get: function get() {\n      return this._btn;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Disbles the tooltip\n\n  _Tooltip.prototype.disable = function () {\n    // Disable the button\n    this._btn ? this._btn.disable() : null;\n  }; // Enables the tooltip\n\n\n  _Tooltip.prototype.enable = function () {\n    // Enable the button\n    this._btn ? this._btn.enable() : null;\n  }; // Hides the tooltip\n\n\n  _Tooltip.prototype.hide = function () {\n    // See if it's visible\n    if (this.isVisible) {\n      this._tippy.hide();\n    }\n  };\n\n  Object.defineProperty(_Tooltip.prototype, \"isVisible\", {\n    // Determines if the tooltip is visible\n    get: function get() {\n      return this._tippy.state.isVisible;\n    },\n    enumerable: false,\n    configurable: true\n  });\n  Object.defineProperty(_Tooltip.prototype, \"tippy\", {\n    // The tippy instance\n    get: function get() {\n      return this._tippy;\n    },\n    enumerable: false,\n    configurable: true\n  }); // Shows the tooltip\n\n  _Tooltip.prototype.show = function () {\n    // See if it's hidden\n    if (!this.isVisible) {\n      this._tippy.show();\n    }\n  }; // Toggles the tooltip\n\n\n  _Tooltip.prototype.toggle = function () {\n    // Toggle the element\n    if (this.isVisible) {\n      // Hide the element\n      this.hide();\n    } else {\n      // Show the element\n      this.show();\n    }\n  };\n\n  return _Tooltip;\n}(base_1.Base);\n\nexports.Tooltip = function (props, template) {\n  return new _Tooltip(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/tooltip/index.js?");
 
 /***/ }),