gd-bs 5.3.0 → 5.3.1

package/.github/workflows/build.yml

@@ -7,22 +7,25 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x]
+        node-version: [14.x]
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ env.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ env.node-version }}
-    - name: Build Library using NodeJS ${{ env.node-version }}
+    - name: Install Libraries using NodeJS ${{ env.node-version }}
       run: |
-        # Build the project
+        # Install the libraries
         npm install
         npm link typescript
+    - name: Build Library using NodeJS ${{ env.node-version }}
+      run: |
+        # Build the project
         npm run all
         npm run test --if-present
     - name: Build Artifacts
       uses: actions/upload-artifact@v1
       with:
         name: dist
-        path: dist
+        path: dist

package/build/components/modal/index.js

@@ -86,7 +86,7 @@ var _Modal = /** @class */ (function (_super) {
             if (this.props.hideCloseButton) {
                 // Remove the close button
                 var closeButton = dialog.querySelector(".btn-close");
-                closeButton ? closeButton.parentNode.removeChild(closeButton) : null;
+                closeButton ? closeButton.classList.add("d-none") : null;
             }
         }
         // Set the body
@@ -234,6 +234,22 @@ var _Modal = /** @class */ (function (_super) {
         // Set the backdrop
         this.el.setAttribute("data-bs-backdrop", value ? "true" : "false");
     };
+    // Updates the visibility of the close button
+    _Modal.prototype.setCloseButtonVisibility = function (showFl) {
+        // Get the close button
+        var closeButton = this.el.querySelector(".btn-close");
+        if (closeButton) {
+            // See if we are showing the button
+            if (showFl) {
+                // Show the button
+                closeButton.classList.remove("d-none");
+            }
+            else {
+                // Hide the button
+                closeButton.classList.add("d-none");
+            }
+        }
+    };
     // Updates the focus flag
     _Modal.prototype.setFocus = function (value) {
         // Set the focus

package/dist/gd-bs-icons.js

@@ -1215,7 +1215,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 */ \"./src/components/base.ts\");\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./src/components/classNames.ts\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./src/components/common.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/modal/templates.ts\");\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.parentNode.removeChild(closeButton) : 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 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/./src/components/modal/index.ts?");
+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 */ \"./src/components/base.ts\");\n\nvar classNames_1 = __webpack_require__(/*! ../classNames */ \"./src/components/classNames.ts\");\n\nvar common_1 = __webpack_require__(/*! ../common */ \"./src/components/common.ts\");\n\nvar templates_1 = __webpack_require__(/*! ./templates */ \"./src/components/modal/templates.ts\");\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/./src/components/modal/index.ts?");
 
 /***/ }),