gd-bs 5.4.1 → 5.4.2

package/dist/gd-bs.d.ts

@@ -773,6 +773,7 @@ declare module 'gd-bs/components/carousel/types' {
             imageAlt?: string;
             imageUrl?: string;
             isActive?: boolean;
+            onRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
     }
     
     /**
@@ -796,6 +797,8 @@ declare module 'gd-bs/components/carousel/types' {
             id?: string;
             isDark?: boolean;
             items?: Array<ICarouselItem<T>>;
+            onRendered?: (el?: HTMLElement, props?: ICarouselProps) => void;
+            onSlideRendered?: (el?: HTMLElement, props?: ICarouselItem) => void;
             options?: ICarouselOptions;
     }
 }

package/dist/gd-bs.js

@@ -884,7 +884,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.Carousel = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/carousel/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/carousel/templates.js\");\n/**\r\n * Carousel\r\n * @param props - The carousel properties.\r\n */\n\n\nvar _Carousel =\n/** @class */\nfunction (_super) {\n  __extends(_Carousel, _super); // Constructor\n\n\n  function _Carousel(props, template, slideTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._eventId = null;\n    _this._indicators = null;\n    _this._pauseFlag = false;\n    _this._slides = null;\n    _this._toggle = false; // Configure the carousel\n\n    _this.configure(slideTemplate); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Carousel.prototype.configure = function (slideTemplate) {\n    // Set the attributes\n    this.el.id = \"carousel\" + (this.props.id == null ? \"\" : this.props.id);\n    this.props.enableCrossfade ? this.el.classList.add(\"carousel-fade\") : null; // Render the indicators\n\n    this.renderIndicators(); // Render the controls\n\n    this.renderControls(); // Render the slides\n\n    this.renderSlides(slideTemplate); // Set the dark theme\n\n    this.props.isDark ? this.setTheme(true) : null; // Get the options\n\n    var options = this.props.options;\n\n    if (options) {\n      // See if the interval is set\n      if (options.interval) {\n        this.start(options.interval);\n      } // See if the starting slide is set\n\n\n      if (options.slide) {\n        this.nextWhenVisible(options.slide);\n      }\n    }\n  }; // Configures the events\n\n\n  _Carousel.prototype.configureEvents = function () {\n    var _this = this;\n\n    var el = this.el; // Get the options\n\n    var options = this.props.options;\n\n    if (options) {\n      // See if the keyboard option is set\n      if (options.keyboard) {\n        // Add a keydown event\n        el.addEventListener(\"keydown\", function (ev) {\n          // See if the left arrow was pressed\n          if (ev.keyCode == 37) {\n            // Move to the previous slide\n            _this.previous();\n          } // Else, see if the right arrow was pressed\n          else if (ev.keyCode == 39) {\n            // Move tot he next slide\n            _this.next();\n          }\n        });\n      } // See if the pause option is set\n\n\n      if (options.pause) {\n        // Set the mouse enter event\n        el.addEventListener(\"mouseenter\", function () {\n          // See if automation exists\n          if (_this._eventId) {\n            // Pause the automation\n            _this.pause();\n          }\n        }); // Set the mouse exit event\n\n        el.addEventListener(\"mouseenter\", function () {\n          // See if automation exists\n          if (_this._eventId) {\n            // Unpause the automation\n            _this.unpause();\n          }\n        });\n      }\n    }\n  }; // Moves to the another slides\n\n\n  _Carousel.prototype.moveToSlide = function (current, next, slideRight) {\n    var _this = this;\n\n    if (slideRight === void 0) {\n      slideRight = true;\n    } // Do nothing if the toggle flag is set\n\n\n    if (this._toggle) {\n      return;\n    } // Set the flag\n\n\n    this._toggle = true; // Ensure the slides exist\n\n    if (current && next) {\n      // Animate the current slide out\n      next.el.classList.add(slideRight ? \"carousel-item-next\" : \"carousel-item-prev\");\n      current.el.classList.add(slideRight ? \"carousel-item-start\" : \"carousel-item-end\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Animate the next slide in\n        next.el.classList.add(slideRight ? \"carousel-item-start\" : \"carousel-item-end\"); // Wait for the animation to complete\n\n        setTimeout(function () {\n          // Update the classes\n          next.el.classList.add(\"active\");\n          current.el.classList.remove(\"active\", \"carousel-item-start\", \"carousel-item-end\");\n          next.el.classList.remove(\"carousel-item-next\", \"carousel-item-prev\", \"carousel-item-start\", \"carousel-item-end\"); // Set the flag\n\n          _this._toggle = false;\n        }, 600);\n      }, 10);\n    }\n  }; // Renders the controls\n\n\n  _Carousel.prototype.renderControls = function () {\n    var _this = this; // Get the controls\n\n\n    var nextControl = this.el.querySelector(\".carousel-control-next\");\n    var prevControl = this.el.querySelector(\".carousel-control-prev\"); // See if we are rendering controls\n\n    if (this.props.enableControls) {\n      // Configure the controls\n      nextControl ? nextControl.href = \"#\" + this.el.id : null;\n      prevControl ? prevControl.href = \"#\" + this.el.id : null; // Set the click event\n\n      nextControl.addEventListener(\"click\", function (ev) {\n        ev.preventDefault();\n\n        _this.next();\n      });\n      prevControl.addEventListener(\"click\", function (ev) {\n        ev.preventDefault();\n\n        _this.previous();\n      });\n    } else {\n      // Remove the controls\n      nextControl ? this.el.removeChild(nextControl) : null;\n      prevControl ? this.el.removeChild(prevControl) : null;\n    }\n  }; // Renders the indicators\n\n\n  _Carousel.prototype.renderIndicators = function () {\n    var _this = this; // Clear the indicators\n\n\n    this._indicators = []; // Get the indicators\n\n    var indicators = this.el.querySelector(\".carousel-indicators\");\n\n    if (indicators) {\n      // See if we are enabling indicators\n      if (this.props.enableIndicators) {\n        // Parse the items\n        var items = this.props.items || [];\n\n        for (var i = 0; i < items.length; i++) {\n          var item = items[i]; // Create the item\n\n          var elItem = document.createElement(\"li\");\n          elItem.setAttribute(\"data-bs-target\", \"#\" + this.el.id);\n          elItem.setAttribute(\"data-bs-slide-to\", i.toString());\n          item.isActive ? elItem.classList.add(\"active\") : null;\n          elItem.addEventListener(\"click\", function (ev) {\n            var elSlide = ev.currentTarget; // Prevent the page from moving to the top\n\n            ev.preventDefault(); // Go to the slide\n\n            _this.nextWhenVisible(elSlide.getAttribute(\"data-bs-slide-to\"));\n          }); // Add the item\n\n          indicators.appendChild(elItem);\n\n          this._indicators.push(elItem);\n        }\n      } else {\n        // Remove the indicators\n        this.el.removeChild(indicators);\n      }\n    }\n  }; // Renders the slides\n\n\n  _Carousel.prototype.renderSlides = function (slideTemplate) {\n    // Clear the slides\n    this._slides = []; // Get the indicators\n\n    var slides = this.el.querySelector(\".carousel-inner\");\n\n    if (slides) {\n      // Parse the items\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        var slide = new item_1.CarouselItem(items[i], slideTemplate);\n\n        this._slides.push(slide); // Create the item element\n\n\n        slides.appendChild(slide.el);\n      }\n    }\n  }; // Starts to move automatically\n\n\n  _Carousel.prototype.start = function (timeToWait) {\n    var _this = this;\n\n    if (timeToWait === void 0) {\n      timeToWait = 5000;\n    } // Do nothing if the event already exists\n\n\n    if (this._eventId) {\n      return;\n    } // Validate the time\n\n\n    if (timeToWait < 1000) {\n      timeToWait = 1000;\n    } // Start the event\n\n\n    this._eventId = setInterval(function () {\n      // Do nothing if we have paused it\n      if (_this._pauseFlag) {\n        return;\n      } // Move to the next slide\n\n\n      _this.next();\n    }, timeToWait);\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Cycle the carousel\n\n\n  _Carousel.prototype.cycle = function () {\n    // Start the event\n    this.start(this.props.options && this.props.options.interval);\n  }; // Goes to the next slide\n\n\n  _Carousel.prototype.next = function () {\n    var currentSlide = null;\n    var nextSlide = null;\n    var options = this.props.options || {}; // Parse the slides\n\n    for (var i = 0; i < this._slides.length; i++) {\n      var slide = this._slides[i];\n\n      if (slide.isActive) {\n        // See if we are at the end and wrapping is disabled\n        if (i + 1 == this._slides.length && options.wrap == false) {\n          // Do nothing\n          return;\n        } // Set the slides\n\n\n        currentSlide = slide;\n        nextSlide = this._slides[i + 1] || this._slides[0]; // Update the indicators\n\n        this._indicators[i].classList.remove(\"active\");\n\n        (this._indicators[i + 1] || this._indicators[0]).classList.add(\"active\");\n\n        break;\n      }\n    } // Move to the next slide\n\n\n    this.moveToSlide(currentSlide, nextSlide);\n  }; // Cycles the carousel to a particular frame\n\n\n  _Carousel.prototype.nextWhenVisible = function (idx) {\n    var currentSlide = null;\n    var nextSlide = this._slides[idx];\n    var slideRight = true; // Parse the slides\n\n    for (var i = 0; i < this._slides.length; i++) {\n      var slide = this._slides[i]; // See if this slide is active\n\n      if (slide.isActive) {\n        // Do nothing if we selected the same slide\n        if (idx == i) {\n          return;\n        } // Set the flag\n\n\n        slideRight = idx > i; // Set the current slide\n\n        currentSlide = slide; // Update the indicators\n\n        this._indicators[i].classList.remove(\"active\");\n\n        this._indicators[idx].classList.add(\"active\");\n\n        break;\n      }\n    } // Move to the next slide\n\n\n    this.moveToSlide(currentSlide, nextSlide, slideRight);\n  }; // Pauses the slide\n\n\n  _Carousel.prototype.pause = function () {\n    // Set the flag\n    this._pauseFlag = true;\n  }; // Goes to the previous slide\n\n\n  _Carousel.prototype.previous = function () {\n    var currentSlide = null;\n    var options = this.props.options || {};\n    var prevSlide = null; // Parse the slides\n\n    for (var i = 0; i < this._slides.length; i++) {\n      var slide = this._slides[i];\n\n      if (slide.isActive) {\n        // See if we are at the end and wrapping is disabled\n        if (i - 1 < 0 && options.wrap == false) {\n          // Do nothing\n          return;\n        } // Set the slides\n\n\n        currentSlide = slide;\n        prevSlide = this._slides[i - 1] || this._slides[this._slides.length - 1]; // Update the indicators\n\n        this._indicators[i].classList.remove(\"active\");\n\n        (this._indicators[i - 1] || this._indicators[this._indicators.length - 1]).classList.add(\"active\");\n\n        break;\n      }\n    } // Move to the next slide\n\n\n    this.moveToSlide(currentSlide, prevSlide, false);\n  }; // Enables/Disables the dark theme\n\n\n  _Carousel.prototype.setTheme = function (isDark) {\n    // See if we are setting the dark theme\n    if (isDark) {\n      // Set the theme\n      this.el.classList.add(\"carousel-dark\");\n    } else {\n      // Set the theme\n      this.el.classList.remove(\"carousel-dark\");\n    }\n  }; // Unpauses the carousel\n\n\n  _Carousel.prototype.unpause = function () {\n    // Set the flag\n    this._pauseFlag = false;\n  };\n\n  return _Carousel;\n}(base_1.Base);\n\nexports.Carousel = function (props, template, slideTemplate) {\n  return new _Carousel(props, template, slideTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/carousel/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.Carousel = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/carousel/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/carousel/templates.js\");\n/**\r\n * Carousel\r\n * @param props - The carousel properties.\r\n */\n\n\nvar _Carousel =\n/** @class */\nfunction (_super) {\n  __extends(_Carousel, _super); // Constructor\n\n\n  function _Carousel(props, template, slideTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._eventId = null;\n    _this._indicators = null;\n    _this._pauseFlag = false;\n    _this._slides = null;\n    _this._toggle = false; // Configure the carousel\n\n    _this.configure(slideTemplate); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Carousel.prototype.configure = function (slideTemplate) {\n    // Set the attributes\n    this.el.id = \"carousel\" + (this.props.id == null ? \"\" : this.props.id);\n    this.props.enableCrossfade ? this.el.classList.add(\"carousel-fade\") : null; // Render the indicators\n\n    this.renderIndicators(); // Render the controls\n\n    this.renderControls(); // Render the slides\n\n    this.renderSlides(slideTemplate); // Set the dark theme\n\n    this.props.isDark ? this.setTheme(true) : null; // Get the options\n\n    var options = this.props.options;\n\n    if (options) {\n      // See if the interval is set\n      if (options.interval) {\n        this.start(options.interval);\n      } // See if the starting slide is set\n\n\n      if (options.slide) {\n        this.nextWhenVisible(options.slide);\n      }\n    } // Call the event if it exists\n\n\n    this.props.onRendered ? this.props.onRendered(this.el, this.props) : null;\n  }; // Configures the events\n\n\n  _Carousel.prototype.configureEvents = function () {\n    var _this = this;\n\n    var el = this.el; // Get the options\n\n    var options = this.props.options;\n\n    if (options) {\n      // See if the keyboard option is set\n      if (options.keyboard) {\n        // Add a keydown event\n        el.addEventListener(\"keydown\", function (ev) {\n          // See if the left arrow was pressed\n          if (ev.code == \"37\") {\n            // Move to the previous slide\n            _this.previous();\n          } // Else, see if the right arrow was pressed\n          else if (ev.code == \"39\") {\n            // Move tot he next slide\n            _this.next();\n          }\n        });\n      } // See if the pause option is set\n\n\n      if (options.pause) {\n        // Set the mouse enter event\n        el.addEventListener(\"mouseenter\", function () {\n          // See if automation exists\n          if (_this._eventId) {\n            // Pause the automation\n            _this.pause();\n          }\n        }); // Set the mouse exit event\n\n        el.addEventListener(\"mouseenter\", function () {\n          // See if automation exists\n          if (_this._eventId) {\n            // Unpause the automation\n            _this.unpause();\n          }\n        });\n      }\n    }\n  }; // Moves to the another slides\n\n\n  _Carousel.prototype.moveToSlide = function (current, next, slideRight) {\n    var _this = this;\n\n    if (slideRight === void 0) {\n      slideRight = true;\n    } // Do nothing if the toggle flag is set\n\n\n    if (this._toggle) {\n      return;\n    } // Set the flag\n\n\n    this._toggle = true; // Ensure the slides exist\n\n    if (current && next) {\n      // Animate the current slide out\n      next.el.classList.add(slideRight ? \"carousel-item-next\" : \"carousel-item-prev\");\n      current.el.classList.add(slideRight ? \"carousel-item-start\" : \"carousel-item-end\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Animate the next slide in\n        next.el.classList.add(slideRight ? \"carousel-item-start\" : \"carousel-item-end\"); // Wait for the animation to complete\n\n        setTimeout(function () {\n          // Update the classes\n          next.el.classList.add(\"active\");\n          current.el.classList.remove(\"active\", \"carousel-item-start\", \"carousel-item-end\");\n          next.el.classList.remove(\"carousel-item-next\", \"carousel-item-prev\", \"carousel-item-start\", \"carousel-item-end\"); // Set the flag\n\n          _this._toggle = false;\n        }, 600);\n      }, 10);\n    }\n  }; // Renders the controls\n\n\n  _Carousel.prototype.renderControls = function () {\n    var _this = this; // Get the controls\n\n\n    var nextControl = this.el.querySelector(\".carousel-control-next\");\n    var prevControl = this.el.querySelector(\".carousel-control-prev\"); // See if we are rendering controls\n\n    if (this.props.enableControls) {\n      // Configure the controls\n      nextControl ? nextControl.href = \"#\" + this.el.id : null;\n      prevControl ? prevControl.href = \"#\" + this.el.id : null; // Set the click event\n\n      nextControl.addEventListener(\"click\", function (ev) {\n        ev.preventDefault();\n\n        _this.next();\n      });\n      prevControl.addEventListener(\"click\", function (ev) {\n        ev.preventDefault();\n\n        _this.previous();\n      });\n    } else {\n      // Remove the controls\n      nextControl ? this.el.removeChild(nextControl) : null;\n      prevControl ? this.el.removeChild(prevControl) : null;\n    }\n  }; // Renders the indicators\n\n\n  _Carousel.prototype.renderIndicators = function () {\n    var _this = this; // Clear the indicators\n\n\n    this._indicators = []; // Get the indicators\n\n    var indicators = this.el.querySelector(\".carousel-indicators\");\n\n    if (indicators) {\n      // See if we are enabling indicators\n      if (this.props.enableIndicators) {\n        // Parse the items\n        var items = this.props.items || [];\n\n        for (var i = 0; i < items.length; i++) {\n          var item = items[i]; // Create the item\n\n          var elItem = document.createElement(\"li\");\n          elItem.setAttribute(\"data-bs-target\", \"#\" + this.el.id);\n          elItem.setAttribute(\"data-bs-slide-to\", i.toString());\n          item.isActive ? elItem.classList.add(\"active\") : null;\n          elItem.addEventListener(\"click\", function (ev) {\n            var elSlide = ev.currentTarget; // Prevent the page from moving to the top\n\n            ev.preventDefault(); // Go to the slide\n\n            _this.nextWhenVisible(elSlide.getAttribute(\"data-bs-slide-to\"));\n          }); // Add the item\n\n          indicators.appendChild(elItem);\n\n          this._indicators.push(elItem);\n        }\n      } else {\n        // Remove the indicators\n        this.el.removeChild(indicators);\n      }\n    }\n  }; // Renders the slides\n\n\n  _Carousel.prototype.renderSlides = function (slideTemplate) {\n    // Clear the slides\n    this._slides = []; // Get the indicators\n\n    var slides = this.el.querySelector(\".carousel-inner\");\n\n    if (slides) {\n      // Parse the items\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        var slide = new item_1.CarouselItem(items[i], slideTemplate);\n\n        this._slides.push(slide); // Create the item element\n\n\n        slides.appendChild(slide.el); // Call the event\n\n        this.props.onSlideRendered ? this.props.onSlideRendered(slide.el, items[i]) : null;\n      }\n    }\n  }; // Starts to move automatically\n\n\n  _Carousel.prototype.start = function (timeToWait) {\n    var _this = this;\n\n    if (timeToWait === void 0) {\n      timeToWait = 5000;\n    } // Do nothing if the event already exists\n\n\n    if (this._eventId) {\n      return;\n    } // Validate the time\n\n\n    if (timeToWait < 1000) {\n      timeToWait = 1000;\n    } // Start the event\n\n\n    this._eventId = setInterval(function () {\n      // Do nothing if we have paused it\n      if (_this._pauseFlag) {\n        return;\n      } // Move to the next slide\n\n\n      _this.next();\n    }, timeToWait);\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Cycle the carousel\n\n\n  _Carousel.prototype.cycle = function () {\n    // Start the event\n    this.start(this.props.options && this.props.options.interval);\n  }; // Goes to the next slide\n\n\n  _Carousel.prototype.next = function () {\n    var currentSlide = null;\n    var nextSlide = null;\n    var options = this.props.options || {}; // Parse the slides\n\n    for (var i = 0; i < this._slides.length; i++) {\n      var slide = this._slides[i];\n\n      if (slide.isActive) {\n        // See if we are at the end and wrapping is disabled\n        if (i + 1 == this._slides.length && options.wrap == false) {\n          // Do nothing\n          return;\n        } // Set the slides\n\n\n        currentSlide = slide;\n        nextSlide = this._slides[i + 1] || this._slides[0]; // Update the indicators\n\n        this._indicators[i].classList.remove(\"active\");\n\n        (this._indicators[i + 1] || this._indicators[0]).classList.add(\"active\");\n\n        break;\n      }\n    } // Move to the next slide\n\n\n    this.moveToSlide(currentSlide, nextSlide);\n  }; // Cycles the carousel to a particular frame\n\n\n  _Carousel.prototype.nextWhenVisible = function (idx) {\n    var currentSlide = null;\n    var nextSlide = this._slides[idx];\n    var slideRight = true; // Parse the slides\n\n    for (var i = 0; i < this._slides.length; i++) {\n      var slide = this._slides[i]; // See if this slide is active\n\n      if (slide.isActive) {\n        // Do nothing if we selected the same slide\n        if (idx == i) {\n          return;\n        } // Set the flag\n\n\n        slideRight = idx > i; // Set the current slide\n\n        currentSlide = slide; // Update the indicators\n\n        this._indicators[i].classList.remove(\"active\");\n\n        this._indicators[idx].classList.add(\"active\");\n\n        break;\n      }\n    } // Move to the next slide\n\n\n    this.moveToSlide(currentSlide, nextSlide, slideRight);\n  }; // Pauses the slide\n\n\n  _Carousel.prototype.pause = function () {\n    // Set the flag\n    this._pauseFlag = true;\n  }; // Goes to the previous slide\n\n\n  _Carousel.prototype.previous = function () {\n    var currentSlide = null;\n    var options = this.props.options || {};\n    var prevSlide = null; // Parse the slides\n\n    for (var i = 0; i < this._slides.length; i++) {\n      var slide = this._slides[i];\n\n      if (slide.isActive) {\n        // See if we are at the end and wrapping is disabled\n        if (i - 1 < 0 && options.wrap == false) {\n          // Do nothing\n          return;\n        } // Set the slides\n\n\n        currentSlide = slide;\n        prevSlide = this._slides[i - 1] || this._slides[this._slides.length - 1]; // Update the indicators\n\n        this._indicators[i].classList.remove(\"active\");\n\n        (this._indicators[i - 1] || this._indicators[this._indicators.length - 1]).classList.add(\"active\");\n\n        break;\n      }\n    } // Move to the next slide\n\n\n    this.moveToSlide(currentSlide, prevSlide, false);\n  }; // Enables/Disables the dark theme\n\n\n  _Carousel.prototype.setTheme = function (isDark) {\n    // See if we are setting the dark theme\n    if (isDark) {\n      // Set the theme\n      this.el.classList.add(\"carousel-dark\");\n    } else {\n      // Set the theme\n      this.el.classList.remove(\"carousel-dark\");\n    }\n  }; // Unpauses the carousel\n\n\n  _Carousel.prototype.unpause = function () {\n    // Set the flag\n    this._pauseFlag = false;\n  };\n\n  return _Carousel;\n}(base_1.Base);\n\nexports.Carousel = function (props, template, slideTemplate) {\n  return new _Carousel(props, template, slideTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/carousel/index.js?");
 
 /***/ }),
 
@@ -895,7 +895,7 @@ eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extend
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.CarouselItem = void 0;\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/carousel/templates.js\");\n/**\r\n * Carousel Item\r\n */\n\n\nvar CarouselItem =\n/** @class */\nfunction () {\n  // Constructor\n  function CarouselItem(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTMLItem;\n    }\n\n    this._el = null;\n    this._props = null; // Save the properties\n\n    this._props = props; // Create the item\n\n    var elItem = document.createElement(\"div\");\n    elItem.innerHTML = template;\n    this._el = elItem.firstChild; // Configure the item\n\n    this.configure();\n  } // Configure the item\n\n\n  CarouselItem.prototype.configure = function () {\n    // Set the attributes\n    this._props.isActive ? this._el.classList.add(\"active\") : null; // Get the image elements\n\n    var captions = this._el.querySelector(\".carousel-caption\");\n\n    var img = this._el.querySelector(\"img\"); // See if we are rendering an image\n\n\n    if (this._props.imageUrl) {\n      // Set the image properties\n      img.alt = this._props.imageAlt == null ? \"\" : this._props.imageAlt;\n      img.src = this._props.imageUrl == null ? \"\" : this._props.imageUrl; // Set the captions\n\n      captions.innerHTML = this._props.captions == null ? \"\" : this._props.captions;\n    } else {\n      // Remove the elements\n      this._el.removeChild(captions);\n\n      this._el.removeChild(img); // Append the content\n\n\n      common_1.appendContent(this._el, this._props.content);\n    }\n  };\n\n  Object.defineProperty(CarouselItem.prototype, \"el\", {\n    /**\r\n     * Public Properties\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(CarouselItem.prototype, \"isActive\", {\n    // Returns true if this slide is active\n    get: function get() {\n      return this._el.classList.contains(\"active\");\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return CarouselItem;\n}();\n\nexports.CarouselItem = CarouselItem;\n\n//# sourceURL=webpack://gd-bs/./build/components/carousel/item.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.CarouselItem = void 0;\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/carousel/templates.js\");\n/**\r\n * Carousel Item\r\n */\n\n\nvar CarouselItem =\n/** @class */\nfunction () {\n  // Constructor\n  function CarouselItem(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTMLItem;\n    }\n\n    this._el = null;\n    this._props = null; // Save the properties\n\n    this._props = props; // Create the item\n\n    var elItem = document.createElement(\"div\");\n    elItem.innerHTML = template;\n    this._el = elItem.firstChild; // Configure the item\n\n    this.configure();\n  } // Configure the item\n\n\n  CarouselItem.prototype.configure = function () {\n    // Set the attributes\n    this._props.isActive ? this._el.classList.add(\"active\") : null; // Get the image elements\n\n    var captions = this._el.querySelector(\".carousel-caption\");\n\n    var img = this._el.querySelector(\"img\"); // See if we are rendering an image\n\n\n    if (this._props.imageUrl) {\n      // Set the image properties\n      img.alt = this._props.imageAlt == null ? \"\" : this._props.imageAlt;\n      img.src = this._props.imageUrl == null ? \"\" : this._props.imageUrl; // Set the captions\n\n      captions.innerHTML = this._props.captions == null ? \"\" : this._props.captions;\n    } else {\n      // Remove the elements\n      this._el.removeChild(captions);\n\n      this._el.removeChild(img); // Append the content\n\n\n      common_1.appendContent(this._el, this._props.content);\n    } // Call the event if it exists\n\n\n    this._props.onRendered ? this._props.onRendered(this._el, this._props) : null;\n  };\n\n  Object.defineProperty(CarouselItem.prototype, \"el\", {\n    /**\r\n     * Public Properties\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(CarouselItem.prototype, \"isActive\", {\n    // Returns true if this slide is active\n    get: function get() {\n      return this._el.classList.contains(\"active\");\n    },\n    enumerable: false,\n    configurable: true\n  });\n  return CarouselItem;\n}();\n\nexports.CarouselItem = CarouselItem;\n\n//# sourceURL=webpack://gd-bs/./build/components/carousel/item.js?");
 
 /***/ }),
 
@@ -1225,7 +1225,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.Modal = exports.ModalClassNames = exports.ModalTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./build/components/classNames.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/modal/templates.js\");\n/**\r\n * Modal Types\r\n */\n\n\nvar ModalTypes;\n\n(function (ModalTypes) {\n  ModalTypes[ModalTypes[\"Small\"] = 1] = \"Small\";\n  ModalTypes[ModalTypes[\"Medium\"] = 2] = \"Medium\";\n  ModalTypes[ModalTypes[\"Large\"] = 3] = \"Large\";\n  ModalTypes[ModalTypes[\"XLarge\"] = 4] = \"XLarge\";\n  ModalTypes[ModalTypes[\"Full\"] = 5] = \"Full\";\n  ModalTypes[ModalTypes[\"FullSmall\"] = 6] = \"FullSmall\";\n  ModalTypes[ModalTypes[\"FullMedium\"] = 7] = \"FullMedium\";\n  ModalTypes[ModalTypes[\"FullLarge\"] = 8] = \"FullLarge\";\n  ModalTypes[ModalTypes[\"FullXLarge\"] = 9] = \"FullXLarge\";\n})(ModalTypes = exports.ModalTypes || (exports.ModalTypes = {}));\n/**\r\n * Modal Classes\r\n */\n\n\nexports.ModalClassNames = new classNames_1.ClassNames([\"modal-sm\", \"\", \"modal-lg\", \"modal-xl\", \"modal-fullscreen\", \"modal-fullscreen-sm-down\", \"modal-fullscreen-md-down\", \"modal-fullscreen-lg-down\", \"modal-fullscreen-xl-down\"]);\n/**\r\n * Modal\r\n * @param props The modal properties.\r\n */\n\nvar _Modal =\n/** @class */\nfunction (_super) {\n  __extends(_Modal, _super); // Constructor\n\n\n  function _Modal(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._autoClose = null;\n    _this._eventCreated = false;\n    _this._options = null;\n    _this._tranisitioningFl = false; // Configure the collapse\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 card group\n\n\n  _Modal.prototype.configure = function () {\n    // Set the modal attributes\n    this.props.id ? this.el.id = this.props.id : null;\n    this.props.disableFade ? null : this.el.classList.add(\"fade\"); // Update the dialog\n\n    var dialog = this.el.querySelector(\".modal-dialog\");\n\n    if (dialog) {\n      // Add the class name, based on the type\n      var className = exports.ModalClassNames.getByType(this.props.type);\n      className ? dialog.classList.add(className) : null; // Update the title\n\n      this.setTitle(this.props.title); // See if we are hiding the close button\n\n      if (this.props.hideCloseButton) {\n        // Remove the close button\n        var closeButton = dialog.querySelector(\".btn-close\");\n        closeButton ? closeButton.classList.add(\"d-none\") : null;\n      }\n    } // Set the body\n\n\n    common_1.appendContent(this.el.querySelector(\".modal-body\"), this.props.body); // Set the footer\n\n    common_1.appendContent(this.el.querySelector(\".modal-footer\"), this.props.footer); // Get the modal options\n\n    this._options = this.props.options;\n\n    if (this._options) {\n      // Set the backdrop\n      if (typeof this._options.backdrop === \"boolean\") {\n        this.el.setAttribute(\"data-bs-backdrop\", this._options.backdrop ? \"true\" : \"false\");\n      } // Set the center option\n\n\n      if (dialog && typeof this._options.centered === \"boolean\") {\n        dialog.classList.add(\"modal-dialog-centered\");\n      } // Set the focus\n\n\n      if (typeof this._options.focus === \"boolean\") {\n        this.el.setAttribute(\"data-bs-focus\", this._options.focus ? \"true\" : \"false\");\n      } // Set the keyboard\n\n\n      if (typeof this._options.keyboard === \"boolean\") {\n        this.el.setAttribute(\"data-bs-keyboard\", this._options.keyboard ? \"true\" : \"false\");\n      } // Set the scrollable option\n\n\n      if (dialog && typeof this._options.scrollable === \"boolean\") {\n        dialog.classList.add(\"modal-dialog-scrollable\");\n      } // See if we are showing the modal\n\n\n      if (this._options.visible) {\n        // Toggle the modal\n        this.toggle();\n      }\n    }\n  }; // Configures the auto-close event\n\n\n  _Modal.prototype.configureAutoCloseEvent = function () {\n    var _this = this; // See if the event exists\n\n\n    if (this._eventCreated) {\n      return;\n    } // Ensure the body exists\n\n\n    if (document.body) {\n      // Add a click event to the modal\n      document.body.addEventListener(\"click\", function (ev) {\n        // See if the auto close flag is set\n        if (_this._autoClose) {\n          var elContent = _this.el.querySelector(\".modal-content\"); // Do nothing if we are tranisitionsing\n\n\n          if (_this._tranisitioningFl) {\n            return;\n          } // Do nothing if we clicked within the modal\n\n\n          if (ev.composedPath().includes(elContent)) {\n            return;\n          } else {\n            // Get the mouse coordinates\n            var x = ev.clientX;\n            var y = ev.clientY;\n            var elCoordinate = elContent.getBoundingClientRect(); // See if we clicked within the modal\n\n            if (x <= elCoordinate.right && x >= elCoordinate.left && y <= elCoordinate.bottom && y >= elCoordinate.top) {\n              return;\n            } // Else, see if something was selected\n            else if (x == 0 && y == 0) {\n              return;\n            }\n          } // Close the modal if it's visible\n\n\n          if (_this.isVisible) {\n            _this.toggle();\n          }\n        }\n      }); // Set the flag\n\n      this._eventCreated = true;\n    } else {\n      // Add the load event\n      window.addEventListener(\"load\", function () {\n        // Configure the event\n        _this.configureAutoCloseEvent();\n      });\n    }\n  }; // Configure the events\n\n\n  _Modal.prototype.configureEvents = function () {\n    var _this = this; // Execute the events\n\n\n    this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(\".modal-header\")) : null;\n    this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(\".modal-body\")) : null;\n    this.props.onRenderFooter ? this.props.onRenderFooter(this.el.querySelector(\".modal-footer\")) : null; // Get the close button\n\n    var elClose = this.el.querySelector(\".btn-close\");\n\n    if (elClose) {\n      // Add a click event\n      elClose.addEventListener(\"click\", function () {\n        // Hide the modal\n        _this.hide(); // Call the event\n\n\n        _this.props.onClose ? _this.props.onClose(_this.el) : null;\n      });\n    } // See if the keyboard option is set\n\n\n    if (this._options && this._options.keyboard) {\n      // Add a click event\n      this.el.addEventListener(\"keydown\", function (ev) {\n        // See if the escape key was clicked and the modal is visible\n        if (ev.keyCode === 27 && _this.isVisible) {\n          // Toggle the modal\n          _this.toggle();\n        }\n      });\n    } // Set the flag to determine if the modal is sticky\n\n\n    this.setAutoClose(this.props.options && typeof this.props.options.autoClose === \"boolean\" ? this.props.options.autoClose : true);\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Hides the modal\n\n\n  _Modal.prototype.hide = function () {\n    // Toggle the modal\n    this.isVisible ? this.toggle() : null;\n  };\n\n  Object.defineProperty(_Modal.prototype, \"isVisible\", {\n    // Returns true if the modal is visible\n    get: function get() {\n      return this.el.classList.contains(\"show\");\n    },\n    enumerable: false,\n    configurable: true\n  }); // Updates the auto close flag\n\n  _Modal.prototype.setAutoClose = function (value) {\n    // Set the flag\n    this._autoClose = value; // Configure the event if we are setting the value\n\n    this._autoClose ? this.configureAutoCloseEvent() : null;\n  }; // Updates the backdrop flag\n\n\n  _Modal.prototype.setBackdrop = function (value) {\n    // Set the backdrop\n    this.el.setAttribute(\"data-bs-backdrop\", value ? \"true\" : \"false\");\n  }; // Updates the visibility of the close button\n\n\n  _Modal.prototype.setCloseButtonVisibility = function (showFl) {\n    // Get the close button\n    var closeButton = this.el.querySelector(\".btn-close\");\n\n    if (closeButton) {\n      // See if we are showing the button\n      if (showFl) {\n        // Show the button\n        closeButton.classList.remove(\"d-none\");\n      } else {\n        // Hide the button\n        closeButton.classList.add(\"d-none\");\n      }\n    }\n  }; // Updates the focus flag\n\n\n  _Modal.prototype.setFocus = function (value) {\n    // Set the focus\n    if (typeof this._options.focus === \"boolean\") {\n      this.el.setAttribute(\"data-bs-focus\", value ? \"true\" : \"false\");\n    }\n  }; // Updates the center option\n\n\n  _Modal.prototype.setIsCentered = function (value) {\n    // Get the dialog\n    var dialog = this.el.querySelector(\".modal-dialog\");\n\n    if (dialog) {\n      // Add/Remove the class name\n      dialog.classList[value ? \"add\" : \"remove\"](\"modal-dialog-centered\");\n    }\n  }; // Updates the keyboard flag\n\n\n  _Modal.prototype.setKeyboard = function (value) {\n    // Set the keyboard\n    if (typeof this._options.keyboard === \"boolean\") {\n      this.el.setAttribute(\"data-bs-keyboard\", value ? \"true\" : \"false\");\n    }\n  }; // Updates the scrollable option\n\n\n  _Modal.prototype.setScrollable = function (value) {\n    // Get the dialog\n    var dialog = this.el.querySelector(\".modal-dialog\");\n\n    if (dialog) {\n      // Add/Remove the class name\n      dialog.classList[value ? \"add\" : \"remove\"](\"modal-dialog-scrollable\");\n    }\n  }; // Updates the title\n\n\n  _Modal.prototype.setTitle = function (title) {\n    // Get the title\n    var elTitle = this.el.querySelector(\".modal-title\");\n\n    if (elTitle) {\n      // Set the text\n      elTitle.innerHTML = title == null ? \"\" : title;\n    }\n  }; // Updates the type\n\n\n  _Modal.prototype.setType = function (modalType) {\n    var dialog = this.el.querySelector(\".modal-dialog\"); // Parse the class names\n\n    exports.ModalClassNames.parse(function (className) {\n      // Remove the class names\n      className ? dialog.classList.remove(className) : null;\n    }); // Set the class name\n\n    var className = exports.ModalClassNames.getByType(modalType);\n    className ? dialog.classList.add(className) : null;\n  }; // Shows the modal\n\n\n  _Modal.prototype.show = function () {\n    // Toggle the modal\n    this.isVisible ? null : this.toggle();\n  }; // Toggles the modal\n\n\n  _Modal.prototype.toggle = function () {\n    var _this = this;\n\n    var backdrop = document.querySelector(\".modal-backdrop\"); // Set the flag\n\n    this._tranisitioningFl = true; // See if this modal is visible\n\n    if (this.isVisible) {\n      // Hide the modal\n      this.el.classList.remove(\"show\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Hide the modal\n        _this.el.style.display = \"\"; // Remove the backdrop\n\n        backdrop ? document.body.removeChild(backdrop) : null;\n        backdrop = null; // Set the flag\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    } else {\n      // Start the animation\n      this.el.classList.add(\"modal-open\");\n      this.el.style.display = \"block\"; // Create the backdrop if we are showing it\n\n      var showBackdrop = this._options && typeof this._options.backdrop === \"boolean\" ? this._options.backdrop : true;\n\n      if (showBackdrop && backdrop == null) {\n        backdrop = document.createElement(\"div\");\n        backdrop.classList.add(\"modal-backdrop\");\n        backdrop.classList.add(\"fade\");\n        backdrop.classList.add(\"show\");\n        document.body.appendChild(backdrop);\n      } // Set the focus\n\n\n      this.el.focus(); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Show the modal\n        _this.el.classList.remove(\"modal-open\");\n\n        _this.el.classList.add(\"show\"); // Set the flag\n\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    }\n  };\n\n  return _Modal;\n}(base_1.Base);\n\nexports.Modal = function (props, template) {\n  return new _Modal(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/modal/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.Modal = exports.ModalClassNames = exports.ModalTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./build/components/classNames.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/modal/templates.js\");\n/**\r\n * Modal Types\r\n */\n\n\nvar ModalTypes;\n\n(function (ModalTypes) {\n  ModalTypes[ModalTypes[\"Small\"] = 1] = \"Small\";\n  ModalTypes[ModalTypes[\"Medium\"] = 2] = \"Medium\";\n  ModalTypes[ModalTypes[\"Large\"] = 3] = \"Large\";\n  ModalTypes[ModalTypes[\"XLarge\"] = 4] = \"XLarge\";\n  ModalTypes[ModalTypes[\"Full\"] = 5] = \"Full\";\n  ModalTypes[ModalTypes[\"FullSmall\"] = 6] = \"FullSmall\";\n  ModalTypes[ModalTypes[\"FullMedium\"] = 7] = \"FullMedium\";\n  ModalTypes[ModalTypes[\"FullLarge\"] = 8] = \"FullLarge\";\n  ModalTypes[ModalTypes[\"FullXLarge\"] = 9] = \"FullXLarge\";\n})(ModalTypes = exports.ModalTypes || (exports.ModalTypes = {}));\n/**\r\n * Modal Classes\r\n */\n\n\nexports.ModalClassNames = new classNames_1.ClassNames([\"modal-sm\", \"\", \"modal-lg\", \"modal-xl\", \"modal-fullscreen\", \"modal-fullscreen-sm-down\", \"modal-fullscreen-md-down\", \"modal-fullscreen-lg-down\", \"modal-fullscreen-xl-down\"]);\n/**\r\n * Modal\r\n * @param props The modal properties.\r\n */\n\nvar _Modal =\n/** @class */\nfunction (_super) {\n  __extends(_Modal, _super); // Constructor\n\n\n  function _Modal(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._autoClose = null;\n    _this._eventCreated = false;\n    _this._options = null;\n    _this._tranisitioningFl = false; // Configure the collapse\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 card group\n\n\n  _Modal.prototype.configure = function () {\n    // Set the modal attributes\n    this.props.id ? this.el.id = this.props.id : null;\n    this.props.disableFade ? null : this.el.classList.add(\"fade\"); // Update the dialog\n\n    var dialog = this.el.querySelector(\".modal-dialog\");\n\n    if (dialog) {\n      // Add the class name, based on the type\n      var className = exports.ModalClassNames.getByType(this.props.type);\n      className ? dialog.classList.add(className) : null; // Update the title\n\n      this.setTitle(this.props.title); // See if we are hiding the close button\n\n      if (this.props.hideCloseButton) {\n        // Remove the close button\n        var closeButton = dialog.querySelector(\".btn-close\");\n        closeButton ? closeButton.classList.add(\"d-none\") : null;\n      }\n    } // Set the body\n\n\n    common_1.appendContent(this.el.querySelector(\".modal-body\"), this.props.body); // Set the footer\n\n    common_1.appendContent(this.el.querySelector(\".modal-footer\"), this.props.footer); // Get the modal options\n\n    this._options = this.props.options;\n\n    if (this._options) {\n      // Set the backdrop\n      if (typeof this._options.backdrop === \"boolean\") {\n        this.el.setAttribute(\"data-bs-backdrop\", this._options.backdrop ? \"true\" : \"false\");\n      } // Set the center option\n\n\n      if (dialog && typeof this._options.centered === \"boolean\") {\n        dialog.classList.add(\"modal-dialog-centered\");\n      } // Set the focus\n\n\n      if (typeof this._options.focus === \"boolean\") {\n        this.el.setAttribute(\"data-bs-focus\", this._options.focus ? \"true\" : \"false\");\n      } // Set the keyboard\n\n\n      if (typeof this._options.keyboard === \"boolean\") {\n        this.el.setAttribute(\"data-bs-keyboard\", this._options.keyboard ? \"true\" : \"false\");\n      } // Set the scrollable option\n\n\n      if (dialog && typeof this._options.scrollable === \"boolean\") {\n        dialog.classList.add(\"modal-dialog-scrollable\");\n      } // See if we are showing the modal\n\n\n      if (this._options.visible) {\n        // Toggle the modal\n        this.toggle();\n      }\n    }\n  }; // Configures the auto-close event\n\n\n  _Modal.prototype.configureAutoCloseEvent = function () {\n    var _this = this; // See if the event exists\n\n\n    if (this._eventCreated) {\n      return;\n    } // Ensure the body exists\n\n\n    if (document.body) {\n      // Add a click event to the modal\n      document.body.addEventListener(\"click\", function (ev) {\n        // See if the auto close flag is set\n        if (_this._autoClose) {\n          var elContent = _this.el.querySelector(\".modal-content\"); // Do nothing if we are tranisitionsing\n\n\n          if (_this._tranisitioningFl) {\n            return;\n          } // Do nothing if we clicked within the modal\n\n\n          if (ev.composedPath().includes(elContent)) {\n            return;\n          } else {\n            // Get the mouse coordinates\n            var x = ev.clientX;\n            var y = ev.clientY;\n            var elCoordinate = elContent.getBoundingClientRect(); // See if we clicked within the modal\n\n            if (x <= elCoordinate.right && x >= elCoordinate.left && y <= elCoordinate.bottom && y >= elCoordinate.top) {\n              return;\n            } // Else, see if something was selected\n            else if (x == 0 && y == 0) {\n              return;\n            }\n          } // Close the modal if it's visible\n\n\n          if (_this.isVisible) {\n            _this.toggle();\n          }\n        }\n      }); // Set the flag\n\n      this._eventCreated = true;\n    } else {\n      // Add the load event\n      window.addEventListener(\"load\", function () {\n        // Configure the event\n        _this.configureAutoCloseEvent();\n      });\n    }\n  }; // Configure the events\n\n\n  _Modal.prototype.configureEvents = function () {\n    var _this = this; // Execute the events\n\n\n    this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(\".modal-header\")) : null;\n    this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(\".modal-body\")) : null;\n    this.props.onRenderFooter ? this.props.onRenderFooter(this.el.querySelector(\".modal-footer\")) : null; // Get the close button\n\n    var elClose = this.el.querySelector(\".btn-close\");\n\n    if (elClose) {\n      // Add a click event\n      elClose.addEventListener(\"click\", function () {\n        // Hide the modal\n        _this.hide(); // Call the event\n\n\n        _this.props.onClose ? _this.props.onClose(_this.el) : null;\n      });\n    } // See if the keyboard option is set\n\n\n    if (this._options && this._options.keyboard) {\n      // Add a click event\n      this.el.addEventListener(\"keydown\", function (ev) {\n        // See if the escape key was clicked and the modal is visible\n        if (ev.code === \"27\" && _this.isVisible) {\n          // Toggle the modal\n          _this.toggle();\n        }\n      });\n    } // Set the flag to determine if the modal is sticky\n\n\n    this.setAutoClose(this.props.options && typeof this.props.options.autoClose === \"boolean\" ? this.props.options.autoClose : true);\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Hides the modal\n\n\n  _Modal.prototype.hide = function () {\n    // Toggle the modal\n    this.isVisible ? this.toggle() : null;\n  };\n\n  Object.defineProperty(_Modal.prototype, \"isVisible\", {\n    // Returns true if the modal is visible\n    get: function get() {\n      return this.el.classList.contains(\"show\");\n    },\n    enumerable: false,\n    configurable: true\n  }); // Updates the auto close flag\n\n  _Modal.prototype.setAutoClose = function (value) {\n    // Set the flag\n    this._autoClose = value; // Configure the event if we are setting the value\n\n    this._autoClose ? this.configureAutoCloseEvent() : null;\n  }; // Updates the backdrop flag\n\n\n  _Modal.prototype.setBackdrop = function (value) {\n    // Set the backdrop\n    this.el.setAttribute(\"data-bs-backdrop\", value ? \"true\" : \"false\");\n  }; // Updates the visibility of the close button\n\n\n  _Modal.prototype.setCloseButtonVisibility = function (showFl) {\n    // Get the close button\n    var closeButton = this.el.querySelector(\".btn-close\");\n\n    if (closeButton) {\n      // See if we are showing the button\n      if (showFl) {\n        // Show the button\n        closeButton.classList.remove(\"d-none\");\n      } else {\n        // Hide the button\n        closeButton.classList.add(\"d-none\");\n      }\n    }\n  }; // Updates the focus flag\n\n\n  _Modal.prototype.setFocus = function (value) {\n    // Set the focus\n    if (typeof this._options.focus === \"boolean\") {\n      this.el.setAttribute(\"data-bs-focus\", value ? \"true\" : \"false\");\n    }\n  }; // Updates the center option\n\n\n  _Modal.prototype.setIsCentered = function (value) {\n    // Get the dialog\n    var dialog = this.el.querySelector(\".modal-dialog\");\n\n    if (dialog) {\n      // Add/Remove the class name\n      dialog.classList[value ? \"add\" : \"remove\"](\"modal-dialog-centered\");\n    }\n  }; // Updates the keyboard flag\n\n\n  _Modal.prototype.setKeyboard = function (value) {\n    // Set the keyboard\n    if (typeof this._options.keyboard === \"boolean\") {\n      this.el.setAttribute(\"data-bs-keyboard\", value ? \"true\" : \"false\");\n    }\n  }; // Updates the scrollable option\n\n\n  _Modal.prototype.setScrollable = function (value) {\n    // Get the dialog\n    var dialog = this.el.querySelector(\".modal-dialog\");\n\n    if (dialog) {\n      // Add/Remove the class name\n      dialog.classList[value ? \"add\" : \"remove\"](\"modal-dialog-scrollable\");\n    }\n  }; // Updates the title\n\n\n  _Modal.prototype.setTitle = function (title) {\n    // Get the title\n    var elTitle = this.el.querySelector(\".modal-title\");\n\n    if (elTitle) {\n      // Set the text\n      elTitle.innerHTML = title == null ? \"\" : title;\n    }\n  }; // Updates the type\n\n\n  _Modal.prototype.setType = function (modalType) {\n    var dialog = this.el.querySelector(\".modal-dialog\"); // Parse the class names\n\n    exports.ModalClassNames.parse(function (className) {\n      // Remove the class names\n      className ? dialog.classList.remove(className) : null;\n    }); // Set the class name\n\n    var className = exports.ModalClassNames.getByType(modalType);\n    className ? dialog.classList.add(className) : null;\n  }; // Shows the modal\n\n\n  _Modal.prototype.show = function () {\n    // Toggle the modal\n    this.isVisible ? null : this.toggle();\n  }; // Toggles the modal\n\n\n  _Modal.prototype.toggle = function () {\n    var _this = this;\n\n    var backdrop = document.querySelector(\".modal-backdrop\"); // Set the flag\n\n    this._tranisitioningFl = true; // See if this modal is visible\n\n    if (this.isVisible) {\n      // Hide the modal\n      this.el.classList.remove(\"show\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Hide the modal\n        _this.el.style.display = \"\"; // Remove the backdrop\n\n        backdrop ? document.body.removeChild(backdrop) : null;\n        backdrop = null; // Set the flag\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    } else {\n      // Start the animation\n      this.el.classList.add(\"modal-open\");\n      this.el.style.display = \"block\"; // Create the backdrop if we are showing it\n\n      var showBackdrop = this._options && typeof this._options.backdrop === \"boolean\" ? this._options.backdrop : true;\n\n      if (showBackdrop && backdrop == null) {\n        backdrop = document.createElement(\"div\");\n        backdrop.classList.add(\"modal-backdrop\");\n        backdrop.classList.add(\"fade\");\n        backdrop.classList.add(\"show\");\n        document.body.appendChild(backdrop);\n      } // Set the focus\n\n\n      this.el.focus(); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Show the modal\n        _this.el.classList.remove(\"modal-open\");\n\n        _this.el.classList.add(\"show\"); // Set the flag\n\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    }\n  };\n\n  return _Modal;\n}(base_1.Base);\n\nexports.Modal = function (props, template) {\n  return new _Modal(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/modal/index.js?");
 
 /***/ }),
 
@@ -1280,7 +1280,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Navbar = exports.NavbarTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./build/components/button/index.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/navbar/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/navbar/templates.js\");\n/**\r\n * Navbar Types\r\n */\n\n\nvar NavbarTypes;\n\n(function (NavbarTypes) {\n  NavbarTypes[NavbarTypes[\"Dark\"] = 1] = \"Dark\";\n  NavbarTypes[NavbarTypes[\"Light\"] = 2] = \"Light\";\n  NavbarTypes[NavbarTypes[\"Primary\"] = 3] = \"Primary\";\n})(NavbarTypes = exports.NavbarTypes || (exports.NavbarTypes = {}));\n/**\r\n * Navbar\r\n */\n\n\nvar _Navbar =\n/** @class */\nfunction (_super) {\n  __extends(_Navbar, _super); // Constructor\n\n\n  function _Navbar(props, template, itemTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._items = null; // Configure the collapse\n\n    _this.configure(itemTemplate); // Configure search\n\n\n    _this.configureSearch(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Navbar.prototype.configure = function (itemTemplate) {\n    // See if there is a brand\n    var brand = this.el.querySelector(\".navbar-brand\");\n\n    if (brand) {\n      if (this.props.brand) {\n        // Update the brand\n        this.props.brandUrl ? brand.href = this.props.brandUrl : null; // Append the content\n\n        common_1.appendContent(brand, this.props.brand);\n      } else {\n        // Remove the brand\n        brand.parentNode.removeChild(brand);\n      }\n    } // Update the nav bar\n\n\n    var navbar = this.el.querySelector(\".navbar-collapse\");\n\n    if (navbar) {\n      navbar.id = this.props.id || \"navbar_content\";\n    } // Set the toggle\n\n\n    var toggler = this.el.querySelector(\".navbar-toggler\");\n\n    if (toggler) {\n      toggler.setAttribute(\"aria-controls\", navbar.id);\n      toggler.setAttribute(\"data-bs-target\", \"#\" + navbar.id);\n    } // Set the scroll\n\n\n    var nav = this.el.querySelector(\".navbar-nav\");\n\n    if (nav && this.props.enableScrolling) {\n      // Add the class\n      nav.classList.add(\"navbar-nav-scroll\");\n    } // Add the classes based on the type\n\n\n    this._btnSearch = this.el.querySelector(\"button[type='submit']\"); // Set the type\n\n    this.setType(this.props.type); // Render the items\n\n    this.renderItems(itemTemplate);\n  }; // Configure the events\n\n\n  _Navbar.prototype.configureEvents = function () {\n    var _this = this;\n\n    var props = this.props.searchBox || {}; // See if search events exist\n\n    var searchbox = this.el.querySelector(\"form input\");\n\n    if (searchbox) {\n      // Set a keydown event to catch the \"Enter\" key being pressed\n      searchbox.addEventListener(\"keydown\", function (ev) {\n        // See if the \"Enter\" key was pressed\n        if (ev.keyCode == 13) {\n          // Disable the postback\n          ev.preventDefault(); // See if there is a search event\n\n          if (props.onSearch) {\n            // Call the event\n            props.onSearch(searchbox.value, ev);\n          }\n        }\n      }); // See if a change event exists\n\n      if (props.onChange) {\n        // Add an input event\n        searchbox.addEventListener(\"input\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Add a clear event\n\n        searchbox.addEventListener(\"clear\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Edge has a bug where the clear event isn't triggered\n        // See if this is the Edge browser\n\n        if (window.navigator.userAgent.indexOf(\"Edge\") > 0) {\n          // Detect the mouse click event\n          searchbox.addEventListener(\"mouseup\", function () {\n            var currentValue = searchbox.value; // Set a timeout to see if the value is cleared\n\n            setTimeout(function () {\n              // Compare the values\n              if (currentValue != searchbox.value) {\n                // Call the event\n                props.onChange(searchbox.value);\n              }\n            }, 1);\n          });\n        }\n      }\n    } // See if a search event exists\n\n\n    var button = this.el.querySelector(\"form button\");\n\n    if (button && props.onSearch) {\n      // Add a click event\n      button.addEventListener(\"click\", function (ev) {\n        // Prevent the page from moving to the top\n        ev.preventDefault(); // Call the event\n\n        props.onSearch(searchbox.value);\n      });\n    } // See if the toggle exists\n\n\n    var btnToggle = this.el.querySelector(\".navbar-toggler\");\n\n    if (btnToggle) {\n      // Add a click event\n      btnToggle.addEventListener(\"click\", function (ev) {\n        var elNav = _this.el.querySelector(\".navbar-collapse\"); // See if it's visible\n\n\n        if (!btnToggle.classList.contains(\"collapsed\") && elNav.classList.contains(\"show\")) {\n          // Start the animation\n          elNav.style.height = elNav.getBoundingClientRect()[\"height\"] + \"px\";\n          setTimeout(function () {\n            elNav.classList.add(\"collapsing\");\n            elNav.classList.remove(\"collapse\");\n            elNav.classList.remove(\"show\");\n            elNav.style.height = \"\";\n            btnToggle.classList.add(\"collapsed\");\n          }, 10); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n          }, 250);\n        } else {\n          // Start the animation\n          elNav.classList.remove(\"collapse\");\n          elNav.classList.add(\"collapsing\");\n          elNav.style.height = _this.el.scrollHeight + \"px\";\n          btnToggle.classList.remove(\"collapsed\"); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n            elNav.classList.add(\"show\");\n            elNav.style.height = \"\";\n          }, 250);\n        }\n      });\n    }\n  }; // Configures search\n\n\n  _Navbar.prototype.configureSearch = function () {\n    // See if we are rendering a search box\n    var search = this.el.querySelector(\"form\");\n\n    if (search) {\n      if (this.props.enableSearch != false && this.props.searchBox) {\n        var props = this.props.searchBox || {}; // Update the searchbox\n\n        var searchbox = search.querySelector(\"input\");\n        searchbox.placeholder = props.placeholder || searchbox.placeholder;\n        searchbox.value = props.value || \"\";\n        props.btnText ? searchbox.setAttribute(\"aria-label\", props.btnText) : null; // See if we are rendering a button\n\n        var button = search.querySelector(\"button\");\n\n        if (props.hideButton == true) {\n          // Remove the button\n          search.removeChild(button);\n        } else {\n          // Set the button type class name\n          var className = button_1.ButtonClassNames.getByType(props.btnType);\n          className ? button.classList.add(className) : null;\n        }\n      } else {\n        // Remove the searchbox\n        search.parentNode.removeChild(search);\n      }\n    }\n  }; // Render the items\n\n\n  _Navbar.prototype.renderItems = function (itemTemplate) {\n    // Clear the list\n    this._items = []; // Create the navbar list\n\n    var list = this.el.querySelector(\"ul.navbar-nav\");\n\n    if (list) {\n      // Parse the items\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        // Create the item\n        var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n        this._items.push(item);\n\n        list.appendChild(item.el); // Call the render events\n\n        this.props.onItemRendered ? this.props.onItemRendered(item.el, items[i]) : null;\n      }\n    } // Create the navbar right list\n\n\n    list = this.el.querySelectorAll(\"ul.navbar-nav\")[1];\n\n    if (list) {\n      // See if no items exist\n      var items = this.props.itemsEnd || [];\n\n      if (items.length == 0) {\n        // Remove the element\n        list.remove();\n      } else {\n        // Parse the items\n        for (var i = 0; i < items.length; i++) {\n          // Create the item\n          var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n          this._items.push(item);\n\n          list.appendChild(item.el);\n        }\n      }\n    }\n  };\n  /**\r\n   * Public Methods\r\n   */\n  // Updates the navbar template type\n\n\n  _Navbar.prototype.setType = function (navbarType) {\n    // Remove the classes\n    this.el.classList.remove(\"navbar-dark\");\n    this.el.classList.remove(\"navbar-light\");\n    this.el.classList.remove(\"bg-dark\");\n    this.el.classList.remove(\"bg-light\");\n    this.el.classList.remove(\"bg-primary\");\n\n    this._btnSearch.classList.remove(\"btn-outline-info\");\n\n    this._btnSearch.classList.remove(\"btn-outline-light\");\n\n    this._btnSearch.classList.remove(\"btn-outline-primary\"); // See which classes to add\n\n\n    switch (navbarType) {\n      // Dark\n      case NavbarTypes.Dark:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-dark\");\n\n        this._btnSearch.classList.add(\"btn-outline-info\");\n\n        break;\n      // Primary\n\n      case NavbarTypes.Primary:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-primary\");\n\n        this._btnSearch.classList.add(\"btn-outline-light\");\n\n        break;\n      // Default - Light\n\n      default:\n        // Add the class\n        this.el.classList.add(\"navbar-light\");\n        this.el.classList.add(\"bg-light\");\n\n        this._btnSearch.classList.add(\"btn-outline-primary\");\n\n        break;\n    }\n  };\n\n  return _Navbar;\n}(base_1.Base);\n\nexports.Navbar = function (props, template, itemTemplate) {\n  return new _Navbar(props, template, itemTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/navbar/index.js?");
+eval("\n\nvar __extends = this && this.__extends || function () {\n  var _extendStatics = function extendStatics(d, b) {\n    _extendStatics = Object.setPrototypeOf || {\n      __proto__: []\n    } instanceof Array && function (d, b) {\n      d.__proto__ = b;\n    } || function (d, b) {\n      for (var p in b) {\n        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n      }\n    };\n\n    return _extendStatics(d, b);\n  };\n\n  return function (d, b) {\n    _extendStatics(d, b);\n\n    function __() {\n      this.constructor = d;\n    }\n\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n  };\n}();\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.Navbar = exports.NavbarTypes = void 0;\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar button_1 = __webpack_require__(/*! ../button */ \"./build/components/button/index.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar item_1 = __webpack_require__(/*! ./item */ \"./build/components/navbar/item.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/navbar/templates.js\");\n/**\r\n * Navbar Types\r\n */\n\n\nvar NavbarTypes;\n\n(function (NavbarTypes) {\n  NavbarTypes[NavbarTypes[\"Dark\"] = 1] = \"Dark\";\n  NavbarTypes[NavbarTypes[\"Light\"] = 2] = \"Light\";\n  NavbarTypes[NavbarTypes[\"Primary\"] = 3] = \"Primary\";\n})(NavbarTypes = exports.NavbarTypes || (exports.NavbarTypes = {}));\n/**\r\n * Navbar\r\n */\n\n\nvar _Navbar =\n/** @class */\nfunction (_super) {\n  __extends(_Navbar, _super); // Constructor\n\n\n  function _Navbar(props, template, itemTemplate) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._items = null; // Configure the collapse\n\n    _this.configure(itemTemplate); // Configure search\n\n\n    _this.configureSearch(); // Configure the events\n\n\n    _this.configureEvents(); // Configure the parent\n\n\n    _this.configureParent();\n\n    return _this;\n  } // Configure the card group\n\n\n  _Navbar.prototype.configure = function (itemTemplate) {\n    // See if there is a brand\n    var brand = this.el.querySelector(\".navbar-brand\");\n\n    if (brand) {\n      if (this.props.brand) {\n        // Update the brand\n        this.props.brandUrl ? brand.href = this.props.brandUrl : null; // Append the content\n\n        common_1.appendContent(brand, this.props.brand);\n      } else {\n        // Remove the brand\n        brand.parentNode.removeChild(brand);\n      }\n    } // Update the nav bar\n\n\n    var navbar = this.el.querySelector(\".navbar-collapse\");\n\n    if (navbar) {\n      navbar.id = this.props.id || \"navbar_content\";\n    } // Set the toggle\n\n\n    var toggler = this.el.querySelector(\".navbar-toggler\");\n\n    if (toggler) {\n      toggler.setAttribute(\"aria-controls\", navbar.id);\n      toggler.setAttribute(\"data-bs-target\", \"#\" + navbar.id);\n    } // Set the scroll\n\n\n    var nav = this.el.querySelector(\".navbar-nav\");\n\n    if (nav && this.props.enableScrolling) {\n      // Add the class\n      nav.classList.add(\"navbar-nav-scroll\");\n    } // Add the classes based on the type\n\n\n    this._btnSearch = this.el.querySelector(\"button[type='submit']\"); // Set the type\n\n    this.setType(this.props.type); // Render the items\n\n    this.renderItems(itemTemplate);\n  }; // Configure the events\n\n\n  _Navbar.prototype.configureEvents = function () {\n    var _this = this;\n\n    var props = this.props.searchBox || {}; // See if search events exist\n\n    var searchbox = this.el.querySelector(\"form input\");\n\n    if (searchbox) {\n      // Set a keydown event to catch the \"Enter\" key being pressed\n      searchbox.addEventListener(\"keydown\", function (ev) {\n        // See if the \"Enter\" key was pressed\n        if (ev.code == \"13\") {\n          // Disable the postback\n          ev.preventDefault(); // See if there is a search event\n\n          if (props.onSearch) {\n            // Call the event\n            props.onSearch(searchbox.value, ev);\n          }\n        }\n      }); // See if a change event exists\n\n      if (props.onChange) {\n        // Add an input event\n        searchbox.addEventListener(\"input\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Add a clear event\n\n        searchbox.addEventListener(\"clear\", function (ev) {\n          // Call the event\n          props.onChange(searchbox.value, ev);\n        }); // Edge has a bug where the clear event isn't triggered\n        // See if this is the Edge browser\n\n        if (window.navigator.userAgent.indexOf(\"Edge\") > 0) {\n          // Detect the mouse click event\n          searchbox.addEventListener(\"mouseup\", function () {\n            var currentValue = searchbox.value; // Set a timeout to see if the value is cleared\n\n            setTimeout(function () {\n              // Compare the values\n              if (currentValue != searchbox.value) {\n                // Call the event\n                props.onChange(searchbox.value);\n              }\n            }, 1);\n          });\n        }\n      }\n    } // See if a search event exists\n\n\n    var button = this.el.querySelector(\"form button\");\n\n    if (button && props.onSearch) {\n      // Add a click event\n      button.addEventListener(\"click\", function (ev) {\n        // Prevent the page from moving to the top\n        ev.preventDefault(); // Call the event\n\n        props.onSearch(searchbox.value);\n      });\n    } // See if the toggle exists\n\n\n    var btnToggle = this.el.querySelector(\".navbar-toggler\");\n\n    if (btnToggle) {\n      // Add a click event\n      btnToggle.addEventListener(\"click\", function (ev) {\n        var elNav = _this.el.querySelector(\".navbar-collapse\"); // See if it's visible\n\n\n        if (!btnToggle.classList.contains(\"collapsed\") && elNav.classList.contains(\"show\")) {\n          // Start the animation\n          elNav.style.height = elNav.getBoundingClientRect()[\"height\"] + \"px\";\n          setTimeout(function () {\n            elNav.classList.add(\"collapsing\");\n            elNav.classList.remove(\"collapse\");\n            elNav.classList.remove(\"show\");\n            elNav.style.height = \"\";\n            btnToggle.classList.add(\"collapsed\");\n          }, 10); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n          }, 250);\n        } else {\n          // Start the animation\n          elNav.classList.remove(\"collapse\");\n          elNav.classList.add(\"collapsing\");\n          elNav.style.height = _this.el.scrollHeight + \"px\";\n          btnToggle.classList.remove(\"collapsed\"); // Wait for the animation to complete\n\n          setTimeout(function () {\n            elNav.classList.remove(\"collapsing\");\n            elNav.classList.add(\"collapse\");\n            elNav.classList.add(\"show\");\n            elNav.style.height = \"\";\n          }, 250);\n        }\n      });\n    }\n  }; // Configures search\n\n\n  _Navbar.prototype.configureSearch = function () {\n    // See if we are rendering a search box\n    var search = this.el.querySelector(\"form\");\n\n    if (search) {\n      if (this.props.enableSearch != false && this.props.searchBox) {\n        var props = this.props.searchBox || {}; // Update the searchbox\n\n        var searchbox = search.querySelector(\"input\");\n        searchbox.placeholder = props.placeholder || searchbox.placeholder;\n        searchbox.value = props.value || \"\";\n        props.btnText ? searchbox.setAttribute(\"aria-label\", props.btnText) : null; // See if we are rendering a button\n\n        var button = search.querySelector(\"button\");\n\n        if (props.hideButton == true) {\n          // Remove the button\n          search.removeChild(button);\n        } else {\n          // Set the button type class name\n          var className = button_1.ButtonClassNames.getByType(props.btnType);\n          className ? button.classList.add(className) : null;\n        }\n      } else {\n        // Remove the searchbox\n        search.parentNode.removeChild(search);\n      }\n    }\n  }; // Render the items\n\n\n  _Navbar.prototype.renderItems = function (itemTemplate) {\n    // Clear the list\n    this._items = []; // Create the navbar list\n\n    var list = this.el.querySelector(\"ul.navbar-nav\");\n\n    if (list) {\n      // Parse the items\n      var items = this.props.items || [];\n\n      for (var i = 0; i < items.length; i++) {\n        // Create the item\n        var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n        this._items.push(item);\n\n        list.appendChild(item.el); // Call the render events\n\n        this.props.onItemRendered ? this.props.onItemRendered(item.el, items[i]) : null;\n      }\n    } // Create the navbar right list\n\n\n    list = this.el.querySelectorAll(\"ul.navbar-nav\")[1];\n\n    if (list) {\n      // See if no items exist\n      var items = this.props.itemsEnd || [];\n\n      if (items.length == 0) {\n        // Remove the element\n        list.remove();\n      } else {\n        // Parse the items\n        for (var i = 0; i < items.length; i++) {\n          // Create the item\n          var item = new item_1.NavbarItem(items[i], this.props, itemTemplate);\n\n          this._items.push(item);\n\n          list.appendChild(item.el);\n        }\n      }\n    }\n  };\n  /**\r\n   * Public Methods\r\n   */\n  // Updates the navbar template type\n\n\n  _Navbar.prototype.setType = function (navbarType) {\n    // Remove the classes\n    this.el.classList.remove(\"navbar-dark\");\n    this.el.classList.remove(\"navbar-light\");\n    this.el.classList.remove(\"bg-dark\");\n    this.el.classList.remove(\"bg-light\");\n    this.el.classList.remove(\"bg-primary\");\n\n    this._btnSearch.classList.remove(\"btn-outline-info\");\n\n    this._btnSearch.classList.remove(\"btn-outline-light\");\n\n    this._btnSearch.classList.remove(\"btn-outline-primary\"); // See which classes to add\n\n\n    switch (navbarType) {\n      // Dark\n      case NavbarTypes.Dark:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-dark\");\n\n        this._btnSearch.classList.add(\"btn-outline-info\");\n\n        break;\n      // Primary\n\n      case NavbarTypes.Primary:\n        // Add the class\n        this.el.classList.add(\"navbar-dark\");\n        this.el.classList.add(\"bg-primary\");\n\n        this._btnSearch.classList.add(\"btn-outline-light\");\n\n        break;\n      // Default - Light\n\n      default:\n        // Add the class\n        this.el.classList.add(\"navbar-light\");\n        this.el.classList.add(\"bg-light\");\n\n        this._btnSearch.classList.add(\"btn-outline-primary\");\n\n        break;\n    }\n  };\n\n  return _Navbar;\n}(base_1.Base);\n\nexports.Navbar = function (props, template, itemTemplate) {\n  return new _Navbar(props, template, itemTemplate);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/navbar/index.js?");
 
 /***/ }),
 
@@ -1313,7 +1313,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.Offcanvas = exports.OffcanvasClassNames = exports.OffcanvasTypes = void 0;\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./build/components/classNames.js\");\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/offcanvas/templates.js\");\n/**\r\n * Offcanvas Types\r\n */\n\n\nvar OffcanvasTypes;\n\n(function (OffcanvasTypes) {\n  OffcanvasTypes[OffcanvasTypes[\"Bottom\"] = 1] = \"Bottom\";\n  OffcanvasTypes[OffcanvasTypes[\"End\"] = 2] = \"End\";\n  OffcanvasTypes[OffcanvasTypes[\"Start\"] = 3] = \"Start\";\n})(OffcanvasTypes = exports.OffcanvasTypes || (exports.OffcanvasTypes = {}));\n/**\r\n * Offcanvas Classes\r\n */\n\n\nexports.OffcanvasClassNames = new classNames_1.ClassNames([\"offcanvas-bottom\", \"offcanvas-end\", \"offcanvas-start\"]);\n/**\r\n * Offcanvas\r\n */\n\nvar _Offcanvas =\n/** @class */\nfunction (_super) {\n  __extends(_Offcanvas, _super); // Constructor\n\n\n  function _Offcanvas(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._autoClose = null;\n    _this._eventCreated = false;\n    _this._tranisitioningFl = false; // Configure the offcanvas\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 card group\n\n\n  _Offcanvas.prototype.configure = function () {\n    // Set the attributes\n    this.props.id ? this.el.id = this.props.id : null; // Set the type\n\n    this.setType(this.props.type); // Get the options\n\n    var options = this.props.options || {\n      backdrop: true,\n      keyboard: true,\n      scroll: false\n    }; // Set the properties\n\n    options.backdrop ? this.el.setAttribute(\"data-bs-body\", \"backdrop\") : null;\n    options.scroll ? this.el.setAttribute(\"data-bs-body\", \"scroll\") : null; // Set the header\n\n    common_1.appendContent(this.el.querySelector(\".offcanvas-header > div\"), this.props.title); // Set the body\n\n    common_1.appendContent(this.el.querySelector(\".offcanvas-body\"), this.props.body); // Set the focus\n\n    if (options.focus) {\n      this.el.focus();\n    } // Set the visibility\n\n\n    if (options.visible) {\n      this.toggle();\n    }\n  }; // Configures the auto-close event\n\n\n  _Offcanvas.prototype.configureAutoCloseEvent = function () {\n    var _this = this; // See if the event exists\n\n\n    if (this._eventCreated) {\n      return;\n    } // Ensure the body exists\n\n\n    if (document.body) {\n      // Add a click event to the modal\n      document.body.addEventListener(\"click\", function (ev) {\n        // See if the auto close flag is set\n        if (_this._autoClose) {\n          // Do nothing if we are tranisitionsing\n          if (_this._tranisitioningFl) {\n            return;\n          } // Do nothing if we clicked within the offcanvas\n\n\n          if (ev.composedPath().includes(_this.el)) {\n            return;\n          } else {\n            // Get the mouse coordinates\n            var x = ev.clientX;\n            var y = ev.clientY;\n\n            var elCoordinate = _this.el.getBoundingClientRect(); // See if we clicked within the offcanvas\n\n\n            if (x <= elCoordinate.right && x >= elCoordinate.left && y <= elCoordinate.bottom && y >= elCoordinate.top) {\n              return;\n            } // Else, see if something was selected\n            else if (x == 0 && y == 0) {\n              return;\n            }\n          } // Close the offcanvas if it's visible\n\n\n          if (_this.isVisible) {\n            _this.toggle();\n          }\n        }\n      }); // Set the flag\n\n      this._eventCreated = true;\n    } else {\n      // Add the load event\n      window.addEventListener(\"load\", function () {\n        // Configure the event\n        _this.configureAutoCloseEvent();\n      });\n    }\n  }; // Configure the events\n\n\n  _Offcanvas.prototype.configureEvents = function () {\n    var _this = this; // Execute the events\n\n\n    this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(\".offcanvas-header > div\"), this.props) : null;\n    this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(\".offcanvas-body\"), this.props) : null; // Get the close button\n\n    var elClose = this.el.querySelector(\".btn-close\");\n\n    if (elClose) {\n      // Add a click event\n      elClose.addEventListener(\"click\", function () {\n        // Hide the modal\n        _this.hide();\n      });\n    } // Set the flag to determine if the modal is sticky\n\n\n    this.setAutoClose(this.props.options && typeof this.props.options.autoClose === \"boolean\" ? this.props.options.autoClose : true); // See if the keyboard option is set\n\n    if (this.props.options && this.props.options.keyboard) {\n      // Add a click event\n      this.el.addEventListener(\"keydown\", function (ev) {\n        // See if the escape key was clicked and the modal is visible\n        if (ev.keyCode === 27 && _this.isVisible) {\n          // Toggle the modal\n          _this.toggle();\n        }\n      });\n    }\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Hides the modal\n\n\n  _Offcanvas.prototype.hide = function () {\n    // Toggle the modal\n    this.isVisible ? this.toggle() : null;\n  };\n\n  Object.defineProperty(_Offcanvas.prototype, \"isVisible\", {\n    // Returns true if the modal is visible\n    get: function get() {\n      return this.el.classList.contains(\"show\");\n    },\n    enumerable: false,\n    configurable: true\n  }); // Updates the auto close flag\n\n  _Offcanvas.prototype.setAutoClose = function (value) {\n    // Set the flag\n    this._autoClose = value; // Configure the event if we are setting the value\n\n    this._autoClose ? this.configureAutoCloseEvent() : null;\n  }; // Sets the offcanvas type\n\n\n  _Offcanvas.prototype.setType = function (offcanvasType) {\n    var _this = this; // Parse the class names\n\n\n    exports.OffcanvasClassNames.parse(function (className) {\n      // Remove the class names\n      _this.el.classList.remove(className);\n    }); // Set the class name\n\n    var className = exports.OffcanvasClassNames.getByType(offcanvasType) || exports.OffcanvasClassNames.getByType(OffcanvasTypes.End);\n    this.el.classList.add(className);\n  }; // Shows the modal\n\n\n  _Offcanvas.prototype.show = function () {\n    // Toggle the modal\n    this.isVisible ? null : this.toggle();\n  }; // Toggles the modal\n\n\n  _Offcanvas.prototype.toggle = function () {\n    var _this = this;\n\n    var backdrop = document.querySelector(\".offcanvas-backdrop\"); // Set the flag\n\n    this._tranisitioningFl = true; // See if this modal is visible\n\n    if (this.isVisible) {\n      // Hide the modal\n      this.el.classList.add(\"offcanvas-toggling\");\n      this.el.classList.remove(\"show\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        _this.el.style.visibility = \"hidden\";\n\n        _this.el.classList.remove(\"offcanvas-toggling\"); // Remove the backdrop\n\n\n        backdrop ? document.body.removeChild(backdrop) : null;\n        backdrop = null; // Set the flag\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    } else {\n      // Create the backdrop if we are showing it\n      var showBackdrop = this.props.options && typeof this.props.options.backdrop === \"boolean\" ? this.props.options.backdrop : true;\n\n      if (showBackdrop && backdrop == null) {\n        backdrop = document.createElement(\"div\");\n        backdrop.classList.add(\"offcanvas-backdrop\");\n        backdrop.classList.add(\"fade\");\n        backdrop.classList.add(\"show\");\n        document.body.appendChild(backdrop);\n      } // Show the modal\n\n\n      this.el.style.visibility = \"visible\";\n      this.el.classList.add(\"offcanvas-toggling\");\n      this.el.classList.add(\"show\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Update the class\n        _this.el.classList.remove(\"offcanvas-toggling\"); // Set the flag\n\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    }\n  };\n\n  return _Offcanvas;\n}(base_1.Base);\n\nexports.Offcanvas = function (props, template) {\n  return new _Offcanvas(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/offcanvas/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.Offcanvas = exports.OffcanvasClassNames = exports.OffcanvasTypes = void 0;\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./build/components/classNames.js\");\n\nvar base_1 = __webpack_require__(/*! ../base */ \"./build/components/base.js\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./build/components/common.js\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./build/components/offcanvas/templates.js\");\n/**\r\n * Offcanvas Types\r\n */\n\n\nvar OffcanvasTypes;\n\n(function (OffcanvasTypes) {\n  OffcanvasTypes[OffcanvasTypes[\"Bottom\"] = 1] = \"Bottom\";\n  OffcanvasTypes[OffcanvasTypes[\"End\"] = 2] = \"End\";\n  OffcanvasTypes[OffcanvasTypes[\"Start\"] = 3] = \"Start\";\n})(OffcanvasTypes = exports.OffcanvasTypes || (exports.OffcanvasTypes = {}));\n/**\r\n * Offcanvas Classes\r\n */\n\n\nexports.OffcanvasClassNames = new classNames_1.ClassNames([\"offcanvas-bottom\", \"offcanvas-end\", \"offcanvas-start\"]);\n/**\r\n * Offcanvas\r\n */\n\nvar _Offcanvas =\n/** @class */\nfunction (_super) {\n  __extends(_Offcanvas, _super); // Constructor\n\n\n  function _Offcanvas(props, template) {\n    if (template === void 0) {\n      template = templates_1.HTML;\n    }\n\n    var _this = _super.call(this, template, props) || this;\n\n    _this._autoClose = null;\n    _this._eventCreated = false;\n    _this._tranisitioningFl = false; // Configure the offcanvas\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 card group\n\n\n  _Offcanvas.prototype.configure = function () {\n    // Set the attributes\n    this.props.id ? this.el.id = this.props.id : null; // Set the type\n\n    this.setType(this.props.type); // Get the options\n\n    var options = this.props.options || {\n      backdrop: true,\n      keyboard: true,\n      scroll: false\n    }; // Set the properties\n\n    options.backdrop ? this.el.setAttribute(\"data-bs-body\", \"backdrop\") : null;\n    options.scroll ? this.el.setAttribute(\"data-bs-body\", \"scroll\") : null; // Set the header\n\n    common_1.appendContent(this.el.querySelector(\".offcanvas-header > div\"), this.props.title); // Set the body\n\n    common_1.appendContent(this.el.querySelector(\".offcanvas-body\"), this.props.body); // Set the focus\n\n    if (options.focus) {\n      this.el.focus();\n    } // Set the visibility\n\n\n    if (options.visible) {\n      this.toggle();\n    }\n  }; // Configures the auto-close event\n\n\n  _Offcanvas.prototype.configureAutoCloseEvent = function () {\n    var _this = this; // See if the event exists\n\n\n    if (this._eventCreated) {\n      return;\n    } // Ensure the body exists\n\n\n    if (document.body) {\n      // Add a click event to the modal\n      document.body.addEventListener(\"click\", function (ev) {\n        // See if the auto close flag is set\n        if (_this._autoClose) {\n          // Do nothing if we are tranisitionsing\n          if (_this._tranisitioningFl) {\n            return;\n          } // Do nothing if we clicked within the offcanvas\n\n\n          if (ev.composedPath().includes(_this.el)) {\n            return;\n          } else {\n            // Get the mouse coordinates\n            var x = ev.clientX;\n            var y = ev.clientY;\n\n            var elCoordinate = _this.el.getBoundingClientRect(); // See if we clicked within the offcanvas\n\n\n            if (x <= elCoordinate.right && x >= elCoordinate.left && y <= elCoordinate.bottom && y >= elCoordinate.top) {\n              return;\n            } // Else, see if something was selected\n            else if (x == 0 && y == 0) {\n              return;\n            }\n          } // Close the offcanvas if it's visible\n\n\n          if (_this.isVisible) {\n            _this.toggle();\n          }\n        }\n      }); // Set the flag\n\n      this._eventCreated = true;\n    } else {\n      // Add the load event\n      window.addEventListener(\"load\", function () {\n        // Configure the event\n        _this.configureAutoCloseEvent();\n      });\n    }\n  }; // Configure the events\n\n\n  _Offcanvas.prototype.configureEvents = function () {\n    var _this = this; // Execute the events\n\n\n    this.props.onRenderHeader ? this.props.onRenderHeader(this.el.querySelector(\".offcanvas-header > div\"), this.props) : null;\n    this.props.onRenderBody ? this.props.onRenderBody(this.el.querySelector(\".offcanvas-body\"), this.props) : null; // Get the close button\n\n    var elClose = this.el.querySelector(\".btn-close\");\n\n    if (elClose) {\n      // Add a click event\n      elClose.addEventListener(\"click\", function () {\n        // Hide the modal\n        _this.hide();\n      });\n    } // Set the flag to determine if the modal is sticky\n\n\n    this.setAutoClose(this.props.options && typeof this.props.options.autoClose === \"boolean\" ? this.props.options.autoClose : true); // See if the keyboard option is set\n\n    if (this.props.options && this.props.options.keyboard) {\n      // Add a click event\n      this.el.addEventListener(\"keydown\", function (ev) {\n        // See if the escape key was clicked and the modal is visible\n        if (ev.code === \"27\" && _this.isVisible) {\n          // Toggle the modal\n          _this.toggle();\n        }\n      });\n    }\n  };\n  /**\r\n   * Public Interface\r\n   */\n  // Hides the modal\n\n\n  _Offcanvas.prototype.hide = function () {\n    // Toggle the modal\n    this.isVisible ? this.toggle() : null;\n  };\n\n  Object.defineProperty(_Offcanvas.prototype, \"isVisible\", {\n    // Returns true if the modal is visible\n    get: function get() {\n      return this.el.classList.contains(\"show\");\n    },\n    enumerable: false,\n    configurable: true\n  }); // Updates the auto close flag\n\n  _Offcanvas.prototype.setAutoClose = function (value) {\n    // Set the flag\n    this._autoClose = value; // Configure the event if we are setting the value\n\n    this._autoClose ? this.configureAutoCloseEvent() : null;\n  }; // Sets the offcanvas type\n\n\n  _Offcanvas.prototype.setType = function (offcanvasType) {\n    var _this = this; // Parse the class names\n\n\n    exports.OffcanvasClassNames.parse(function (className) {\n      // Remove the class names\n      _this.el.classList.remove(className);\n    }); // Set the class name\n\n    var className = exports.OffcanvasClassNames.getByType(offcanvasType) || exports.OffcanvasClassNames.getByType(OffcanvasTypes.End);\n    this.el.classList.add(className);\n  }; // Shows the modal\n\n\n  _Offcanvas.prototype.show = function () {\n    // Toggle the modal\n    this.isVisible ? null : this.toggle();\n  }; // Toggles the modal\n\n\n  _Offcanvas.prototype.toggle = function () {\n    var _this = this;\n\n    var backdrop = document.querySelector(\".offcanvas-backdrop\"); // Set the flag\n\n    this._tranisitioningFl = true; // See if this modal is visible\n\n    if (this.isVisible) {\n      // Hide the modal\n      this.el.classList.add(\"offcanvas-toggling\");\n      this.el.classList.remove(\"show\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        _this.el.style.visibility = \"hidden\";\n\n        _this.el.classList.remove(\"offcanvas-toggling\"); // Remove the backdrop\n\n\n        backdrop ? document.body.removeChild(backdrop) : null;\n        backdrop = null; // Set the flag\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    } else {\n      // Create the backdrop if we are showing it\n      var showBackdrop = this.props.options && typeof this.props.options.backdrop === \"boolean\" ? this.props.options.backdrop : true;\n\n      if (showBackdrop && backdrop == null) {\n        backdrop = document.createElement(\"div\");\n        backdrop.classList.add(\"offcanvas-backdrop\");\n        backdrop.classList.add(\"fade\");\n        backdrop.classList.add(\"show\");\n        document.body.appendChild(backdrop);\n      } // Show the modal\n\n\n      this.el.style.visibility = \"visible\";\n      this.el.classList.add(\"offcanvas-toggling\");\n      this.el.classList.add(\"show\"); // Wait for the animation to complete\n\n      setTimeout(function () {\n        // Update the class\n        _this.el.classList.remove(\"offcanvas-toggling\"); // Set the flag\n\n\n        _this._tranisitioningFl = false;\n      }, 250);\n    }\n  };\n\n  return _Offcanvas;\n}(base_1.Base);\n\nexports.Offcanvas = function (props, template) {\n  return new _Offcanvas(props, template);\n};\n\n//# sourceURL=webpack://gd-bs/./build/components/offcanvas/index.js?");
 
 /***/ }),